Вы можете использовать селектор, чтобы найти и приостановить / воспроизвести ваш плеер.
Допустим, у вас есть 4 <audio>
тега
<div class='audio-container'>
<audio id="audio1" src="/Demo1.mp3"></audio>
<a class='audio-play'>Click here to hear 1.</a>
</div>
<div class='audio-container'>
<audio id="audio2" src="/Demo2.mp3"></audio>
<a class='audio-play'>Click here to hear 2.</a>
</div>
<div class='audio-container'>
<audio id="audio3" src="/Demo3.mp3"></audio>
<a class='audio-play'>Click here to hear 3.</a>
</div>
<div class='audio-container'>
<audio id="audio4" src="/Demo4.mp3"></audio>
<a class='audio-play'>Click here to hear 4.</a>
</div>
Использование JQuery:
$(".audio-container .audio-play").off("click").on("click", function() {
// $(this) -> ref to the currently clicked <a/>
//get the [0] element of the FIND query, because a TAG selector returns an array of found elements
var audio = $(this).parent().find("audio")[0];
var hasNotStarted = audio.paused && audio.currentTime == 0 && !audio.ended;
var hasEnded = audio.paused && audio.currentTime > 0 && audio.ended;
var isPaused = audio.paused && audio.currentTime > 0 && !audio.ended;
if(hasNotStarted || hasEnded || isPaused)
audio.play()
else
audio.pause();
});
Обычный JS
//in plain JS, you will have to add a click event listener, on each element
var audioElems = document.querySelectorAll(".audio-container .audio-play");
for (var i = 0; i < audioElems.length; i++) {
audioElems[i].addEventListener("click", function() {
var audio = this.parentNode.children[0]
var hasNotStarted = audio.paused && audio.currentTime == 0 && !audio.ended;
var hasEnded = audio.paused && audio.currentTime > 0 && audio.ended;
var isPaused = audio.paused && audio.currentTime > 0 && !audio.ended;
if(hasNotStarted || hasEnded || isPaused)
audio.play()
else
audio.pause();
});
}