$(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 中收集了所有玩家，并且通过 each 循环，您可以对每个玩家进行操作。在这种情况下，我检查 data-id 是否等于被点击玩家的数据。如果为假，则暂停并将时间设置为0，如果为真，则播放音频。
如果你愿意，你可以在 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 中看到你使用了 a 标签，在处理音频和视频时不需要它，它的 <source src="location of file">
编辑2：
我尝试使用代码 sn-p 让它工作，或者至少没有错误。由于本地主机，声音不会播放。