¿Cuáles son las opciones para una forma independiente de navegador de hacer presentaciones de diapositivas web con audio?

Question

Tengo un requisito para armar una aplicación que generará una presentación de diapositivas web.

Tiene que ser capaz de hacer transiciones sofisticadas entre varias imágenes (en un navegador) y también proporcionar audio mientras se muestran esas imágenes. Las transiciones entre las imágenes deben retrasarse hasta que finalice el audio (cada imagen tendrá su propia pista de audio).

También necesita ser creado con un programa para que no haya herramientas de diseño de GUI - Quiero poder generar archivos XML o de texto plano que pueden cargarse directamente en un navegador (a la jQuery) o compilarse con una herramienta libremente distribuible (a la Open Laszlo).

Todo mi trabajo web hasta la fecha ha sido J2EE, pero creo que es hora de que compruebe algunas de las herramientas más ricas del lado del cliente. He echado un vistazo rápido a Open Laszlo y jQuery pero no estoy seguro de cómo sincronizar las diapositivas con el audio. El proceso básico será:

• dar inicio a la pista de audio.
• transición a la imagen.
• espere hasta que finalice la pista de audio.
• enjuague y repita.

¿Es posible este tipo de cosas con jQuery? Parece que hay una gran cantidad de material de manipulación DOM pero no puedo encontrar nada obvio sobre la sincronización de audio.

Estoy abierto a otras sugerencias si las tiene, pero el requisito de herramientas de libre distribución es absoluto. Esto probablemente descarte la mayoría de las soluciones tipo Adobe Flash.

Answer 1

Recomiendo jPlayer http://www.happyworm.com/jquery/jplayer/ como su controlador de eventos de audio. jPlayer es genial porque también es compatible con audio HTML5.

continuación, puede utilizar la función onSoundComplete devolución de llamada dentro jPlayer para desencadenar un cambio de imagen. Hay demasiadas imágenes scroller/slideshow jQuery para listar, pero personalmente me gusta Cycle: http://malsup.com/jquery/cycle/

Answer 2

Puede escribirlo en ActionScript 3 con las bibliotecas Flex (el SDK es gratuito). No conozco ninguna otra opción aquí, especialmente teniendo en cuenta la sincronización con el requisito de audio.

Utilizando AS3 puede cargar un archivo XML que describa su presentación de diapositivas, descargar los recursos apropiados, usar el tiempo que desee y escribir casi cualquier efecto que se le ocurra.

Answer 3

Sí, jQuery puede hacer esto. Para el audio, use la etiqueta de audio de HTML5 con respaldo de flash para Opera & IE.

Cuando cambie img, puede cambiar la url de audio.

Answer 4

Si bien esta nueva y brillante etiqueta de audio en html5, uno realmente no puede usarla hasta que la mayoría de los navegadores de navegación lo soportan. Esto significa que el flash es la única opción para la parte de audio. Aunque creo que usar Flash/Actionscript para toda la aplicación puede ser la manera más fácil en la que también puedes usar múltiples tecnologías. Puedo recomendar Soundmanger como una biblioteca de javascript muy conveniente para controlar el audio. Funciona con una pequeña película flash que realmente reproduce el clip, pero oculta toda la interfaz detrás de una buena API (también incluye un montón de eventos).

Así que este puede ser su servidor de audio. Para controlar toda la escena, ciertamente elegiría jQuery, pero eso es cuestión de gusto. La manera más fácil sería buscar un archivo JSON (y "evaluarlo" o analizarlo con JSON2 Script) que contiene todas las URL de imagen y audio (o generarlo directamente en el código js o algo así). Alimente su instancia Soundmanager con los clips recuperados, precargue algunas o todas sus imágenes y listo.

Cuando se trata de efectos de transición de imagen, puede hacer mucho con jQuery/JS/HTML, pero puede hacer MUCHO más con Flash, lo que lleva a mi sugerencia inicial de utilizar Flash y ActionScript para todo el proyecto.

Espero que esto ayude un poco, ¡buena suerte!

p.s. Here is an example de javascript/sincronización de audio. La página intenta imitar un registro de música (desafortunadamente en alemán), espere a que termine una canción;).

Answer 5

Probablemente sea exagerado pero si un jugador redistribuible es un criterio clave, puede intentar usar Unity. El reproductor web es free and freely redistributable.