Boombox.js ========== HTML5 introduces the `` element which offers a way to play audio natively in the browser. However the native controls are a little lacking in style. Thankfully HTML5 also brings a full api to interact with which allows us to skin an Audio object however we want. Goals ----- The primary goal of this project is to create a high quality HTML5 audio boombox that can be easily skinned and extended. Get a modern browser -------------------- First things first—make sure you’re running a modern browser. My favorite is [Chrome](http://www.google.com/chrome) but [Safari](http://www.apple.com/safari/download/), [Opera](http://www.opera.com/mobile/download/versions/), [Firefox](http://www.mozilla.com/en-US/firefox/new/), or even [IE9](http://windows.microsoft.com/en-US/internet-explorer/downloads/ie-9/worldwide-languages) will also do. Let me repeat that—*_this app works in ALL major modern browsers_*. Including jQuery & boombox.js ----------------------------- Next grab the latest copy of [jQuery](http://code.jquery.com/jquery-latest.js) and [boombox.js](https://raw.github.com/cgcardona/boombox.js/master/js/boombox.js) and include a link to both of them in your HTML `` section. Include the buttons ------------------- In theory you could have as many boomboxes on a page as you wish. For each one you'll need to provide the following markup. Make sure that you wrap each group of buttons in a div with a unique id. You'll be using that unique id in the next step. 1 Play Pause Previous Next Volume Down Volume Up Mute Create a boombox ---------------- To create a new boombox simply call new Boombox(//arguments); The Boombox constructor takes an object literal of tracks and configuration values. Notice the object literal being passed into the Boombox constructor has two properties which are themselves objects—tracks and configs. The titles and paths for the audio tracks go in the `tracks` object. The audiotrack paths don’t have a file extension. That’s because boombox detects what codec the browser supports and serves up the correct file. As a developer you need to encode your audiofiles once as .mp3 and once as .ogg and put the path to those files in the object literal that is passed into the boombox function. In the configs object you put the id of the container div for this boombox as well as a boolean value which triggers autoplay. Mime Type --------- To get Firefox to recognize the .ogg file type correctly you’ll need to add this one line to the .htaccess file on the server that is serving up the audiofiles. AddType audio/ogg .ogg Carlos Cardona 2011–2012 ------------------- All software is available free as in speech and free as in pizza under the [MIT Open Source License](http://www.opensource.org/licenses/mit-license.php). For more information and examples please see [Audiofile.cc/boombox](https://audiofile.cc/boombox) and follow [cgcardona](http://twitter.com/cgcardona). For more projects by Audiofile please check out [Audiofile.cc](https://audiofile.cc).
English
