html5 播放音频循环 4x 然后停止

Question

嗨，我需要循环音频文件一定次数，即 4 次，我的声音文件循环正确，代码如下。 ? 4x后如何停止循环，非常感谢P

$('#play_audio').click(function () {
            var audio = document.createElement("audio");
            audio.src = "files/windows%20default.mp3";

            audio.addEventListener('ended', function () {
                // Wait 500 milliseconds before next loop

                setTimeout(function () { audio.play(); }, 500);
            }, false);           

            audio.play(); 
    });

Answer 1

我设法做到了：

 $('#play_audio').click(function () {                     
            var times = 4;
            var loop = setInterval(repeat, 500);

        function repeat() {
            times--;
            if (times === 0) {
                clearInterval(loop);
            }

            var audio = document.createElement("audio");
            audio.src = "files/windows%20default.mp3";

            audio.play();
        }

        repeat();           
    });      
}); 

Answer 2

也许更好的方法是保持 HTML 不变。只需使用特定的 id 定位它。

<audio id="loop-limited" controls>
    <source src="music.ogg" type="audio/ogg">
    <source src="music.mp3" type="audio/mpeg">
</audio> 

这是 JavaScript：

// Audio Loop Limit
var loopLimit = 4;
var loopCounter = 0;
document.getElementById('loop-limited').addEventListener('ended', function(){
    if (loopCounter < loopLimit){
        this.currentTime = 0;
        this.play();
        loopCounter++;
    }
}, false);   

Answer 3

在一个简单的if 语句中加入一个计数器，如下所示：

更新：

$('#play_audio').click(function () {
            var audio = document.createElement("audio");
            audio.src = "files/windows%20default.mp3";

            audio.addEventListener('ended', function () {

                var repeat = 0;

                // Wait 500 milliseconds before next loop  
                setTimeout(function () {
                      if repeat < 3 {
                           var repeat = repeat + 1;
                           audio.play();
                      }
                      else {
                           return done;                
                      }
                }, 500);

            }, false);

      audio.play();
});

第二次更新：

$('#play_audio').click(function () {
        var audio = document.createElement("audio");
        audio.src = "files/windows%20default.mp3";        

        delay(500).audio.play();
        delay(1000).audio.play();
        delay(1500).audio.play();
        delay(2000).audio.play();
});

从编程的角度来看，它是不可扩展的，但如果您只是想一次解决这个问题，这是一种可行的解决方法。

我确定如果我有更多时间，我们可以聊天，也许我可以让循环代码工作，但试试这个，让我知道它是否有效。

Answer 4

我最近遇到了类似的情况，我用这样的代码解决了：

var ringsToPlay = 4;
var sound = new Audio('http://www.oneoakway.com/_inactive/oldfiles/chimebang.mp3');
var currentRing = 0;

function doIt() {
    sound.volume = .4;
    sound.play();
    currentRing = 1;
    sound.addEventListener('ended', ringMore, false);
}

function ringMore() {
    if(currentRing == ringsToPlay) {
        sound.removeEventListener('ended', ringMore, false);
    } else {
        sound.play();
        currentRing++;
    }
}

请注意，我只为最新的浏览器编写代码。我不知道这是否适用于较旧的浏览器，可能不会。我只在 FF、Chrome 和 IE、最新版本、Windows 7 中测试我的代码。

小提琴：http://jsfiddle.net/fidnut/2oL5fsxz/1/

Answer 5

当他们加载你的页面时吓唬他们...... 但是，谢谢我正在寻找一种方法来做到这一点，

$(document).ready(function () {
    var times = Math.floor((Math.random() * 5) + 1);
    var loop = setInterval(repeat, 500);

    function repeat() {
        times--;
        if (times === 0) {
            clearInterval(loop);
        }

        var audio = document.createElement("audio");
        audio.src = "http://static1.grsites.com/archive/sounds/birds/birds001.wav";

        audio.play();
    }

    repeat();
});

https://jsfiddle.net/qmcw0cqq/