MP3 Flashback

When the pain from HTML5 audio incompatibilites and lack of support for MP3's becomes too much to bare.

I want my Flash back when the following conditions are met:

HTML5 audio element is NOT supported
MP3 format is NOT supported

Features

Compatible with Firefox 3.6+, Chrome, Safari 5+, Opera, and Internet Explorer 7+ web browsers.
Compatible with iOS and Android mobile web browsers.
Standard player functionality including progress bar, volume controls, and duration timer.
Easy to set-up and customize.
Supports multiple player instances on a single document.
Fast and lightweight (jQuery plug-in *only 3 kB)

Check out the demo provided with this package.

Installation

Download the latest sources to your computer using a web browser.
Extract the contents of the .zip into a folder on your local computer.
Upload the folder with the following files to your web site.

Filename	Role
MP3-Flashback.min.js	The main script to be included from within your HTML document.
MP3-Flashback.min.css	This style sheet that defines the "look & feel" of the progress bar and volume slider
MP3-Flashback.swf	Flash based fallback when HTML5 audio/MP3 licensing is not supported.
images/loading.gif	Animation used during a loading event.
images/progress.gif	Animation used when playing an audio file.

Set-up

When working with multiple players it is important to attach each jQuery selector to a unique element.

$(selector).MP3Flashback(settings);

Source Code

Add the following Javascript between the <head></head> tags of your HTML document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<script src="/path/to/MP3-Flashback.min.js"></script>
<script>
$(document).ready(function() {
  $('#player').MP3Flashback({
    tracks : {
      file0 : 'path/to/file.mp3'
    }
  });
});
</script>

<link rel="stylesheet" type="text/css" href="MP3-Flashback.min.css">

Create a simple MP3 player using the following HTML structure. It's pretty self-explanatory.

<div id="player">
  <div class="progress_bar"></div>

  <button class="button_pause" type="button">Pause</button>
  <button class="button_play" type="button">Play</button>
  <button class="button_stop" type="button">Stop</button>

  <span class="duration"></span>

  <div class="volume_bar"></div>
</div>

Plug-in Settings

The following options can be passed to the plug-in main function as JSON

Option	Description	Default Value
volumeStart	initial volume when audio file is played (scale 0/100)	70
tracks	MP3 audio source to play	file0=<filename>

Element Tree View

Use the following as a guide when setting up player elements.

                                           [DIV.#player]
                                                 |
          ______________________________________________________________________________
         |                   |                   |                   |                  |
[DIV.progress_bar] [BUTTON.sound_pause] [BUTTON.sound_play] [BUTTON.sound_stop] [DIV.volume_bar]

Releases

I have included with this package a packed version (3.2 kB) and developers version (unpacked 7 kB)

You can always find the latest updates within this projects repository.

Code Repository

This projects repository is currently hosted on Github

https://github.com/nuxy/MP3-Flashback

Maintainer

For feedback, bug reports, or other comments, feel free to contact me at: devel at mbrooks dot info

License and Warranty

This package is distributed in the hope that it will be useful, but without any warranty; without even the implied warranty of merchantability or fitness for a particular purpose.

MP3 Flashback is provided under the terms of the MIT license.