Question

我需要使用Javascript / Jquery播放声音。目前我正在使用此代码播放声音：

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

我需要的是页面无法使用，直到声音结束播放。可能在播放声音的同时进行某种对话。当声音结束时，模态显示“确定”按钮，按下按钮后，您可以继续使用该页面。

Answer 1

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

对于跨浏览器兼容性，您可能需要查看以下链接： What trick will give most reliable/compatible sound alarm in a browser window for most browsers

我非常擅长解释事情，但我为你做了一个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

您可以通过这种方式等待它。不要忘记等待功能结束时的;。

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

Answer 3

这是一种使用 Promise 实现的方法。使播放多个音频文件变得非常容易。

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

Answer 4

我想到了以下方法：初始化计时器＆amp;等到声音播放结束。

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

或者

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

Answer 5

有一个非常简单/简短的解决方案

使用以下代码语法 -

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

audio_tag_id是<audio> - 元素的ID。

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

5 个答案: