Question about the audio property on HTML5

[webbienrs]

1) Script Title: HTML5 Mouseover/ Click sound effect

2) Script URL (on DD): http://www.javascriptkit.com/script/script2/soundlink.shtml#current

3) Describe problem:
This is my first post, so thanks in advance for your patience with me.

I have been looking all over for a script that will do what I want it to do and this script comes the closest. I want to click on an icon (a play button png file) and have it start playing. When it starts playing, I want to have a pause icon appear. When I click it again, I want the audio file to pause and swap the image back to the original play button.

I have been able to get the graphics to swap, but when I click the button again, it just starts replaying the audio loop instead of pausing the play - so I know I'm missing something but not sure how to write the code for it.

This is the code so far:

In the header I have this:


<! -- begin code -->
--------------------------------------------------------------------------------------
var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"ogg": "audio/ogg",
"wav": "audio/wav"
}

function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}


else{
return {playclip:function(){throw new Error("Sorry, your browser doesn't support HTML5 audio.")}}
}
}

//Initialize two sound clips with 1 fallback file each:

var clicksound=createsoundbite("./media/Cloudburst.mp3", "./media/Cloudburst.ogg")

</script>

---------------------------------------------------------------------------------
<! and then in the HTML I have this:-->
---------------------------------------------------------------------------------

<div>

<a href="#current" onclick="clicksound.playclip()">
<img id="myImage" onclick="changeImage()" src="./images/Play-icon.png" width="30">
</a>

<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("Play")) {
image.src = "./images/Pause-icon.png";
} else {
image.src = "./images/Play-icon.png";
}
}
</script>
</div>
====================================================================

I'm just starting to do the Javascript tutorials. Thanks in advance for your help!

[Beverleyh]

For something a teensy bit more lightweight (if you're happy to support just MP3) have a look here http://fofwebdesign.co.uk/template/_testing/audio/control-icons.htm

Looking at the above script, looks like this resets the audio html5audio.currentTime=0 so try commenting it out. Untested - on mobile

[webbienrs]

Thank you so much, Beverleyh, for replying so quickly!

I commented out the currentTime line. Clicking the play icon will start the audio, but clicking again on it will do nothing but swap the icon. The clip continues to play and I want it to pause. Any ideas? Unfortunately, I have to support oggs, too, so I need to make this script work.

[webbienrs]

Actually, I went back again to the script you recommended and I was able to tweak it to exactly what I needed. Thank you!!