Cómo utilizar Javascript para reproducir un archivo MP3

Hay varias formas de incrustar y reproducir archivos de audio MP3 en sus páginas web. La etiqueta obsoleta "incrustar" en HTML, varios reproductores Flash y reproductores basados ​​en Java son ejemplos. El estándar HTML5, con su énfasis en las secuencias de comandos y su falta de dependencia de software de terceros, ofrece la forma más compatible de incrustar y reproducir archivos MP3 en páginas web en el futuro. Incruste el archivo MP3 con el objeto de "audio" HTML5 y luego use una función de JavaScript para comenzar a reproducirlo

Paso 1

Agrega el siguiente código al cuerpo de tu documento HTML:

Este código incrusta y carga el archivo MP3, pero no lo reproduce. El valor de la etiqueta "src" contiene la ruta y el nombre del archivo MP3.

Paso 2

Agregue el siguiente código JavaScript entre las etiquetas "head" de su documento HTML:

Esta función, cuando se llama, accede al elemento "audio" por su id ("mp3") y usa el método play() para reproducirlo.

Paso 3

Agregue un botón a la página web para llamar a la función "reproducir MP3" cuando el usuario haga clic en él. Agregue el siguiente código al cuerpo del documento HTML:

Cambie el atributo "valor" para darle al botón un título diferente.

Paso 4

Use la siguiente función en lugar de "reproducirMP3" para permitir que el usuario pause el archivo después de iniciarlo:

function playpauseMP3(){ if(document.getElementById("mp3").paused){ ​​document.getElementById("mp3").play(); }else{ documento.getElementById("mp3").pausa(); }

Cambie el atributo "onClick" de la etiqueta "input" en el Paso 3 para que coincida con el nombre de esta función.