Playing audio in a browser

If you want to play music or sounds from a browser, your choice is to use either Flash or the new <audio> tag in HTML5. Each method has issues, but depending on your requirements you might not care about all of them.

Flash

• Works in all desktop browsers, even Internet Explorer. Does not work on iPads or iPhones.
• Requires you to embed a Flash component into your page which will later play the audio for you.
• Can play MP3s or Wave files. Cannot play OGG Vorbis audio.
• Cannot reliably seek to a given position when playing VBR-encoded MP3s.

HTML5 audio

• Is the future, but not quite here yet.
• Allows you to play audio with a simple <audio> tag in your HTML, or by instantiating a new Audio object from Javascript. No additional libraries are required, although browser implementations are so bad you will probably want library support anyway (see below).
• Only works on recent browsers Show archive.org snapshot . Works on iPads and iPhones.
• Browser vendors cannot agree on a common codec to support, so you will need to provide both MP3 and Ogg Vorbis encoded versions for each sound you would like to play (see the compatibility table Show archive.org snapshot ). The <audio> tag can take multiple <source> children for this purpose.
• Can reliably seek to a given position when playing VBR-encoded MP3s or OGGs.
• The player controls are ugly and cannot by styled on most browsers.
• Some browser implementations play popping sounds when you move the playhead position ("seek") in an audio file.
• Depending on the browser, you have little to no control over when the audio file starts loading, and it's hard to detect if a file has finished loading.

Hybrid libraries

There are a number of libraries that can help you work around compatibility issues. All these solutions share some traits:

• You have more control over when a file starts loading.
• If possible, HTML5 audio is used to play a file. The libraries will fall back to using Flash automatically. In each mode the player will have the issues of the respective technology as listed above (e.g. seeking will be broken for VBR MP3s in Flash mode).
• The libraries usually have a Javascript API that is nicer than the ones provided by the browser and plain Flash, and which works for both Flash and HTML5 audio playback modes.
• They come with custom UI controls that can be styled or skinned, and which work for both Flash and HTML5 audio playback.

Some products I tested are:

jPlayer Show archive.org snapshot

Free. Provides a thin Javascript layer over the mess that is HTML5 audio and Flash playback. Requires jQuery. You need to provide your own <div> containers and CSS for player controls, which is overhead if you don't care about looks but allows complete control over the visuals. Can play audio and video. Developers seem to know what they're doing.

JW Player Show archive.org snapshot

Non-free product, but very popular. Can play audio and video and has a good number of options. Offers some pretty skins for downloading, but is hard to customize beyond that.

SoundManager 2 Show archive.org snapshot

Free. Only does audio. Awkward API. There seems to be no way to implement a seek bar.