- 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
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Embedding an HTML5 Audio Element in a Dreamweaver CS5 Web Page
For this part of the process, I'll use an MP3 audio file as an example in the recipe. Based on the earlier discussion of audio file formats, you can feel free to substitute a WAV or OGG file, but keep in mind that OGG won't work in Safari.
As a prerequisite to the following set of steps, you should have a Dreamweaver CS5 website defined, and a new, blank, Dreamweaver page open. (Creating a Dreamweaver CS5 website and web page are covered in detail in Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques.) You'll also need to copy an MP3 file from somewhere on your computer (or download one) into the site folder for the website you'll use for these steps.
Finally, as much as I try to avoid going into Split mode and typing code in Dreamweaver, that will be necessary to define the Audio element. As you'll soon see, the HTML5 Pack does provide easy-to-use code hints in Code (or Split) view. Unfortunately, you cannot use the menu in Design view to insert HTML5 Audio elements.
With that preparation, follow these steps to embed an Audio element in an open Dreamweaver CS5 HTML web page:
- In Split view, place your cursor after the opening <body> tag, and press Enter (PC) or Return (Mac) to create a new line of code.
- Type <au and then press Tab to complete the beginning of the <audio> tag.
- Press the spacebar and double-click src in the pop-up list (see Figure 1).
- A Browse link appears. Double- click the Browse link to open the Select File dialog.
- Navigate to the MP3 (or WAV or OGG) audio file you copied into your Dreamweaver site folder before the start of these steps. Double-click that file to select it.
- Next, we'll add a parameter to display a controller (player) for the audio. Press the spacebar, and double-click controls from the code hints.
- Double-click controls again, in the next code hint, so that your line of code now reads as follows (where xxx is the filename of your MP3 audio file):
- Type </ and the HTML5 Pack will autocomplete the closing tag </audio>.
)
Figure 1 Browsing for an audio file.
<audio src="xxx.mp3" controls="controls"
Remember, this particular configuration works only in the Safari browser, so you can preview it only by choosing File > Preview in Browser > Safari (see Figure 2).
){kind=small}
Figure 2 Viewing an embedded HTML5 Audio element in Safari.
If you used a WAV file (or an OGG file), you can preview the HTML5 Audio element in Firefox.
I know—this still leaves a big chunk of the online viewing (and listening) audience locked out of hearing the audio file. We'll solve that problem shortly, but first let's explore additional parameters that can be used to add features like autoplay to our Audio element.