Wait until sound finishes to use a web page

Question

I need to play a sound using JavaScript / jQuery. Currently, I'm using this code to play the sound:

var snd = new Audio('dir/file.wav');
snd.play();

What I need is a web page to be unusable until the sounds ends playing. Probably with some kind of dialog while the sound is playing. When the sound ends, the modal displays a "Ok" button, and after pressing the button, you can continue using the page.

Answer 1

NOTE : This is not crossbrowser (HTML5 compatible browsers only)!

For cross browser compatibility , you'll might want to look at this link : What trick will give most reliable/compatible sound alarm in a browser window for most browsers

---

I'm seriously not good at explaining things but I made a JsFiddle for you.

http://jsfiddle.net/tnnjB/8/

Or here is the code :

HTML :

<audio id="myaudio" onended="onAudioEnded();">
  <source src="http://www.dccl.org/Sounds/pchick-alarm.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>

<input 
    type="button" 
    value="You cannot click me before the sound is over" 
    onclick="javascript:alert('congrats!')"
/>

JAVASCRIPT :

$(function(){
    var audio = document.getElementById("myaudio");
    $.blockUI({message : "Listen to the music!" });  
    audio.play();
});

function onAudioEnded(){ 
    $.unblockUI();
    alert("It's over!!");
};

Things I have used : jquery, jquery-ui, jquery BlockUI plugin, HTML5 audio tag, google.

Also, this example will not work on IE as it seems like IE does not accept the audio source to be on a remote host, but it will work if the file is local on your server.

Hope this will help you achieve your need,

Marc