Using HTML5 and Javascript to play Audio Files with single Play and Pause Button Graphic

DEPRECIATED: SEE BOTTOM FOR MORE INFO - THIS DOESN'T WORK IN IE OR FF
Pardon the long title, want to help folks find this info as I had trouble myself.

I needed to provide a way for users to click a play button, hear an mp3/ogg preview and be able to pause.

There's a some requirements:

1.   Audio file must play on any browser. Safari and Firefox cannot play MP3 therefore upload MP3 and OGG formats to cover all browsers. 
2. When the play button is clicked, it must turn into a pause button, and vice versa.
3. Play/Pause button must turn into Play button when file is done (I cheated on this.)
4.  I do not want to use the built-in HTML5 audio controls as they are different in each browser and would require additional CSS to conform.  I just need a play/pause.

So the process looks like this:  Play button is clicked, sound plays and play button is replaced by pause button, after 30 seconds, pause button becomes play button again.

After much searching, I cobbled together several different Javascript resources to come up with the following (Make sure to use Decoder before attempting to paste this into HTML):

< script type="text/javascript" >
// declare variables soundId and getImg in the function window, so when the onClick is used it will pass those variables. It's actually using the name tag.
// the settimeout passes the getImg variable to the function swapImg so to change the image back to a play button after 30 sec. We are not determining if playback actually has stopped.

function playPause(soundId,getImg) {
setTimeout(swapImg,30000,getImg);
soundId.volume=.5;
// the volume of the clips I was playing was too loud so I lowered it
if (soundId.paused){
soundId.play();
getImg.src='/images/pauseButton.gif';


}
else {
soundId.pause();
getImg.src='/images/playButton.gif';
}
 }

// swapImg gets the variable getImg from the callout above and changes the pause back to play after 30seconds

function swapImg(getImg){
getImg.src='/images/playButton.gif';
}


And the HTML notice I'm using two files in my

// rollinghills and church are the sounds I'm playing

<audio id="rollinghills">
<source src="/sounds/samples/thelordoftherollinhills.ogg" type="audio/ogg"></source>
<source src="/sounds/samples/thelordoftherollinhills.mp3" type="audio/mp3"></source>
Your browser does not support this content.</audio>
<a href="#" onclick="playPause(rollinghills,playImg1);"><img alt="" class="playImg" src="/images/playButton.gif" style="cursor: pointer;" name="playImg1" /></a><br />
Church
<audio id="church">
<source src="/sounds/samples/churchinthefield.ogg" type="audio/ogg"></source>
<source src="/sounds/samples/churchinthefield.mp3" type="audio/mp3"></source>
Your browser does not support this content.</audio>
<a href="#" onclick="playPause(church,playImg2);"><img alt="" class="playImg" src="/images/playButton.gif" style="cursor: pointer;" name="playImg2" /></a><br />

The final product looks like this:

I might go back and add some play/stop functionality when another button is pressed.

---
Ok so that worked fine in Chrome but not in IE or FF. So here's the code for those browsers:



function playPause(soundId,getImg) {
var thissound=document.getElementById(soundId);
var thisimg=document.getElementById(getImg);
setTimeout(swapImg,30000,thisimg);
thissound.volume=.5;
if (thissound.paused){
thissound.play();
thisimg.src='/images/pauseButton.gif';
}
else {
thissound.pause();
thisimg.src='/images/playButton.gif';
}

}

function swapImg(thisimg){
thisimg.src='/images/playButton.gif';
}

Notice the labels have changed, you now have to identify your sound by ID:

<a onclick="playPause('prairiememories','playImg3');"><img alt="" class="playImg" src="/images/playButton.gif" style="cursor: pointer;" id="playImg3" />

See working example here.