如何使用jQuery无限循环播放音频文件答案

【问题标题】：How to play an audio file in a infinite loop using jQuery如何使用jQuery无限循环播放音频文件
【发布时间】：2015-11-20 18:38:14
【问题描述】：

现在我有一段代码（如下），它允许我在单击按钮时播放音频文件。但是，我希望文件在无限循环中播放，直到单击“停止”按钮。我怎样才能做到这一点？

var audiotypes={
    "mp3": "audio/mpeg",
    "mp4": "audio/mp4",
    "ogg": "audio/ogg",
    "wav": "audio/wav"
}

function ss_soundbits(sound){
    var audio_element = document.createElement('audio')
    if (audio_element.canPlayType){
        for (var i=0; i<arguments.length; i++){
            var source_element = document.createElement('source')
            source_element.setAttribute('src', arguments[i])
            if (arguments[i].match(/\.(\w+)$/i))
                source_element.setAttribute('type', audiotypes[RegExp.$1])
            audio_element.appendChild(source_element)
        }
        audio_element.load()
        audio_element.playclip=function(){
            audio_element.pause()
            audio_element.currentTime=0
            audio_element.play()
        }
        return audio_element
    }
}

var audio = ss_soundbits('audio/file.mp3');

var start_audio= function() {
   audio.playclip();
};

【问题讨论】：

有一个布尔属性loop（不是loup）... ;)

标签： javascript jquery audio mp3

【解决方案1】：

捕获音频元素上的ended 事件，然后让它再次播放。

audio_element.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);

这对你来说应该足够了。

编辑

正如@A 指出的那样。沃尔夫，我做了一个疏忽，点击停止会触发结束的事件。设置一个全局布尔标志将解决这个问题。

var stopped = false;

audio_element.addEventListener('ended', function() {
    if(!stopped){
        this.currentTime = 0;
        this.play();
    }
}, false); 

var stop_button = document.getElementByID('stop');

stop.addEventListener('click', function(){
    stopped = true
    audio_element.stop();
});

【讨论】：

方法stop() 也不会触发ended 事件吗？
@A.Wolff 你是对的，我已经在我的回答中解决了这个问题。

【解决方案2】：

抱歉我的评论 - 仅补充：audio_element.play() 可能无法在没有手动点击的移动浏览器上运行

【讨论】：