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.
- License for source code
License for source code
All source code included in the card Playing audio in a browser is licensed under the license stated below. This includes both code snippets embedded in the card text and code that is included as a file attachment. Excepted from this license are code snippets that are explicitely marked as citations from another source.
The MIT License (MIT) Copyright (c) 2011-2012 makandra GmbH Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.