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.

What do you mean by "unusable", and why do you want this to be the case? — Qantas 94 Heavy, Sep 26 '13 at 03:53
I mean that the user cannot touch anything in the screen while the sound is playing (buttons, etc). I need this because the sound are some instructions that need to be listened before the user can use the site. — Vito, Sep 26 '13 at 03:59
@Vito I have given a very **short/simple** solution. Check it out. — Rajesh Paul, Sep 26 '13 at 14:33

score 5 · Accepted Answer · edited May 23 '17 at 12:05

5

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

edited May 23 '17 at 12:05

Community

1
1

answered Sep 26 '13 at 03:56

Marcky

129
1
9

This one seem to be cool, but the HTML freezes after the sound is played and you cant do anything. Is there something you need to correct to get this working? – Vito Sep 26 '13 at 04:01
I tested this on FF, which browser did you use to test this it? – Marcky Sep 26 '13 at 04:09
Just tested it on Firefox, it worked perfectly (thank you very much), but its not working on Chrome and IE10. Any clue about what can be wrong? – Vito Sep 26 '13 at 04:16
I just updated my answer so now everything should work on chrome, FireFox , IE(see my note on the answer) and all HTML5 compatible browsers. – Marcky Sep 26 '13 at 04:43
Thanks a lot for your help, its working now. This is exactly what I needed. – Vito Sep 26 '13 at 05:01
Just to note that the ` – Qantas 94 Heavy Sep 26 '13 at 05:15

score 3 · Answer 2 · answered Jun 14 '21 at 15:12

Here is a way to do it with promises. Makes playing multiple audio files very easy.

// makes playing audio return a promise
function playAudio(audio){
  return new Promise(res=>{
    audio.play()
    audio.onended = res
  })
}

// how to call
async function test(){
  const audio = new Audio('<url>')
  await playAudio(audio)
  // code that will run after audio finishes...
}

score 0 · Answer 3 · answered Sep 26 '13 at 03:55

I thought about the following approach: Init a timer & wait until sound has played to end.

Show dialog/dimmed overlay layer
setInterval()
    -> Compare snd->currentTime with snd.duration. If they are the same
        -> Clear interval
        -> Hide dialog/Show OK button

Or

Show dialog/dimmed overlay layer
setInterval()
    -> Is snd.ended ?
        -> Clear interval
        -> Hide dialog/Show OK button

score 0 · Answer 4 · answered Sep 26 '13 at 14:32

0

There is a very simple/short solution

Use the following code syntax-

Audio_object=document.getElementById('audio_tag_id');
if(Audio_object.currentTime==Audio_object.duration)
alert('completely played.');

audio_tag_id is the id of the <audio>-element.

answered Sep 26 '13 at 14:32

Rajesh Paul

6,793
6
40
57

Thanks for answering. Unfortunately, I tested but it didnt work. – Vito Sep 26 '13 at 20:49

score -1 · Answer 5 · edited Feb 27 '20 at 16:45

-1

You do this in a fashion so that it waits. Don't forget the ; at the end of the wait function.

function snd() {
    var snd = new audio('yourFile.mp3');
    snd.play();
    wait(4000); //waits 4 seconds.
}

edited Feb 27 '20 at 16:45

JoSSte

2,953
6
34
54

answered Feb 27 '20 at 15:35

Some Guy

17
5

1

"wait" doesn't exist and there is no simple way to implement one. Plus, what are you talking about with ";" ?! There is NO NEED for it in JS, at least in the year you wrote this (2020). – ZioBit Apr 10 '22 at 07:52

Wait until sound finishes to use a web page

5 Answers5