Mini Progressive Mp3 Player w/ scrub bar (Advanced)

AS USED ON FLASHDEN FOR AUDIO ASSETS . See http://activeden.net/category/audio

This second audio widget is a follow-up on my Mini Progressive Download Mp3 Player. Similar to that version, THIS one – as well as being designed to allow users to listen to a progressively downloading MP3 file with play/pause/scrub bar functionality – uses Flash’s localConnection object and some javascript to ensure only ONE mp3 player on a page can be played at once.

It’s ideal for listing multiple MP3s on a page (eg. Podcasts) and allowing the user to play/pause those which are of interest whilst ensuring only one audio file can play at a time. It’s also MUCH easier to skin/recolor than the stabdard Macromedia MediaPlayback/MediaController/MediaDisplayer Component.

Using localConnection object, it will allow you to embed multiple progessively downloading MP3 players on the same HTML page that communicate with each other to ensure only one audio file can play at a time (## see update below ##)

Only ONE player swf file ever need be compiled – ie. no need to export multiple swfs with variations for each MP3 sample you’d like to play

MUCH more versatile and easier to skin than the standard Macromedia component players

It’s Flash v6+ compatible (unlike most components)

Includes demo HTML /javascript/mp3 samples to illustrate how easily a page can be setup to function correctly

The example utilises SWFObject (http://blog.deconcept.com/swfobject/) to more easily embed the swfs (also uses a custom wrapper function) and to stop IE’s annoying “Click to activate” prompt caused by the Eolas patent dispute

UPDATE

This version by default, as noted in the download, will not function correctly if the same html page is opened in the browser multiple times – it will “break” the ability ensure only one audio file (per html page) isplaying at once.

By adding just a couple of lines of javascript and a couple of changes in the FLA you can avoid this issue!

HTML

After

var numAudioPlayers = 4;

add this line :

var randWindowID = new Date().getTime();

After

so.addVariable("numAudioPlayers", numAudioPlayers);

add this line :

so.addVariable("randWindowID", randWindowID);

FLASH

In the “actions” frame, after :

if(_root.podcastFile == undefined){
   _root.podcastFile = "test.mp3";
}

add this :

//_root.randWindowID is the num of ms since 1970 passed
//in via JS to ensure multiple windows wont be a problem.
if(_root.randWindowID == undefined){
   _root.randWindowID = "";
}

Then on the last line of the actions frame update the connect statement to read :

audio_lc.connect(_root.randWindowID + "_lc_name" + _root.id);

And lastly in the playSound function in the “functions” frame, change the audio_lc.send method to read :

audio_lc.send(_root.randWindowID + "_lc_name" + i, "methodToExecute");

FORCE DOWNLOAD OF FILE

To force a download of the MP3 rather than it opening in the OS related media player, some server script is usually required. I didn’t include anything in the Flashden download for this as it’s server dependent (and I added this to Flashden before they were keen to accept PHP /ASP scripts).

There are many helpful pages on the web to show how this is done – a PHP example is here :

http://www.ryboe.com/tutorials/php-headers-force-download

AUTOPLAY As for the autoplay, it would be as easy as adding :

play_pause_mc.onRelease();

at the end of the code to automatically fake a button press