【问题标题】:Trouble with HTML5 audio loopHTML5 音频循环问题
【发布时间】:2012-08-25 19:42:55
【问题描述】:

我无法让 HTML5 音频在我的网站上循环播放:http://oclock.webs.com。 (这是一个警报,当警报响起时,应该会反复循环 1 秒的警报声,直到您在警报框上单击“确定”。


只是在音频标签中包含“循环”并没有做任何事情。

我在 StackOverflow 上找到了一篇有用的帖子,将我带到了这个网站:http://forestmist.org/2010/04/html5-audio-loops/

我知道方法 1 和 2 对我不起作用,因为它们不能在 Firefox 上运行并且在 Chrome 上是不确定的,所以方法 3 应该有效,但不幸的是它没有。方法 3 在我在该网站的页面上时有效,但在我自己的页面中包含代码时无效,因此我认为可能存在一些冲突的代码。


我网页的相关部分:

<audio id="audio1" preload>
    <source src="media/alarm.ogg" type="audio/ogg" />
    <source src="media/alarm.mp3" type="audio/mpeg" />
</audio>

<audio id="audio2" preload>
    <source src="media/alarm.ogg" type="audio/ogg" />
    <source src="media/alarm.mp3" type="audio/mpeg" />
</audio>

页面相关Javascript:

if(timer==true && hours==hv && mins==mv && secs==sv){
    document.getElementById("audio1").play();
    alert("o'clock: Alarm ringing!");
    document.getElementById("alarm").value="Set Alarm";

    document.getElementById('audio1').addEventListener('ended', function(){
        this.currentTime = 0;
        this.pause();
        document.getElementById('audio2').play();
    }, false);

    document.getElementById('audio2').addEventListener('ended', function(){
        this.currentTime = 0;
        this.pause();
        document.getElementById('audio1').play();
    }, false);
}

else{
    document.getElementById("audio1").pause();
    document.getElementById("audio2").pause();
    document.getElementById("audio1").currentTime = 0;
    document.getElementById("audio2").currentTime = 0;
}

意图:当计算机的时间与页面上选择的时间匹配时,音频警报将重复(循环),直到用户在弹出的警报框上单击“确定”。

问题:目前它只播放一次音频,不会循环播放。我哪里搞砸了?

【问题讨论】:

  • 如果您能很好地对齐牙套,我们也会有所帮助。
  • 感谢@KyelJmD,添加了一些意图。

标签: javascript html audio loops


【解决方案1】:

“结束事件”或“循环”属性在某些浏览器上不起作用。 所以我使用 window.setInterval() 来循环播放音频。

对于这种方法,您应该提前知道音频文件的播放时间。

function playAudioWithLoop (/**HTMLAudioElement*/audio, /**Number*/length)
{
    function onEnd (){
        audio.play();
    }

    /* length is msec */
    if(length > 0) {
        audio.__timer = window.setInterval(onEnd, length);
    }
}

function stopAudioWithLoop (/**HTMLAudioElement*/audio)
{
    if(audio.__timer) {
        audio.__timer = window.clearInterval(audio.__timer);
    }
}

================================================ ========================

***playAudioWithLoop(document.getElementById("audio1"), 12*1000);***
***stopAudioWithLoop(document.getElementById("audio1"));***

【讨论】:

  • 我不完全确定如何实现和编辑它。我是否希望用这个替换当前代码,或者这是我目前拥有的代码之外的?我应该在你给定的代码中具体编辑什么(如果有的话)?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-01-05
  • 2011-10-11
  • 1970-01-01
  • 2022-01-08
  • 1970-01-01
  • 1970-01-01
  • 2013-03-11
相关资源
最近更新 更多