Buscar temas sin respuesta | Ver temas activos |

Nuevo tema Responder al tema Índice general » Programación: lo ultimo » HTML
Autor Mensaje
Desconectado 
 Asunto: Reproducir sonido en HTML5
NotaPublicado: 21 Feb 2013 14:34 
poster a 1200 bps
Avatar de Usuario

Registrado: 29 Dic 2012 01:28
Mensajes: 13
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:

Imagen

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


Imagen

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


Imagen


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.

Imagen

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:


Imagen

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 http://www.hacerjuegos.net

_________________
Desarrollo de Juegos HTML5 http://www.hacerjuegos.net


Arriba
 Perfil  
 
Desconectado 
 Asunto: Re: Reproducir sonido en HTML5
NotaPublicado: 21 Feb 2013 23:38 
PC++ Monopolizer
Avatar de Usuario

Registrado: 31 Dic 1969 21:00
Mensajes: 13433
Esto es raro de tu codigo

Imagen

Usas jquery para el document.ready pero no para obtener el sonido, tranquilmaente podrias haber hecho esto

$(function(){
var sonido = $("#sonido");
});

Despues el tutorial esta muy bueno!

_________________
"In hell, computers run Linux" - Sam & Max dixit.

And God said......... "Run, it's Kratos."

"Bugs are job security"
Código:

stop
(); // Hammertime!
 


Arriba
 Perfil  
 
Mostrar mensajes previos:  Ordenar por  
Nuevo tema Responder al tema  [ 2 mensajes ] 


  Imprimir vista Tema previo | Siguiente tema 

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado


Todos los horarios son UTC - 3 horas


No puede abrir nuevos temas en este Foro
No puede responder a temas en este Foro
No puede editar sus mensajes en este Foro
No puede borrar sus mensajes en este Foro
No puede enviar adjuntos en este Foro

Buscar:
Saltar a:  
PC++ Style
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Traducción al español por Huan Manwë