Home / Articles / Adobe Dreamweaver / Embedding HTML5 Audio with Dreamweaver CS5

Embedding HTML5 Audio with Dreamweaver CS5

Article Description

David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos: Essential Techniques, provides a step-by-step walkthrough of the process for using the HTML5 Audio element to present audio in a Dreamweaver-designed website.
Troubleshooting and Future Thoughts

Troubleshooting and Future Thoughts

The scenario implemented in this tutorial allows you to embed an audio file in a web page that plays in a browser window, without the need for any external plug-in such as QuickTime Player, Flash Player, or Windows Media Player. The steps you completed provide an option to open the audio file in an external plug-in if the visitor's browser doesn't support HTML5. Finally, you learned how to use code hints that install with the HTML5 Pack in Dreamweaver CS5 to automate this process, and make it more trouble-free.

A number of factors can derail the HTML5 Audio element. The most common problem I encounter in working with students and clients is that they have embedded an audio file in a format that's incompatible with the browser. This is an easy problem to have, given the conflicting sets of supported audio formats in different browsers. Even if you define an HTML5 Audio element correctly, and a visitor opens the page in a browser that supports HTML5, the audio file won't play if the file itself isn't in a supported format.

Additional parameters for the HTML5 Audio tag (such as providing alternate files for different browsers, or enabling metadata) are discussed online. I haven't implemented them in this tutorial for two reasons:

  • These features aren't supported by Dreamweaver's HTML5 Pack and the set of code hints that come with it.
  • These parameters create their own new sets of troubleshooting issues.

In short, presenting online audio is a moving target. Different HTML5 attributes are supported in different browsers, and the various web powers-that-be are negotiating common standards even as they claw, bite, and scratch each other for position in the emerging new web world.

Browsers that support the HTML5 Audio element provide the most inviting option for presenting online audio clips, and the Dreamweaver CS5 HTML5 Pack makes it possible to embed HTML5 audio without worrying much about HTML coding.