I would loop through each .play button and detect when the audio is paused (or stopped), if so, then pause/stop every possible audio being played, then start playing the audio matching the pressed play button.
With this you won’t need IDs, so your HTML will be less cluttered.
This solution will work for any amount of audios in the page
N.B – I added also a Pure JS solution.
//pure JS Version
const playButton = document.querySelectorAll('section .play')
playButton.forEach(el => {
const currentAudio = el.nextElementSibling.querySelector('audio')
el.addEventListener('click', e => {
if (currentAudio.paused) {
document.querySelectorAll('audio').forEach(el => el.pause())
currentAudio.play()
playButton.forEach(el => el.classList.remove('active'))
e.currentTarget.classList.add('active')
} else {
e.currentTarget.classList.remove('active')
currentAudio.pause()
}
})
})
//jQuery Version
//const playButton = $('section .play')
//playButton.each((_, el) => {
// const currentAudio = $(el).next().find('audio')[0]
// $(el).on('click', e => {
// if (currentAudio.paused) {
// $('audio').each((_, el) => el.pause())
// currentAudio.play()
// playButton.removeClass('active')
// $(e.currentTarget).addClass('active')
// }
// else {
// e.currentTarget.classList.remove('active')
// currentAudioJs.pause()
// }
// })
//})section {
display: block;
margin-bottom: 30px;
padding: 0 20px;
text-align: center;
width: 200px;
height: 200px;
position: relative;
}
section .btn {
background: #ccc;
border: 0 none;
cursor: pointer;
display: block;
height: 60px;
line-height: 60px;
position: absolute;
width: 200px;
z-index: 100;
bottom: 0;
text-align: center;
}
section .btn:after {
content: "play";
}
section .btn.active:after {
content: "pause";
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<img src="https://unsplash.it/g/300?image=29" width="200" height="200" />
<p class="play btn"></p>
<p>
<audio>
<source src="https://room1015.com/img/cms/MP3/Hanging-out-in-room-1015.mp3" type="audio/mpeg" />
</audio>
</p>
</section>
<section>
<img src="https://unsplash.it/g/300?image=29" width="200" height="200" />
<p class="play btn"></p>
<p>
<audio>
<source src="https://room1015.com/img/cms/MP3/HOLLYROSE.mp3" type="audio/mpeg" />
</audio>
</p>
</section>