Can't make 2 buttons play 2 different songs on my HTML - html

Question

Firstly, I'm super (SUPER) new to coding in general. I'm doing a college project for a site, and I wanted to make a certain page have 2 buttons that play songs, 2 different versions, one for each button. I copied the code from stack overflow, can't remember where but I'll be forever thankful for that one answer. I'm new to SO too so I hope I put the code here the right way :|
<!-- BTN1-->
<button id="ASong" onClick="playPause()" >
<audio
src="mp3/Persona_5_OST-_Beneath_the_Mask_(getmp3.pro).mp3"
autoplay
loop
></audio>
<img src="img/musica2.png" width="100px" align="left" margin-top="40px">
<br/>
</button>
<script>
var aud = document.getElementById("ASong").children[0];
var isPlaying = false;
aud.pause();
function playPause() {
if (isPlaying) {
aud.pause();
} else {
aud.play();
}
isPlaying = !isPlaying;
}
</script>
<!-- BTN1-->
<!-- BTN2-->
<button id="ASong2" onClick="playPause()" >
<audio
src="mp3/Persona_5_OST_-_Beneath_the_Mask_r_(getmp3.pro).mp3"
autoplay
loop
></audio>
<img src="img/musica2.png" width="100px" align="left" margin-top="40px">
<br/>
</button>
<script>
var aud = document.getElementById("ASong2").children[0];
var isPlaying = false;
aud.pause();
function playPause() {
if (isPlaying) {
aud.pause();
} else {
aud.play();
}
isPlaying = !isPlaying;
}
</script>
<!-- BTN2-->
The only thing I really tried was changing the ID name for the second song. What happens is. I choose a button and click it first. That one button, with that specific song is the one that'll play (edit, it's not the first one I click, it's only one of the songs :/ it switched which one it was when I changed the ID name) , even if I try to press the other button afterwards. It's like both of them become the same button, they function the same. What I wanted is that each one of them worked separately. I want to be able to click, start one song, pause it, click on the other button and start the other song, which is not what's happening right now. I hope that makes sense D=

Answer 1

I'm going to modernize this a bit. Inline event handlers listeners are not the way to go these days. I'' use addEventListener instead.
Next, I'm going to use one lot of code to handle the actions. One concept to get used to as you learn to program is DRY: Don't Repeat Yourself. To facilitate the state of your playback I'll use a data attribute on the button
/*Get the buttons*/
document.querySelectorAll(".playPause").forEach(function(el) {
/*Add a click event listener*/
el.addEventListener("click", function() {
/*Get the first audio tag in the clicked button*/
var aud = this.querySelector("audio");
/*Check the data attirbute on the button if playing*/
if (this.dataset.isplaying === "true") {
/*Debug line*/
console.log("Pausing " + aud.src)
/*Change the status of the data attribute*/
this.dataset.isplaying = "false";
/*Pause the audio element*/
aud.pause();
} else {
/*Debug line*/
console.log("Playing " + aud.src)
/*Change the status of the data attribute*/
this.dataset.isplaying = "true";
/*PLay the audio element*/
aud.play();
}
})
});
<button id="ASong" class="playPause" data-isplaying="false">
<audio
src="mp3/Persona_5_OST-_Beneath_the_Mask_(getmp3.pro).mp3"
autoplay
loop
></audio>
<img src="img/musica2.png" width="100px" align="left" margin-top="40px">
</button>
<button id="ASong2" class="playPause" data-isplaying="false">
<audio
src="mp3/Persona_5_OST_-_Beneath_the_Mask_r_(getmp3.pro).mp3"
autoplay
loop
></audio>
<img src="img/musica2.png" width="100px" align="left" margin-top="40px">
</button>