HTML5 - 当另一个音频标签开始播放时如何停止音频？

Posted 2023-02-25

【中文标题】HTML5 - 当另一个音频标签开始播放时如何停止音频？

【英文标题】：HTML5 - how to stop audio when another audio tag starts playing?

【发布时间】：2015-08-13 09:01:29

【问题描述】：

我有这个 javascript 函数：

var currentPlayer;
function EvalSound(soundobj) 
    var thissound = document.getElementById(soundobj);
    if (currentPlayer && currentPlayer != thissound) 
        currentPlayer.pause(); 
    
    if (thissound.paused) 
        thissound.play();
     else 
        thissound.pause();
    
    thissound.currentTime = 0;
    currentPlayer = thissound;

这个 html5 音频播放器在 Yii2 的 Gridview 小部件内循环重复（它创建了许多播放器，每个播放器都播放不同的歌曲）：

'value'=> function ($data)                      
    return "<audio controls>
            <source src='" . $data->ficheiro . "' type='audio/mp3' />
            </audio>";
,

问题是当我播放一个音频标签并单击另一个的播放按钮时，它不会停止之前播放的音频标签并启动新的。两个音频标签同时播放。我正在尝试调整 javascript 函数，但它不起作用。

我也尝试过声明var thisound = $('audio');

它也不起作用。

我需要在音频标签中添加一个 ID 吗？ 我需要将onClick='EvalSound' 事件与音频标签相关联吗？

【参考方案1】：

好的，我就是这样解决的：

addEventListener 抓取开始播放的音频，for 循环暂停所有其他音频标签。

document.addEventListener('play', function(e) 
    var audios = document.getElementsByTagName('audio');

    for (var i = 0, len = audios.length; i < len; i++) 
        if (audios[i] != e.target) 
            audios[i].pause();
        
    
, true);

【参考方案2】：

您没有唯一的方法来识别<audio> 标签。使用通用的$("audio")seelctor 会使问题变得更糟。对所有标签使用id 并使其以这种方式工作。

【讨论】：

非常感谢。知道我已经离开了代码，但我稍后会尝试。

好的。我在 标签中插入了一个 onClick='EvalSound' 事件和一个 ID='soundobj'。它没有工作:(

您是否为所有音轨插入了相同的 ID？

是的。因为它位于循环音频标签并插入存储在数据库中的音乐的网格视图内。

嘿，ID 必须是唯一的。基本拇指规则。生成网格的是什么？