Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

Embedding HTML5 Audio with Dreamweaver CS5

  • Print
  • + Share This
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.
From the author of

As I write this article/tutorial on embedding HTML5 audio in Dreamweaver CS5 web pages, the world of web audio is in a state of rapid and somewhat chaotic evolution. Competing web standards are being fought, with Apple and others championing HTML5 and its Audio element (tag) as the wave of future online audio. HTML5 is already a viable and inviting way to present online audio, and web designers who want to reach the iPhone/iPod Touch/iPad audience with audio already need to build HTML5 support into their work.

This article explores presenting audio using the HTML5 Audio element in several pieces:

  • Preparing HTML5-ready digital audio files
  • Adding the HTML5 Pack to Dreamweaver CS5
  • Embedding Audio elements in web pages with Dreamweaver CS5
  • Defining Audio display and play parameters
  • Providing alternative audio for non-HTML5 environments
  • Troubleshooting

Whew! All that, just to let visitors play audio in your web page? I'm afraid so.

Why so complicated? Well, that's due to a few factors:

  • Competing media presentation alternatives (IE, Apple's assertion of HTML5 in opposition to Flash as a tool for presenting media online)
  • Competing browser standards—different browsers support different elements of HTML5
  • A plethora of different audio file formats exist—WAV, AIFF, MP3, Ogg Vorbis (OGG), etc.

I wish it were simpler, but this is the world where we live. There are five or six basic steps in this process, but none of them are really complicated. Let's get started!

Preparing HTML5-Ready Audio

Riddle: There are several popular audio formats: MP3, WAV, AIFF, and more. Many browsers support HTML5 Audio: Firefox, Opera, Safari, Chrome. So, which audio file format can be used to embed HTML5 audio in all four HTML5-friendly browsers?

Answer: None!

Different HTML5-supporting browsers support different audio formats. At last count (and this is a moving target), the set of audio formats supported in different browsers looked like this:

  • Firefox 3.5 supports the obscure OGG format and WAV.
  • Safari 4 supports MP3 and WAV.
  • Chrome 3 supports OGG and MP3.
  • Opera 10 supports WAV.

As you can see, this situation presents us with a rather tough challenge. Which audio file format should we use? There is no clear answer, but I'll divulge my solution, imperfect as it is: MP3.

Why MP3? For one thing, when I implement the HTML5 Audio element, I'm aiming at the Apple crowd—on iPhone/iPad/iPod Touch. They all use Apple's Safari browser, which supports MP3.

Yes, Safari also supports WAV, and if you use WAV audio, your audio files can be played in the popular Firefox browser. But WAV files are not compressed, as MP3 files are—they tend to be much larger in file size, and much longer in download time. Prohibitively longer, in my experience—visitors give up and go away before an audio file of any significant length downloads and begins to play. And MP3 files work fine using the alternative audio options I'll integrate into this article.

But MP3 isn't a definitive answer. A significant case can be made for embedding WAV files—or even, I guess, OGG files. And any file-format solution will be imperfect.

  • + Share This
  • 🔖 Save To Your Account