Embed Flash MP3 Players w/ Javascript

What it Does:

The code provided here finds any <a> tags on the page that have been assigned the attribute, name="mp3". Then, using the URL from the <a> tag, it generates and places the proper code, embedding a flash mp3 player just above that <a> tag's link. Unaltered, this script uses the "Maxi" mp3 player hosted and available for download at http://flash-mp3-player.net/. (Though you need not download anything to run this script.)

Why?

First: Convenience. With this implementation I need only create a standard link and give it a name. From there, my mp3 player will appear on it's own, without all the ubiquitous <object><param><embed> malarky typically required to embed a flash file.

Secondly, to enable a reasonable level of dynamism to my Blogspot hosted site. If and when someone designs a slicker or more efficient mp3 player or... let's say the mp3 player I've been linking to disappears from its server someday - I'd like to be able to fix the broken links and integrate a new player into my site without having to edit every single post in which I'd ever embedded an audio file. This javascript standardizes the website's mp3 player, so that changing the embed code in the script effectively changes the embed code everywhere on the site.

How?

<script type="text/javascript">
/*
-----------------------------------------------
Dynamic Flash Embedder (for Linking MP3s)

Written by: Roy Tousignant
Date: 15 May 2009
URL: tvopiate.blogspot.com
----------------------------------------------- */

var playerloc = 'http://flash-mp3-player.net/medias/player_mp3_maxi.swf'

function buildObj(mp3) {
    var flashtags = '<object data="'+playerloc+'" width="200" height="20" type="application/x-shockwave-flash">'
    flashtags += '<param value="'+playerloc+'" name="movie">';
    flashtags += '<param value="mp3='+mp3.href+'&amp;showstop=1&amp;showvolume=1" name="FlashVars">';
    flashtags += '</object><br/>';

    var obj = document.createElement('span');
    obj.innerHTML = flashtags;
    return obj;
}

function addPlayers() {
    var mp3objs = document.getElementsByName('mp3');
    var i = 0;
    while (i < mp3objs.length) {
        if(mp3objs[i].tagName == "A") {
            mp3objs[i].parentNode.insertBefore(buildObj(mp3objs[i]), mp3objs[i]);
        }
    i++;
    }
}

window.onload=addPlayers;
</script>

Usage

If you're using Blogger add a HTML/JavaScript gadget to your layout and paste in the code provided above. It doesn't matter where in your Blogspot layout you place the gadget. It will work just the same.

With the code in place you simply create links to the mp3 files you want to embed, making sure to include name="mp3" in the <a> tag. You can do this anywhere on your page: in posts; in the sidebars; in the header...

<a href="http://www.mymp3host.com/song.mp3" name="mp3">Download my Song</a>

That's it. Any links you make that carry the name "mp3" will magically receive an embedded mp3 player one line break above the link, allowing visitors to stream the file right there.

More Usage

Changing the flash player will probably require some basic understanding of simple coding. It's pretty straightforward to those who know, but for those who don't I'll provide an example. (Be it any help to you or not.)

To change the mp3 player that is being embedded you just need to edit the 'playerloc' and 'flashtags' variables near the top of the script to reflect the object/embed code for the new player.

For example, Google has a flash MP3 player that can be linked to. To embed Google's player manually onto a page you would use this object/embed code:

<object data="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=http://www.mymp3host.com/song.mp3" width="400" height="27" type="application/x-shockwave-flash">
<param value="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=http://www.mymp3host.com/song.mp3" name="movie">
<param name="flashVars" value="playerMode=embedded">
</object>

Therefore, to integrate Google's embed code into our script you would replace the playerloc and flashtags variables in our javascript code with:

var playerloc='http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=';

var flashtags = '<object data="' + playerloc + mp3.href + '" width="400" height="27" type="application/x-shockwave-flash">';
flashtags += '<param value="' + playerloc + mp3.href + '" name="movie">';
flashtags += '<param name="flashVars" value="playerMode=embedded">';
flashtags += '</object><br/>';

Note here that Google's player looks for the mp3 location to be included in-line with the link to the audio player itself, whereas the Maxi MP3 Player being used by default expects the mp3's url to be declared in the flashVar param.

And that's all the hints you get. ...ya' bunch of noobs.

Design Notes

"Why did you use a while loop instead of a for loop," you ask? To avoid a bug in blogger's code. In development whenever I saved the script to Blogger's HTML/Javascript gadget, use of the for loop caused everything thereafter to be scrambled.

End of Line

I suppose that's it. Wow, it might've taken as long documenting it as it did writing the damned thing. And I was trying to keep it brief! Actually it took me about 10 hours, start to finish, developing this script; forced to learn all sorts of javascript functions I'd never worked with before; fighting the Blogspot bugs to make it work in the gadget... Well.

Do leave me a comment if you're using it. I'd love to see my handiwork gracing other sites. And if you have any problems with it... 'the hell do I care?