It’s not working on the other ones because when you play them, it’s not their audio player that’s playing.
Currently when clicking on the second or third play button, it’s the first <audio>
player that plays, even though the display makes it look like you are playing the second or third one. When you mouseout of the second one for example, it checks if the second audio player is playing, and it isn’t. Instead, its the first audio player that is wrongly playing. It needs instead to be the second audio player that plays when you click the second play button.
The playButton()
function is currently playing the first <audio>
element no matter which play button you click. That is what needs to be corrected.
The var player
line is the cause of that problem there, which can be fixed by replacing document
with button
instead.
With document
it will always be getting the first audio player that the document has, which to no surprise is going to be the first <audio>
element on the page. With button
it will be getting the first <audio>
element inside of that button, which is the desired behaviour that you want to occur instead.