HTML - Reproducir sonidos en HTML5

   
Vista:

Reproducir sonidos en HTML5

Publicado por William (1 intervención) el 21/02/2013 18:41:46
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
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
1
Responder
Imágen de perfil de xve

Reproducir sonidos en HTML5

Publicado por xve (1178 intervenciones) el 21/02/2013 21:56:33
Hola William, muchas gracias.... es excelente!!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Reproducir sonidos en HTML5

Publicado por Robinson Char (1 intervención) el 18/11/2013 04:05:54
Hola ... tengo una pregunta: Necesito crear un boton play para una emisora en Internet. Cómo puedo hacerlo con HTML5 para colocarlo en la página de la radio? ... saludos !!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-1
Comentar