Con la esperanza de tener dos botones, uno para "Pausar" y otro para "Reproducir" el archivo de audio MP3. Los botones muestran pero no pausan/reproducen el audio, así como el audio no se reproduce en absoluto. Aquí está mi código que estoy usando. Gracias.
HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Loadingscreen</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="script.js"></script> </head> <body> <audio controls id="song"> <source src="audio/music.mp3" type="audio/mpeg"> </audio> <button onclick="playAudio()" type="button">Play</button> <button onclick="pauseAudio()" type="button">Pause</button> <div class="slides slowFade"> <div class="slide"> <img src="img/image1.jpg" alt="img"/ height="100%" width="100px"> </div> <div class="slide"> <img src="img/image2.jpg" alt="img"/ height="100%" width="100px"> </div> <div class="slide"> <img src="img/image3.png" alt="img"/ height="100%" width="100px"> </div> <div class="slide"> <img src="img/image4.jpg" alt="img"/ height="100%" width="100px"> </div> </div> </body> </html>JavaScript
var x = document.getElementById("song"); function playAudio() { x.play(); } function pauseAudio() { x.pause(); }Debe cargar su archivo js después de cargar el documento.
Debe colocar el script al final del archivo HTML. Usas var x = document.getElementById("song"); para obtener el elemento DOM pero el elemento aún no está cargado ya que su secuencia de comandos se encuentra en la parte superior de la página para que pueda cambiar el código de esta manera:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Loadingscreen</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <audio controls id="song"> <source src="audio/music.mp3" type="audio/mpeg"> </audio> <button onclick="playAudio()" type="button">Play</button> <button onclick="pauseAudio()" type="button">Pause</button> <div class="slides slowFade"> <div class="slide"> <img src="img/image1.jpg" alt="img"/ height="100%" width="100px"> </div> <div class="slide"> <img src="img/image2.jpg" alt="img"/ height="100%" width="100px"> </div> <div class="slide"> <img src="img/image3.png" alt="img"/ height="100%" width="100px"> </div> <div class="slide"> <img src="img/image4.jpg" alt="img"/ height="100%" width="100px"> </div> </div> <!-- the DOM will be available here --> <script src="script.js"></script> </body> </html>Es una buena práctica cargar el archivo JS al final del archivo que hace que el usuario vea HTML más rápido.
Si por alguna razón no puede cargar el archivo js al final de la página, puede cambiar su archivo JS de esta manera:
function playAudio() { const x = document.getElementById("song"); x.play(); } function pauseAudio() { const x = document.getElementById("song"); x.pause(); }¿Has probado a usar javascript para el audio? como
var myAudio = new Audio(myAudioLink)entonces haciendo
function playMyAudio() { myAudio.play() } function pauseMyAudio() { myAudio.pause() }estoy encantado de ayudar.