Super easy audio player with Flash + jQuery

Question

I am trying to make an super easy audio player with jQuery.

How would you convert this

   <a href="song.mp3">Song</a>

to this?

   <object type="application/x-shockwave-flash" data="dewplayer.swf" >
        <param name="flashvars" value="mp3=blank.mp3" />
   </object>

   <a href="song.mp3">Download</a>

So what needs to happen as I understand it

• The name of the link is changed to Download
• the flash object code is pasted before the link,
• the mp3 urls are stored,
• each respective mp3 url are inserted into each corrolating value="mp3=____"

This utilizes a simple flash audio player, Dewplayer.

Any thoughts?

Answer 1

Like this (untested):

// on document ready,
$(function ()
{
    var objTagOpen = '<object type="application/x-shockwave-flash"'
                     + ' data="dewplayer.swf">'
                     + '<param name="flashvars" value="mp3=',
        objTagClose = '" /> </object>';

    // find all the links whose href ends with '.mp3',
    // and for each one,
    $('a[href$=.mp3]').each(function ()
    {
        var $this = $(this);

        // insert the flash <object> with the flashvars parameter
        $this.before(objTagOpen + $this.attr('href') + objTagClose);

        // then rewrite the link itself
        $this.text('Download');
    });
});

super-easy indeed.

---

Edit: Pekka's absolutely right about using a rel to allow you to have normal mp3 links as well. In that case, all you need to do is rewrite your initial selector, from

$('a[href$=.mp3]')

to

$('a[href$=.mp3][rel=mp3]')