AudioJS：每页一次只播放 html5 音频

Posted 2023-02-25

【中文标题】AudioJS：每页一次只播放 html5 音频

【英文标题】：AudioJS: play only html5 audio at time per page

【发布时间】：2017-02-10 06:10:33

【问题描述】：

我目前正在使用简单的 AudioJs 脚本，它很容易集成，但如果我在同一页面中有多个音频文件，我希望用户能够点击任何播放并收听而无需停止首先是上一个文件...基本上我需要一个显示“全部停止”的切换按钮然后播放这个

关于如何实现它的任何帮助？

我试过了

    $.each($('audio'), function() 
        this.pause();
    );

但这不会反转按钮和 AudioJs 创建的每个实例的“播放”状态

【问题讨论】：

您是否尝试在document 中的所有音频节点上调用.pause()？您能否将您在 Question 中尝试过的javascript 包含在内？

我每个都尝试过 Jquery，是的，我可以阻止它们，但是它与 AudioJS 指令冲突，因为我无法为 AudioJS 创建的每个实例设置播放=false

没试过AudioJS。库是否使用AudioContext 播放媒体？

不确定...kolber.github.io/audiojs/docs

【参考方案1】：

此类功能的一般技巧是在所有播放器上绑定onplay 事件；当你播放一个时，它现在会触发你暂停所有播放器，除了 onplay 被触发的播放器，但这里的问题是 audiojs 在其包装器对象中不提供音频事件（它只提供播放、暂停等方法）。但是您可以做一些事情：每个播放器对象都会引用其对应的 html5 <audio> 元素（实际上是在播放 mp3），您可以使用它并使用 element 属性直接绑定它。

1.在所有玩家上绑定onplay

allAud = a.createAll();
for(var i=0; i<allAud.length;i++)
 
    allAud[i].element.onplay = function pauseOthers();

2.当 onplay 触发循环遍历所有播放器的 <audio> 并暂停除触发事件的那个之外的所有播放器（使用 audiojs 包装器 pause() 方法

function pauseOthers()  
    for(var j=0; j<allAud.length;j++)
    
        if(allAud[j].element != this)  //pause all except the one being played
        allAud[j].pause(); // can also use `this.pause()` , but better let audiojs do that incase it's handling some play/pause animation
    

演示：http://jsfiddle.net/rqsxxjmd/