Tengo un problema donde el audio no se reproduce y no sé por qué.
Tengo esta etiqueta de audio y botones en este documento .ejs, porque estoy usando nodejs y es así:
<!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><%= title %></title> </head> <body> <audio id="audio"> <source id="audioSource" src="" type="audio/mpeg"/> Your browser does not support the audio element. </audio> <button onclick="playAudio()" type="button">Play Audio</button> <button onclick="pauseAudio()" type="button">Pause Audio</button> <button onclick="check()" type="button">Check Audio Status</button> <script src="/js/sum.js"></script> </body> </html>en la parte inferior, conecto un documento de JavaScript en el documento, hay algunas funciones para cada botón: reproducir, pausar y verificar el estado cuando se inicia el navegador, debería comenzar a reproducir uno de los 4 archivos mp3 que tengo en mi carpeta de música después eso, escucha cuando el audio está terminado y luego elige un número aleatorio del 1 al 4, y establece la fuente de audio con el nuevo sonido.
document.getElementById("audio").addEventListener("ended", myFunction); const audio = document.getElementById("audio"); const source = document.getElementById('audioSource'); let firstTime = 0; function check(){ if (audio.duration > 0 && !audio.paused) { alert("audio is playing"); } else { alert("audio is not playing"); } } function myFunction() { const i = Math.floor(Math.random() * 4) + 1; source.src = `/music/sound${i}.mp3`; audio.play(); } function playAudio() { if (firstTime == 0){ firstTime += 1; let i = Math.floor(Math.random() * 4) + 1; source.src = `/music/sound${i}.mp3`; audio.play(); } else { audio.play(); } } function pauseAudio() { audio.pause(); }El tema es que no reproduce nada, y no se porque, se agradece cualquier ayuda
En teoría, debería ser algo así como: se inicia el navegador, el usuario hace clic en reproducir y reproduce audio tras audio, con la capacidad de pausar.
Establecer la fuente de audio directamente en el elemento de audio debería ayudar. Aquí hay un ejemplo rápido.
<audio id="audioSource" src=""></audio> const audioElement = document.getElementById("audioSource"); audioElement.src = `path/to/your.mp3`Debe agregar algún tipo de oyente para asegurarse de que el audio también se pueda reproducir ( consulte MDN para obtener detalles al respecto ). Aquí hay una versión extendida del ejemplo anterior, que podría usar para asegurarse de que:
const audioElement = document.getElementById("audioSource"); function onCanPlay(e) { this.play(); } audioElement.addEventListener("canplaythrough", onCanPlay); audioElement.src = `path/to/your.mp3`Tenga en cuenta que es importante configurar la fuente después de conectar su oyente "puede reproducir".