<style>
.btn__play{
width: 70px;
cursor: pointer;
border-radius: 10px;
}
</style>
track1: <button class=btn__play> Play </button><br /><br />
track2: <button class=btn__play> Play </button><br /><br />
track3: <button class=btn__play> Play </button>
<audio class=aud src='https://mysynthesizer.github.io/index.hetemeel/track1.mp3'></audio>
<audio class=aud src='https://mysynthesizer.github.io/index.hetemeel/track2.mp3'></audio>
<audio class=aud src='https://mysynthesizer.github.io/index.hetemeel/track3.mp3'></audio>
<script>
var btn = document.querySelectorAll('.btn__play');
var aud = document.querySelectorAll('.aud');
function playPause(index) {
btn[index].addEventListener('click', () => {
if(btn[index].textContent === 'Pause') {
btn[index].textContent = 'Play';
aud[index].pause();
} else {
btn[index].textContent = 'Pause';
aud[index].play();
}
});
}
for(i = 0; i < btn.length; i ++){
playPause(i);
aud[i].onended =_=> btn[i].textContent = 'Play';
}
</script>
Правда, не знаю, как это сделать на jquery.