Este sitio web usa cookies para mejorar el servicio. Si continúa navegando entendemos que aceptas su uso.

Política de Privacidad

BLOG - DETALLES

Reproductor de Audio Web con HTML5 y JavaScript

Veamos cómo desarrollar un reproductor de audio para la web sin necesidad de utilidades de terceros

Reproductor de Audio Web con HTML5 y JavaScript

En este artículo vamos a crear un sencillo reproductor de audio para nuestra web totalmente personalizado, prescindiendo de los controles que nos ofrece HTML5 por defecto. Lo único que necesitaremos serán conocimientos básicos de HTML5 y Javascript.

Hoy en día cada vez es menos habitual el uso de JavaScript puro y en la mayoría de ocasiones se recurre a distintos frameworks especializados para la creación de utilidades. En este caso he preferido recurrir al original, a JavaScript, para que, de algún modo, pueda servir de pequeña introducción al padre de tantos y tantos frameworks tan usados en la actualidad.

En primer lugar creamos una estructura HTML básica en la que insertaremos nuestro reproductor:

<html>

<head>

    <title>Reproductor de Audio con HTML5 y JavaScript</title>

</head>

<body>

    AQUÍ INSERTAREMOS EL REPRODUCTOR

</body>

</html>


En primer lugar, vamos a insertar el audio utilizando la etiqueta de HTML5 <audio>. Debido a que aún existe conflicto entre los navegadores con los formatos de audio permitidos por cada uno, es necesario incluir, al menos, dos formatos de audio, asegurándonos así que nuestro audio será reproducido por todos los navegadores o al menos por los más usados.

Para incluir cada archivo de audio concreto usaremos la etiqueta <source />, que necesita de dos atributos: src, con la ruta del archivo y type, con el tipo MIME del audio a reproducir. Existe algún atributo más, pero de momento nos conformaremos con estos dos.

Así, de momento, tenemos:

<audio id='reproductor'>

    <source src='audio/pixies-allison.mp3' type='audio/mpeg' />

    <source src='audio/pixies-allison.ogg' type='audio/ogg' />

</audio>


Ahora nos faltarían los botones para controlar la reproducción del sonido. Para ello vamos a crear botones con la etiqueta <button> y les daremos posteriormente funcionalidad mediante un script de JavaScript.

<button id='play'>PLAY</button>

<button id='stop'>STOP</button>

<button id='restart'>RESTART</button>

<button id='loop'>LOOP</button>


Ahora, creamos en la raiz de nuestro sitio una carpeta a la que llamaremos js y en ella vamos a crear un archivo JavaScript vacío al que podemos llamar, por ejemplo, audio.js y lo enlazaremos a nuestra página con una llamada en el HEAD.

De momento tendríamos algo así:

<html>

<head>

    <title>Reproductor de Audio con HTML5 y JavaScript</title>
    
    <script type='text/javascript src='js/audio.js'></script>

</head>

<body>

    <audio id='reproductor'>

        <source src='audio/pixies-allison.mp3' type='audio/mpeg' />

        <source src='audio/pixies-allison.ogg' type='audio/ogg' />

    </audio>

    <button id='play'>PLAY</button>

    <button id='stop'>STOP</button>

    <button id='restart'>RESTART</button>

    <button id='loop'>LOOP</button>

</body>

</html>

Vamos a dar ahora funcionalidades a los botones que hemos creado antes para hacer que sean estos los que controlen el audio y no los controles que, por defecto, nos ofrece la etiqueta <audio> de HTML5.

Para que nuestro script esté disponible cuando se cargue nuestra página y evitar 'ensuciar' nuestro código HTML con llamadas a scripts parciales, vamos a trabajar con JavaScript No Intrusivo, es decir, que todo se encontrará en nuestro audio.js y estará disponible siempre ya que se cargará con el documento. Para ello, lo primero que hacemos es indicar al navegador, mediante una función anónima, que cargue nuestro script cuando se cargue la ventana:

