3

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

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

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

4

5 回答 5

3

注意：这不是跨浏览器（仅限 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 似乎不接受位于远程主机上的音频源，但如果文件在您的服务器上是本地的，它将起作用。

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

马克

于 2013-09-26T03:56:24.240 回答
1

您以一种方式执行此操作，以便它等待。不要忘记;等待功能的末尾。

function snd() {
    var snd = new audio('yourFile.mp3');
    snd.play();
    wait(4000); //waits 4 seconds.
}
于 2020-02-27T15:35:56.253 回答
1

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

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

于 2021-06-14T15:12:59.040 回答
0

我想到了以下方法：初始化一个计时器并等到声音播放结束。

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
于 2013-09-26T03:55:33.787 回答
0

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

使用以下代码语法 -

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

audio_tag_id是 - 元素的 id <audio>。

于 2013-09-26T14:32:29.960 回答