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.
Installing the Dreamweaver HTML5 Pack

Installing the Dreamweaver HTML5 Pack

The first step in working with HTML5 audio (or any other HTML5 features) in Dreamweaver is to install the HTML5 Pack. The HTML5 Pack is a Dreamweaver extension—add-on code that becomes part of the Dreamweaver CS5 interface.

The HTML5 Pack was made available after the release of Dreamweaver CS5, and for that reason, most current reference material on Dreamweaver CS5 doesn't cover this essential addition. However, I explore the HTML5 Pack in detail in my book Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques, and there is much to appreciate in this significant post-release upgrade to Dreamweaver CS5.

Perhaps the most impressive tool in the HTML5 Pack is the media query feature. The "media" in a media query doesn't refer to audio or video attributes; rather, it refers to the medium (browsing environment) being used by a viewer. For example, a media query can detect that a visitor to your web page is viewing the page via an Apple iPad, and therefore cannot access Flash content—and the media query can then deflect the visitor to a different style sheet that hides the Flash element and makes alternative video visible. Implementing that scenario is beyond the scope of this article, but I wanted to give you some sense of the kind of doors that the HTML5 Pack opens, before we zoom in on new features that facilitate embedding HTML5 audio.

As I mentioned earlier, the HTML5 Pack is an extension. As with all Adobe Creative Suite extensions, you can find it by searching the Adobe Dreamweaver Exchange. You also can download the HTML5 Pack extension directly from the Adobe Labs website.

After downloading the extension, follow these steps in Dreamweaver CS5:

  1. Choose Command > Manage Extensions. The Adobe Extension Manager CS5 opens.
  2. Click Install at the top of the Extension Manager and navigate to the .zxp extension file you just downloaded.
  3. Click Select, and the extension will install. Use the scrollbar to read a description of the extension after you install it.
  4. Exit Dreamweaver CS5 and relaunch it to access the new features you just installed. That's it!
3. Embedding an HTML5 Audio Element in a Dreamweaver CS5 Web Page | Next Section Previous Section