window.onload = function() {

    ...

}

Ahora, dentro de esta función anónima creamos nuestros scripts por separado, uno para cada botón creado en el HTML.

Vamos a empezar localizando e identificando todos los elementos implicados en nuestro reproductor, es decir, el propio reproductor y los botones de control de sonido:

var audio = document.getElementById('reproductor');    //Reproductor

var play = document.getElementById('play');    //Play

var stop = document.getElementById('stop');    //Stop

var restart = document.getElementById('restart');    //Reinicio

var loop = document.getElementById('loop');    //Loop

Una vez localizados vamos a darles funcionalidades por separado para que cada uno haga lo que debe hacer. Es importante determinar desde el principio cuál será el evento que hará que se 'disparen' los script. Vamos a usar el evento normal que hará que funcione un botón de un reproductor de sonido: CLICK.

Empezamos con el botón PLAY. En este botón vamos a crear dos funcionalidades: Si la reproducción de audio está parada, el botón debe mostrar el texto PLAY, ya que estará preparado para empezar a reproducir, pero si la reproducción está en marcha deberá mostrar el texto PAUSE, indicando que si pulsas detendrás la reproducción manteniéndola exáctamente en el punto actual (esto último es un detalle importante, ya que no hacemos un 'stop' sino un 'pause'). Así:

play.onclick = function() {

    if (play.innerHTML == 'PLAY') {

        audio.play();

        play.innerHTML = 'PAUSE';

    } else {

        audio.pause();

        play.innerHTML = 'PLAY';

    }

}

Con esto queda completo el script para el botón PLAY / PAUSE.

Vamos ahora al botón de STOP. En este caso no queremos que el audio se mantenga en el mismo punto donde se ha detenido sino que queremos que se pare la reproducción y el punto de inicio de reproducción vuelva al inicio. Para ello vamos a usar la propiedad 'currentTime' de nuestro elemento 'audio': audio.currentTime = valor nos indica el punto en que se encuentra nuestra reproducción en una linea de tiempo establecida entre el inicio y el final de esta. Así:

stop.onclick = function() {

    audio.pause();    //Paramos la reproducción

    audio.currentTime = 0    //La llevamos al inicio

    play.innerHTML = 'PLAY'    //Establecemos de nuevo el botón Play a su estado inicial

}

Para reiniciar la reproducción usaremos el botón RESTART. Con lo visto hasta ahora creo que sobran más explicaciones:

restart.onclick = function() {

    audio.currentTime = 0;    //Mandamos la reproducción al principio pero NO la paramos

}

Por último, nos queda el botón LOOP. Para el funcionamiento de este botón nos apoyaremos en otra propiedad de nuestro elemento 'audio' que es el loop, que determina si el loop está activo o inactivo.

Este botón tiene dos opciones: si la opción 'loop' está desactivada, actívala, si está activada, desactívala... Pues eso:

loop.onclick = function() {

    if (audio.loop == false) {

        audio.loop = true;

    } else {

        audio.loop = false;

    }

}

Con esto quedaría completo nuestro reproductor de audio. Fijaos que en ningún momento se han activado los atributos asociados a la etiqueta <audio>: controls (muestra los controles por defecto de HTML5), preload (activa la precarga), autoplay (reproducción automática) y loop. Si quereis activarlos y probarlos por si necesitaris alguno de ellos no teneis más que añadirlos a la propia etiqueta <audio>.

<audio id='reproductor' controls autoplay>

Posteriormente podremos personalizar su estilo con CSS para dejarlo a nuestro gusto y acorde con nuestra web, pero ese ya es otro tema.

Si alguien necesita una mano con esto que lo comente y preparamos un pequeño ejemplo de maquetación de este reproductor de audio.

Comentarios del Artículo

COMENTAR

No hay comentarios para este artículo en este momento

Debes estar logueado para poder dejar un comentario.