jquery multiply audio按钮停止兄弟姐妹播放++直接播放另一个音频

Question

我有多个音频按钮。当我点击其中一个时，我想暂停所有其他内容。这很好，但另外我想暂停当前的一个，直接启动另一个。

var playing = false;
jQuery('.player').click(function() {
jQuery('.player').removeClass('playing');
jQuery(this).addClass('playing');
jQuery('.playing').each(function(){
var audio = jQuery(this).find('audio')[0]; 
if (playing !== true) {
audio.play();
} else {
audio.pause();
audio.currentTime = 0;
}
playing = !playing
jQuery(this).siblings().find('audio').each(function(index, elem){
elem.pause();
elem.currentTime = 0;
});

});   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="player" >
<h2>Fractions du Silence</h2>
<audio class="sound">
<source>
<a href="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Fractions-du-silence-Bertrand-Dubedout.mp3">Fractions du silence</a>
</source>
</audio> 
</div>
<div class="player">
<h2>Merlin, 1. Movement</h2>
<audio class="sound">
<source><a href="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Merlin-1.-Movement-Andrew-Thomas.mp3">Merlin, 1. Movement (Andrew Thomas)</a>
</source>                 
</audio>
</div>

Answer 1

$(document).on('click', '.player', function() {
let players = $(document).find('.player');
$.each(players, function(i, val) {
if ($(this).data('id') !== $(val).data('id')) {
if ($(val).data('playing')) {
$(val).data('playing', false);
let audio = $(val).find('audio').get(0);
audio.pause;
audio.currentTime = 0;
}
} else {
if ($(val).data('playing')) {
$(val).data('playing', false);
let audio = $(val).find('audio').get(0);
audio.pause;
audio.currentTime = 0;
} else {
$(val).data('playing', true);
let audio = $(val).find('audio').get(0);
audio.play;
}
}
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="player" data-playing="false" data-id="1">
<h2>Fractions du Silence</h2>
<audio class="sound" preload="auto">
<source src="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Fractions-du-silence-Bertrand-Dubedout.mp3">Fractions du silence</source></audio>
</div>
<div class="player" data-playing="false" data-id="2">
<h2>Merlin, 1. Movement</h2>
<audio class="sound" preload="auto">
<source src="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Merlin-1.-Movement-Andrew-Thomas.mp3">Merlin, 1. Movement (Andrew Thomas)</source></audio>
</div>

事实上，我自己也做过，但用的是视频而不是音频。原理是一样的。

<div class="player" ><h2>Fractions du Silence</h2>
<audio class="sound">
<source><a href="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Fractions-du-silence-Bertrand-Dubedout.mp3">Fractions du silence</a></source>
</audio> 
</div>
<div class="player">
<h2>Merlin, 1. Movement</h2>
<audio class="sound">
<source><a href="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Merlin-1.-Movement-Andrew-Thomas.mp3">Merlin, 1. Movement (Andrew Thomas)</a></source>                  </audio>
</div>

上面是你的代码，下面我将写下我是如何做到的。

<div class="player" data-playing="false" data-id="1">
<h2>Fractions du Silence</h2>
<audio class="sound">
<source src="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Fractions-du-silence-Bertrand-Dubedout.mp3">Fractions du silence</source>
</audio> 
</div>
<div class="player" data-playing="false" data-id="2">
<h2>Merlin, 1. Movement</h2>
<audio class="sound">
<source src="http://localhost:8888/sabrinama.com/wp-content/uploads/2020/08/Merlin-1.-Movement-Andrew-Thomas.mp3">Merlin, 1. Movement (Andrew Thomas)</source>                  </audio>
</div>

我已经将数据属性应用到html中，所以这些将是独立的实体，而不依赖于js中的全局变量，在js中你可以看到我为什么这么做。

var playing = false;
jQuery('.player').click(function() {
jQuery('.player').removeClass('playing');
jQuery(this).addClass('playing');
jQuery('.playing').each(function(){
var audio = jQuery(this).find('audio')[0]; 
if (playing !== true) {
audio.play();
} else {
audio.pause();
audio.currentTime = 0;
}
playing = !playing
jQuery(this).siblings().find('audio').each(function(index, elem){
elem.pause();
elem.currentTime = 0;
});

});   
});

我已经写下了，有了数据属性，你就不需要全局变量了。

$(document).on('click', '.player', function(){
let players = $(document).find('.player');
$.each(players, function(i, val){
if($(this).data('id')!== $(val).data('id')){
$(val).data('playing', false);
let audio = $(val).find('audio').get(0);
audio.pause;
audio.currentTime=0;
} else {
$(val).data('playing', true);
let audio = $(val).find('audio').get(0);
audio.play;
}
})
})

就像我对你的html代码所做的那样。我对js做了一些更改。首先，我完全放弃了您进行的jQuery调用，这些调用都替换为相同的$。

在此之后，我将事件文档制作为on((，而不是.player click((。这将使将来当您希望动态添加更多内容时成为可能。

在那之后，我把所有的玩家都收集在一个let中，通过每个循环，你可以对他们每个人做一些事情。在这种情况下，我会检查数据id是否等于点击的玩家的数据id。如果为false，则暂停并将时间设置为0；如果为true，则播放音频。

如果你想，你可以在If中添加，这将通过放置来检查玩家是否在玩，你可以放置以下If和ifelse

if($(val).data('playing'))
{
$(val).data('playing', false);
let audio = $(val).find('audio').get(0);
audio.pause;
audio.currentTime=0;
} else {
$(val).data('playing', true);
let audio = $(val).find('audio').get(0);
audio.play;
}

当你点击已经在播放的播放器时，这个if else可以使用，因为在暂停后点击另一个播放器，你只需要if部分。

编辑：我在html中看到你使用了一个标签，这在处理音频和视频时是不需要的，它的<source src="location of file">

第2版：我试着用代码片段让它工作，或者至少没有错误。由于localhost的原因，声音无法播放。