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

Posted 2023-02-25

【中文标题】如何使用jQuery无限循环播放音频文件

【英文标题】：How to play an audio file in a infinite loop using 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）... ;)

【参考方案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() 可能无法在没有手动点击的移动浏览器上运行