4

我无法让 HTML5 音频在我的网站上循环播放：http: //oclock.webs.com。（这是一个警报，当警报响起时，应该循环播放 1 秒的警报声，直到您单击警报框上的 OK）。

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

我在 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;
}

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

问题：目前它只播放一次音频，不会循环播放。我哪里搞砸了？

4

1 回答 1

0

“结束事件”或“循环”属性在某些浏览器上不起作用。所以我使用 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"));***
于 2012-08-31T06:23:21.467 回答