Cómo usar JavaScript para reproducir un archivo MP3

Hay varias formas de incrustar y reproducir archivos de audio MP3 en tus páginas web. La etiqueta "embed" obsoleta en HTML, varios reproductores Flash y reproductores basados en Java son ejemplos. El estándar HTML5, con su énfasis en scripting y su falta de dependencia de software de terceros, ofrece la forma más compatible de incrustar y reproducir MP3 en páginas web de cara al futuro. Incrusta el archivo MP3 con el objeto "audio" de HTML5, y luego usa una función de JavaScript para iniciarlo.

Paso 1

Añade el siguiente código al cuerpo de tu documento HTML:

<audio id="mp3" src="tu-archivo.mp3"></audio>

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

Añade el siguiente código JavaScript entre las etiquetas "head" de tu documento HTML:

<script>
function playMP3() {
  document.getElementById("mp3").play();
}
</script>

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

Paso 3

Añade un botón a la página web para llamar a la función "playMP3" cuando el usuario haga clic. Añade el siguiente código al cuerpo del documento HTML:

<input type="button" value="Reproducir" onClick="playMP3()">

Cambia el atributo "value" para dar al botón un título diferente.

Paso 4

Usa la siguiente función en lugar de "playMP3" para permitir al usuario pausar el archivo después de iniciarlo:

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

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