Volumen del Audio con HTML5

21/Oct/2016 HTML5 1 Comentario

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.

Vídeos sobre HTML5


Un comentario en “Volumen del Audio con HTML5”

Víctor Cuervo

Patricio

He seguido con mucha atención tu video pero a mi no me funciona. Tengo la imagen en una carpeta llamada Imagen Canvas. Pero da lo mismo si saco la imagen de la carpeta. Este es el codigo

Insertar imagen en canvas

Insertar imagen en Canvas

var micanvas = document.getElementById(«micanvas»);
var ctx = micanvas.getContext(«2d»);

var miimagen = new Image();
miimagen.src = Imagen Canvas»octagonos.png»;

miimagen.onload = function (){
ctx.drawImage(miimagen,0,0);
}

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.