25

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

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

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

4

7 回答 7

96

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

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);
于 2013-11-05T15:09:52.813 回答
11

您可以存储对当前播放元素的引用，而不是循环遍历页面上的所有音频标签并暂停它们，并且在播放另一个时只暂停一个。

document.addEventListener("play", function(evt) {
    if(this.$AudioPlaying && this.$AudioPlaying !== evt.target) {
        this.$AudioPlaying.pause();
    }
    this.$AudioPlaying = evt.target;
}, true);
于 2015-03-14T04:30:19.407 回答
5

混合了以前不起作用的两个答案，我已经使用了。我刚刚添加&& window.$_currentlyPlaying != evt.target，一切正常。我还用这个和其他音频标签的好东西创建了一个要点。javascript-音频标签

window.addEventListener("play", function(evt)
{
    if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
    {
        window.$_currentlyPlaying.pause();
    } 
    window.$_currentlyPlaying = evt.target;
}, true);
于 2016-06-11T14:21:29.180 回答
3 
$("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();
    });
});
于 2016-11-28T21:06:23.147 回答
1

我不知道是不是因为 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元素中的想法，而不是在使用它之前在侦听器之外创建它。

于 2017-09-04T00:56:55.177 回答
0

我在底部制作了一个播放器，每次用户点击播放时都更改了 src 这只是一种方法

HTML

<audio src="tracks/track1.mp3" type="audio/mp3" class='audios'></audio>
  <i class='fas fa-play'></i>
  <i class='far fa-pause-circle'></i>
  <i class='fas fa-stop'></i>
<audio src="tracks/track2.mp3" type="audio/mp3" class='audios'></audio>
  <i class='fas fa-play'></i>
  <i class='far fa-pause-circle'></i>
  <i class='fas fa-stop'></i>
<audio src="tracks/track3.mp3" type="audio/mp3" class='audios'></audio>
  <i class='fas fa-play'></i>
  <i class='far fa-pause-circle'></i>
  <i class='fas fa-stop'></i>

  <audio class='main-audio' controls>
     <source src="#" type="audio/mp3">
  </audio>

JavaScript

const audios_with_src = document.querySelectorAll('.audios')
const play = document.querySelectorAll('.fa-play')
const pause = document.querySelectorAll('.fa-pause-circle')
const stop = document.querySelectorAll('.fa-stop')
const main_player = document.querySelector('.main-audio')

for(let i =0; i < audios_with_src.length; i++) {
 play[i].addEventListener('click', (e) => {
    main_player.src = audios_with_src[i].src;
    main_player.play()   
    })

pause[i].addEventListener('click', () => {
    main_player.pause()
})

stop[i].addEventListener('click', () => {
    main_player.pause()
    main_player.currentTime = 0;  // there is no stop() function so had to do this
})


}
于 2021-10-24T16:31:03.103 回答
0

如果您不想循环访问，您甚至可以尝试此解决方案

var previuosAudio;
document.addEventListener('play', function(e){
    if(previousAudio && previousAudio != e.target){
        previousAudio.pause();
    }
    previousAudio = e.target;
}, true);
于 2016-06-09T06:48:37.037 回答