等到声音结束才能使用网页

Question

我需要使用 JavaScript / jQuery 播放声音。目前，我正在使用此代码来播放声音：

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

我需要的是一个在声音结束播放之前无法使用的网页。播放声音时可能会出现某种对话。当声音结束时，模态窗口显示“确定”按钮，按下该按钮后，您可以继续使用页面。

Answer 1

注意：这不是跨浏览器（仅限 HTML5 兼容浏览器）！

对于跨浏览器兼容性，您可能需要查看此链接： 对于大多数浏览器，什么技巧将在浏览器窗口中提供最可靠/兼容的声音警报

我真的不擅长解释事情，但我为你做了一个 JsFiddle。

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

或者这里是代码：

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!!");
};

我用过的东西：jquery、jquery-ui、jquery BlockUI 插件、HTML5 音频标签、google。

另外，此示例在 IE 上不起作用，因为 IE 似乎不接受远程主机上的音频源，但如果文件位于服务器本地，则该示例将起作用。

希望这能帮助您实现您的需求，

马克

Answer 2

这是一种用承诺来做到这一点的方法。使播放多个音频文件变得非常容易。

// 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...
}