Playing MP3 on click, while reseting every other MP3

Hey! This below is the code that plays MP3 when you click on .mp3-one button.

<script>
document.addEventListener("DOMContentLoaded",()=>{
$(".mp3-one").click(()=>{
let e = document.createElement("audio")
e.src= "LINK TO AUDIO";
e.play();
});
});
</script>

But right now, it doesn’t pause/reset other MP3’s like .mp3-two or .mp3-three (just an example).
Additionally, when you click .mp3-one button again, it plays the same MP3 from the start, so it creates a loop with longer MP3’s.

Is there a simple way a js wizzard would be able to guide me to? Or give me resources where I try and figure it out on my own :smiley:

Here’s my ugly example - try clicking it 5 times: https://martins-amazing-project-b1dc36.webflow.io

Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey,

I’m not 100% sure that I understand your question correctly, but if you want to toggle the audio like a play / reset button, try adding a if - else statement (under e.src) like:

if (e.paused) {
    e.play();
}
else {
    e.pause();
    e.currentTime = 0;
}

If you just want a play / pause button, remove the “e.currentTime = 0” under the else-statement.

download and convert your YouTube videos from convertmp3 its convert YouTube videos into mp3 convertmp3 an mp3 converter