La creación de páginas web con HTML 5 habilita diferentes características que te pueden ayudar a conseguir buenos resultados controlando los archivos multimedia y sus características. En esta ocasión aprenderemos cómo utilizar un slider en HTML 5 y código Javascript para modificar el volumen de un archivo de audio dentro de nuestra página.

Crear slider de control de volumen en HTML 5.

Primero tenemos que insertar un elemento audio en nuestra web. El código debería quedar de una forma similar a esta:

  1. <audio id=»reproductor» controls>
  2. <source src=»mimusica.ogg» type=»audio/ogg»>
  3. <source src=»mimusica.mp3″ type=»audio/mpeg»>
  4. </audio>

Los elementos source del código indican desde donde insertamos elementos de audio en la página. Es muy importante para que la página sepa desde donde cargar cada archivo. El slider lo creamos utilizando un elemento input:

1.  <input type=»range» min=»0″ max=»1″ value=»0.5″ step=»0.1″ id=»mislider»>2.  <span id=»valor»></span>

El rango de nuestro control de volumen irá de 0 a 1 con variaciones de 0.1, lo próximo que haremos será configurar el código Javascript para que el volumen siempre se modifique en referencia con el valor del slider. Los códigos que debes modificar son los siguientes:

barra.addEventListener(«change»,function(ev){…},true);

ev.currentTarget.value;

var reproductor = document.getElementById(«reproductor»);

1.  barra.addEventListener(«change»,function(ev){  2.    reproductor.volume = ev.currentTarget.value; 3.  },true);

Una vez terminados estos pasos, cada vez que movamos el slider para modificar el volumen, se actualizará el elemento para devolvernos un incremento o una disminución en el volumen. De esta forma nuestra página ya tiene su propio slider de volumen de audio para que las canciones o elementos de audio que subamos puedan ser controladas desde la propia pantalla.