Hola, tengo un problema con una web que estoy haciendo, no soy experto en la materia. Necesito poner una serie de canciones (es una web de una banda) para que los usuarios puedan escucharlas, a modo de reproductor de audio. Quiero que sea algo sencillo y claro. He usado 5 tags de audio, uno por canción y el problema es que si una canción ya está sonando y el usuario pulsa sobre el botón de play, empiezan a sonar a la vez. ¿Cómo puedo hacer para que cuando se lance un segundo audio se pause el primero?
También me gustaría poder hacer que cuando una canción finalice, comience la siguiente.
He buscado mucho sobre la funcionalidad de audio de html5 y no encuentro como hacer este tipo de cosas.
No se si lo tendrás resuelto, pero básicamente el problema que tienes se puede solucionar usando eventos en tus tag de audio.
Primero con javascript añades al evento play, cuando este se ejecute revisas si hay otro audio, si esta reproduciendo lo paras con stop.
Para detectar cuando el audio se para tienes que recurrir al evento ended. Si es lanzado miras de reproducir la siguiente canción.
Puedes mirar como funcionan estos eventos con esta pagina de demo: http://jsfiddle.net/aarongloege/fzXsT/light/
Por otro lado puedes usar librerías que abstraen la funcionalidad entre navegadores, incluso lo hacen retrocompatible usando partes flash.
Aquí tienes un listado: https://github.com/bebraw/jswiki/wiki/Audio-libraries
Una que he utilizado es: SoundManager2 y tienes un ejemplo de lo que quieres lograr al estilo listado de reproducción aquí: http://www.schillmania.com/projects/soundmanager2/demo/bar-ui/
También me gustaría poder hacer que cuando una canción finalice, comience la siguiente.
He buscado mucho sobre la funcionalidad de audio de html5 y no encuentro como hacer este tipo de cosas.
Gracias, un saludo!
14/10/2015 08:47
No se si lo tendrás resuelto, pero básicamente el problema que tienes se puede solucionar usando eventos en tus tag de audio.
Primero con javascript añades al evento play, cuando este se ejecute revisas si hay otro audio, si esta reproduciendo lo paras con stop.
Para detectar cuando el audio se para tienes que recurrir al evento ended. Si es lanzado miras de reproducir la siguiente canción.
Puedes mirar como funcionan estos eventos con esta pagina de demo: http://jsfiddle.net/aarongloege/fzXsT/light/
Por otro lado puedes usar librerías que abstraen la funcionalidad entre navegadores, incluso lo hacen retrocompatible usando partes flash.
Aquí tienes un listado: https://github.com/bebraw/jswiki/wiki/Audio-libraries
Una que he utilizado es: SoundManager2 y tienes un ejemplo de lo que quieres lograr al estilo listado de reproducción aquí: http://www.schillmania.com/projects/soundmanager2/demo/bar-ui/
Saludos