Foros del Web » Creando para Internet » HTML »

Reproducir sonido en HTML5

Estas en el tema de Reproducir sonido en HTML5 en el foro de HTML en Foros del Web. Hola a todos, hoy quiero compartir un pequeño tutorial referente a la forma de reproducir sonidos en HTML5. Lo primero que hay que saber es ...
  #1 (permalink)  
Antiguo 21/02/2013, 12:00
 
Fecha de Ingreso: diciembre-2012
Mensajes: 3
Antigüedad: 12 años
Puntos: 7
Reproducir sonido en HTML5

Hola a todos, hoy quiero compartir un pequeño tutorial referente a la forma de reproducir sonidos en HTML5. Lo primero que hay que saber es que el formato de audio que utilicemos, va a depender del navegador donde estemos ejecutando nuestra aplicacion. Lo mejor es verlo por medio de una tabla:



Esta tabla que fue tomada de w3schools, ilustra muy bien los formatos soportados por cada navegador. Si obsevamos bien no existe un formato que soporten todos los navegadores, por lo tanto necesitamos tener por lo menos dos formatos de un mismo sonido para que queden cubiertos todos los navegadores.

Entrando en materia, para reproducir un archivo necesitaremos:

1. Agregar etiqueta html



Esta es la primera parte, lo que se hace es añadir una etiqueta llamada audio y se le asigna un id, luego dentro de esta etiqueta se agregan otras dos llamadas source, aqui es donde estara la ruta de los archivos. Como se puede observar se agregan dos, ya que si el primer archivo no lo soporta el navegador, entonces cargara el segundo.

2. Reproducir sonido utilizando javascript



Lo primero que se necesita hacer, es crear una variable donde obtendremos el elemento de audio que creamos anteriormente. Esta variable se crea dentro del conocido metodo .ready() de jQuery, el cual se ejecuta cuando todos los elementos de la pagina esten cargados, es importante hacerlo de esta manera o sino existe el riesgo que la variable sonido quede como indefinida.



Ahora sencillamente se puede crear un boton que al momento de hacer click sobre el, se ejecute el metodo play(), el cual permite que se ejecute el sonido que hemos cargado.

Otros metodos y atributos importantes

Con el fin de tener un mejor manejo de todos los archivos de sonido, existen otros metodos y propiedades muy utiles los cuales son:

pause() Permite pausar la reproduccion
canPlayType() Permite saber si el archivo asignado se puede reproducir en el navegador
.currentTime Atributo que permite conocer cuantos segundos lleva la canción en reproducción
.volume Permite asignar el volumen a la cancion, el atributo va de 0 a 1, de modo que se puede asignar por ejemplo 0.5 de volumen
.duration Permite saber la duracion de la canción (el valor se obtiene en segundos)


Ejemplo practico

Y para terminar quiero compartir un ejemplo sencillo que implemente pero que puede ser bastante util al momento de reproducir un sonido. Luce asi:



En el ejemplo cargo una cancion y creo los botones de play, pause y stop, tambien adiciono otro boton que permite disminuir el volumen de la cancion, y por ultimo añado en la parte inferior un <div> en el cual se muestra la cantidad de segundos que lleva de reproducción la canción.

Y el codigo:[url]http://rapidshare.com/files/2719144879/Audio%20HTML5.rar[/url]

Última edición por GatorV; 21/02/2013 a las 13:04

Etiquetas: html5, navegadores, reproducir, sonido
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 3 personas




La zona horaria es GMT -6. Ahora son las 20:46.