Question

我在html5页面上有10个带有简单html音频标签的音频播放器。没有jquery，没有特殊的音频js插件等......

有没有人在js中有一个简单的脚本在当前玩家正在播放时暂停所有其他玩家？

我不想使用js插件，因为我想保留一个简单的音频html代码。

Answer 1

您可以使用事件委派。只需在捕获阶段收听播放事件，然后暂停所有视频文件，但不要暂停目标视频：

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);

Answer 2

您可以将参考存储到当前正在播放的元素，而不是循环播放页面上的所有音频标记，并且在播放时只有只有一个暂停另一个。

这更有意义，除非你打算从同时播放多个元素开始。

window.addEventListener("play", function(evt)
{
    if(window.$_currentlyPlaying)
    {
        window.$_currentlyPlaying.pause();
    } 
    window.$_currentlyPlaying = evt.target;
}, true);

Answer 3

混合以前没有用的答案，我已经用过了。我刚刚添加hidden-sm-down，一切正常。此外，我已经为这个和其他音频标签的好东西创建了一个要点。 javascript-audio-tags

<div class="row">                 
    <div class="col-md-7 left">
        <ul class="row">
            <li class="col-md-2">
                <a href="">Text</a>
            </li>
            <li class="col-md-2">
                <a href="">Text</a>
            </li>
            <li class="col-md-3">
                <a href="">Text</a>
            </li>
            <li class="col-md-3">
                <a href="">Text</a>
            </li>
            <li class="col-md-2">
                <a href="">Text</a>
            </li>
        </ul>
    </div>
    <div class="col-md-1 hidden-sm-down wave">
        <img src="img/ondina.png" />
    </div>
    <div class="col-md-3 right">
        <ul class="row">
            <li class="col-md-6">
                <a href="">Text</a>
            </li>
            <li  class="col-md-6">
                <a href="">Text</a>
            </li>
        </ul>
    </div>
    <div class="col-md-1 hidden-sm-down right-border">
        <img src="img/menu-right.png"  />
    </div>
</div>

Answer 4

$("audio").on("play", function() {
    var id = $(this).attr('id');

    $("audio").not(this).each(function(index, audio) {
        audio.pause();
    });
});

$("video").on("play", function() {
    var id = $(this).attr('id');

    $("video").not(this).each(function(index, video) {
        video.pause();
    });
});

Answer 5

我不知道是不是因为Chrome更新，但以前的答案对我不起作用。我在这里修改了一些代码并想出了这个：

document.addEventListener("play", function(evt)
{
    if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
    {
        window.$_currentlyPlaying.pause();
    } 
    window.$_currentlyPlaying = evt.target;
}, true);

我不知道原因，但widow.addEventListener对我不起作用，但我喜欢将currentPlaying变量存储在window元素中而不是在使用它之前必须在监听器之外创建它。

Answer 6

如果您不想循环使用

，您甚至可以尝试此解决方案

var previuosAudio;
document.addEventListener('play', function(e){
    if(previousAudio && previousAudio != e.target){
        previousAudio.pause();
    }
    previousAudio = e.target;
}, true);

多个音频html：当前正在播放javascript时自动停止其他

6 个答案: