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

Posted 2023-02-25

【中文标题】等到声音结束才能使用网页

【英文标题】：Wait until sound finishes to use a web page

【发布时间】：2013-09-26 03:33:42

【问题描述】：

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

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

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

【问题讨论】：

您所说的“无法使用”是什么意思，您为什么要这样？

我的意思是用户在播放声音时不能触摸屏幕上的任何东西（按钮等）。我需要这个，因为声音是用户使用网站之前需要听取的一些说明。

@Vito 我给出了一个非常简短/简单的解决方案。看看吧。

【参考方案1】：

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

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

马克

【讨论】：

这个看起来很酷，但是播放声音后HTML卡住了，你什么也做不了。您需要纠正什么才能使其正常工作吗？

我在FF上测试过，你用什么浏览器测试过？

刚刚在 Firefox 上测试过，效果很好（非常感谢），但在 Chrome 和 IE10 上却不行。有什么可能是错误的线索吗？

我刚刚更新了我的答案，所以现在一切都应该适用于 chrome、FireFox、IE（请参阅我的答案注释）和所有 HTML5 兼容浏览器。

非常感谢您的帮助，现在可以使用了。这正是我所需要的。

【参考方案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...

【参考方案3】：

你这样做的方式是让它等待。 不要忘记等待函数末尾的;。

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

【参考方案4】：

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

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

【参考方案5】：

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

使用以下代码语法-

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

audio_tag_id 是 <audio> 元素的 id。

【讨论】：

感谢您的回答。不幸的是，我测试了但它没有工作。