Question

At the moment I am using sounds on my website using an old technique with embedded tags and javascript . I want to convert these to HTML5, but I am unsuccessful doing this.

This is the code I have at the moment:

HTML:

<div class="au">
    <embed src="audio/tileSelect.wav" autostart="false" width="1" height="1" hidden="true" id="sound1" enablejavascript="true">
    <embed src="audio/tileRemove.wav" autostart="false" width="1" height="1" hidden="true" id="sound2" enablejavascript="true">
</div>

JS:

//Sounds
function playSound(soundobj) {
    if (document.getElementById('sound').checked) { //if this checkbox is checked, play sounds
        var thissound=document.getElementById(soundobj);
        thissound.Play();
    }
}

JS used in other functions to trigger the sounds:

playSound('sound1');
playSound('sound2');

So all the above works. Now to convert this to HTML5. The HTML part is easy, I think it should look like this:

HTML5:

<!--HTML5 audio-->
<audio id="sound1" preload="auto">
    <source src="audio/tileSelect.wav" type="audio/wav" />
</audio>
<audio id="sound2" preload="auto">
    <source src="audio/tileRemove.wav" type="audio/wav" />
</audio>

But for the JS part I am kinda stuck. Anyone has an idea about this? Tried to change soundobj to soundid, but had no luck with that.

Many thanks,
Maurice

Answer 1

There are two issues with the code you have posted.

First one would be the markup that should probably read like this instead:

<audio id="sound1" src="audio/tileSelect.wav" preload="auto"></audio>
<audio id="sound2" src="audio/tileRemove.wav" preload="auto"></audio>

The <video>-like source notation that you used is not documented anywhere (although I have to admit that it does not feel wrong – but then again I have never used HTML5 audio yet), see MDN documentation

---

EDIT: Apparently it’s ok to use source elements inside audio elements:

Permitted content: Transparent content, containing either a src
attribute or one or more elements, followed by either flow
content or phrasing content , with no or elements.

See: https://developer.mozilla.org/en/HTML/Element/audio

Still you don’t really need it in your case as you just have one source file.

---

Second issue would be that you are using a non-existent method of .Play() (capital P), that should be called .play(). So your JS should look like:

function playSound(soundobj) {
    if (document.getElementById('sound').checked){
        document.getElementById(soundobj).play();
    }
}
playSound('sound2'); //should play 'audio/tileRemove.wav'