« back to all cards in this deck
Posted almost 4 years ago. Visible to the public.

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. 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.

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
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
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.
Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Author of this card:

Avatar
Henning Koch
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.
Posted by Henning Koch to makandropedia