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:
Check out the demo provided with this package.
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. |
When working with multiple players it is important to attach each jQuery selector to a unique element.
$(selector).MP3Flashback(settings);
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>
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> |
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]
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.
This projects repository is currently hosted on Github
https://github.com/nuxy/MP3-Flashback
For feedback, bug reports, or other comments, feel free to contact me at: devel at mbrooks dot info
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.
MP3 Flashback ©2012-2015 Marc S. Brooks