Autor Tema: Reproducir sonido en html5 (Leído 2356 veces)

will21 · « **en:** Jueves 21 de Febrero de 2013, 18:23 »

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: http://rapidshare.com/files/2719144879/Audio%20HTML5.rar

Muchas gracias a todos y si les interesa mas informacion pueden visitar mi blog www.hacerjuegos.net

SoloCodigo

Autor Tema: Reproducir sonido en html5 (Leído 2356 veces)

will21

Reproducir sonido en html5