Playing MP3 on click, while reseting every other MP3

Design help Custom code
1

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)

2

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.

3

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

4

We ran into a similar issue working on a client project and created a script that automatically pauses the first audio player when another starts playing.

If you check out the tutorial you’ll get walked through the issue as well as implementing the solution from start to finish.

Please feel free to tag me if you have any questions!

Happy Thursday!