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.
- 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.
- 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
- Only works on recent browsers. 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). 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.
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).
- 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:
<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
- 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
- Free. Only does audio. Awkward API. There seems to be no way to implement a seek bar.
Author of this card:
- About this deck:
- We are makandra and do test-driven, agile Ruby on Rails software development.