En este ejemplo vamos a ver cómo podemos controla el volumen del audio con HTML5. La idea es utilizar un slider de HTML5 y código Javascript para modificar el volumen.
Lo primero que haremos para llevar a cabo nuestro ejemplo de control del volumen del audio con HTML5 será insertar un elemento audio dentro de nuestra página web.
Vemos que mediante los elementos source indicamos los diferentes orígenes de audio que se pueden reproducir.
Lo siguiente será crear el slider mediante el elemento input.
Vemos que el elemento input es de tipo "range". Y que hemos configurado sus valores mínimo a 0 y máximo a 1 ya que son los valores máximo y mínimo que admitirá el control de audio. De igual manera indicamos que los incrementos son de 0.1 para poder obtener un valor en esos rangos.
Ahora empezaremos con el código Javascript. Lo primero que haremos con este código será recuperar el valor del slider cada vez que este cambie. Para ello deberemos de controlar el evento "change". Esto lo conseguimos mediante el método .addEventListener().
barra.addEventListener("change",function(ev){...},true);
El valor del slider nos llega en el objeto Event.
ev.currentTarget.value;
Así que lo que haremos será asignar dicho valor a la propiedad del audio. Para ello lo primero que haremos será recuperar la referencia al audio.
var reproductor = document.getElementById("reproductor");
Y luego asignarle el valor dentro del controlador del evento que hemos definido con anterioridad.
barra.addEventListener("change",function(ev){
reproductor.volume = ev.currentTarget.value;
},true);
De esta forma cada vez que movamos el slider se actualizará el volumen del audio. De esta forma tan sencilla hemos conseguido controlar el volumen del Audio con HTML5.
