- Preparing HTML5-Ready Audio
- Installing the Dreamweaver HTML5 Pack
- Embedding an HTML5 Audio Element in a Dreamweaver CS5 Web Page
- Defining Audio Display and Play Parameters
- Providing Alternative Audio for Non-HTML5 Environments
- Troubleshooting and Future Thoughts
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:
- 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 (>).
- Type anything you want, such as Click here to listen to the audio file.
- 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.
- Use the Property inspector to attach a link to the audio file for the text you just added (see Figure 3).
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.