Soy nuevo aquí, mi problema es que estoy tratando de reproducir música u otro sonido con un evento onclick, el problema comienza cuando trato de detener ese sonido, espero que el sonido se detenga, pero el sonido comienza a sonar nuevamente, aquí está el javascript código:
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); }); };Y aquí está el elemento del botón.
<button id="play-song" value="pause" onclick="playSound()" class="fa-solid fa-play fa-3x action-buttons"></button>Probé antes con la frase if...else if y la cambié por una frase switch pensando que el problema estaba en if...else if.
Luego uso un archivo console.log para ver el valor del botón y obtengo esto la primera vez que hago clic en él: consola del navegador como etiqueta de código con "```")
la consola muestra que: play jquery.client.js:16
Pero si vuelvo a hacer clic en el botón, para detener el sonido, se detecta como un doble clic.
La consola muestra que:
play jquery.client.js:16 (The first click) pause jquery.client.js:16 play jquery.client.js:16Lo siento, por mi mal inglés, espero que alguien pueda ayudar gracias de antemano :)
Su problema es que está redefiniendo la variable audio cada vez que se ejecuta la función, con el resultado de que audio.play() o audio.pause() está reproduciendo o pausando ese sonido recién creado. No hace nada con ninguno que se estuviera reproduciendo previamente.
Para solucionarlo, simplemente mueva la definición de audio fuera de la función.
Además, como dice @Ivar en su comentario, su addEventListener no debe estar dentro de la función, o agrega nuevos oyentes cada vez. Su función ya se ejecutará cada vez que se haga clic en el botón debido al atributo onclick en línea en el botón.
Así que cambia tu código a esto:
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>