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.
Providing Alternative Audio for Non-HTML5 Environments

Providing Alternative Audio for Non-HTML5 Environments

While the upcoming release of Internet Explorer 9 promises HTML5 support, the current version of Internet Explorer doesn't support HTML5 at all. Many folks are still browsing the Web with IE 8, 7, and 6, so it's important to include alternate access to online audio that doesn't require HTML5 support.

To support browsing environments that don't interpret HTML5, we'll add a line of text that provides a link to our audio file. That link will open the audio file in a browser window, using whatever plug-in player the visitor has installed (such as Windows Media Player or QuickTime Player).

To add text that will display in browsers without HTML5 support, all that's necessary is to type that line of text after all the Audio element parameters. Then that text can be formatted (and links defined) right in the friendly Dreamweaver CS5 Design window.

Here's how:

  1. Place your cursor in the code section of the Split mode window, just before the </audio> code that closes the Audio element, and type a closing angle bracket (>).
  2. Type anything you want, such as Click here to listen to the audio file.
  3. Click in the Design window to update the preview. The text you typed displays in the Design window (with Live View off), and will display in browsers that don't support HTML5.
  4. Use the Property inspector to attach a link to the audio file for the text you just added (see Figure 3).
  5. Figure 3 A link to the audio file for non-HTML5 browsers.

The link isn't as elegant a solution as playing the audio file in a nice, neat player embedded directly in the web page, but it provides complete access to the audio file in any browsing environment.

6. Troubleshooting and Future Thoughts | Next Section Previous Section