Embedding MP3 files

It took me a while to figure out how to embed MP3 files in XHTML documents. I decided to go for the embedding of Windows Media Player, with the minimum tags needed. I also had to fix the problem of Internet Explorer forcing the user to enable the media object first before it can play: the Eolas issue.

The minimal tags

<div>
<object width="300" height="45" type="application/x-mplayer2">
<param name="filename" value="07-los_ejos.mp3" />
</object>
</div>


This embeds the MP3 with its default behaviour: it starts playing immediately and it stops after playing once. To disable auto play, you have to add this parameter:

<param name="autostart" value="0" />


To make the file play over and over again, add this two parameters:

<param name="playcount" value="true" />
<param name="loop" value="1" />


Solving the Eolas issue

Instead of generating the object with JavaScript, I decided to use another approach: replacing every object with itself in JavaScript, only in Internet Explorer. To do this, every object needs to be in a span or div on its own. Before I could replace it, I had to make sure it wasn't playing. In Internet Explorer, you can control a Windows Media Player object from JavaScript, as I discovered on MSDN. So I came up with this script, an extension for my base object:

G.eolas={
init:function(){
    var o=$$('object'),i,j,p,v=[]
    if(o.length==0)return
    if(!o[0].outerHTML)return
    for(i=0;i<o.length;i++){
        o[i].stop()
        v.push(o[i].outerHTML.split('</')[0])
        p=o[i].childNodes
        for(j=0;j<p.length;j++)v.push(p[j].outerHTML)
        v.push('</object>')
        o[i].parentNode.innerHTML=v.join('\n')
    }
}
}

The result

If you have read about me, you might have noticed that I am also a musician. So I took one of the songs I have recorded with my trio as an example: