Im new here, my problem is that Im trying to play music or another sound with an onclick event, the problem begin when I try to stop that sound, I expect that the sound stop, but the sound begin ring again, here is the javascript code:
const playToPause = document.getElementById("play-song");
// main audio functions
function playSound() {
const audio = new Audio("track_path");
addEventListener("click", _ => {
switch (playToPause.value) {
case "pause":
audio.play();
playToPause.value = "play";
break;
case "play":
audio.pause();
playToPause.value = "pause"
}
console.log(playToPause.value);
});
};
And here is the button element
<button id="play-song" value="pause" onclick="playSound()" class="fa-solid fa-play fa-3x action-buttons"></button>
i had try before with if...else if, sentence and i changed it by a switch sentence thinking that the problem was on if...else if.
Later I use a console.log to see the value of the button and I get this the first time that I click it:browser console as code tag with "```")
the console show that:
play jquery.client.js:16
But if I click again on the button, to stop the sound, it detect as a double click
The console show that:
play jquery.client.js:16 (The first click)
pause jquery.client.js:16
play jquery.client.js:16
Sorry, for my bad english, I hope that anyone can help thanks in advance :)
Your problem is that you're redefining the audio variable each time the function is executing - with the result that the audio.play() or audio.pause() is playing or pausing that just-created sound. It does nothing with any that were previously playing.
To fix, just move the definition of audio outside the function.
Also, as @Ivar says in his comment, your addEventListener should not be inside the function, or you add new listeners each time. Your function will already run each time the button is clicked because of the inline onclick attribute on the button.
So change your code to this:
const playToPause = document.getElementById("play-song");
const audio = new Audio("track_path");
// main audio functions
function playSound() {
switch (playToPause.value) {
case "pause":
audio.play();
playToPause.value = "play";
break;
case "play":
audio.pause();
playToPause.value = "pause"
}
console.log(playToPause.value);
};
<!-- User Audio Tag -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio id="audio-tag">
<source src="./partham-ganesh-besado-re.mp3" type="audio/ogg">
<source src="./partham-ganesh-besado-re.mp3" type="audio/mpeg">
</audio>
<button onclick="play()" type="button">Play</button>
<button onclick="pause()" type="button">Pause</button>
<script>
var audio = document.getElementById("audio-tag");
function play() {
audio.play();
}
function pause() {
audio.pause();
}
</script>
</body>
</html>