Quali sono le opzioni per un modo agnostico per il browser di creare una presentazione Web con audio?

Question

Ho bisogno di mettere insieme un'applicazione che genererà una presentazione di diapositive web.

Deve essere in grado di effettuare transizioni di fantasia tra più immagini (in un browser) e fornire anche audio mentre quelle immagini vengono visualizzate. Le transizioni tra le immagini devono essere ritardate fino al termine dell'audio (ogni immagine avrà la propria traccia audio).

Deve anche essere creato con un programma in modo da non creare fantasiosi strumenti di progettazione GUI - Voglio essere in grado di generare solo file XML o di testo normale che possono essere caricati direttamente in un browser (a la jQuery) o compilati con uno strumento liberamente distribuibile (a la Open Laszlo).

Tutto il mio lavoro sul web fino ad oggi è stato J2EE, ma penso che sia ora di controllare alcuni degli strumenti più ricchi del client. Ho dato una rapida occhiata sia a Open Laszlo che a jQuery, ma non sono sicuro di come procedere per sincronizzare le diapositive con l'audio. Il processo di base sarà:

• kick off traccia audio.
• transizione all'immagine.
• attendere fino al completamento della traccia audio.
• sciacquare e ripetere.

Questo tipo di cose è possibile con jQuery? Sembra che ci sia una quantità enorme di roba di manipolazione del DOM ma non riesco a trovare nulla di ovvio sulla sincronizzazione audio.

Sono aperto ad altri suggerimenti se li avete ma il requisito per gli strumenti liberamente distribuibili è assoluto. Questo probabilmente escluderà la maggior parte delle soluzioni di tipo Adobe Flash.

Answer 1

Raccomando jPlayer http://www.happyworm.com/jquery/jplayer/ come gestore di eventi audio. jPlayer è ottimo perché supporta anche l'audio HTML5.

È quindi possibile utilizzare la funzione onSoundComplete richiamata all'interno JPlayer per innescare un cambiamento di immagine. Ci sono troppe immagini scroller/slideshow jQuery da elencare, ma personalmente mi piace Ciclo: http://malsup.com/jquery/cycle/

Answer 2

Si può scrivere in ActionScript 3 con le librerie Flex (l'SDK è gratuito). Non conosco altre opzioni qui, specialmente considerando la sincronizzazione con i requisiti audio.

Utilizzando AS3 è possibile caricare un file XML che descrive la presentazione, scaricare gli asset appropriati, utilizzare il tempo che si desidera e scrivere praticamente qualsiasi effetto si possa pensare.

Answer 3

Sì, jQuery può farlo. Per l'audio, utilizza il tag audio di HTML5 con flash fallback per Opera & IE.

Quando si cambia img, è possibile modificare l'URL audio.

Answer 4

Mentre c'è questo nuovo tag audio luminoso e lucido in html5, non si può davvero usarlo finché la maggior parte dei navigatori non lo supportano. Ciò significa che il flash è l'unica opzione per la parte audio. Anche se penso che l'uso di Flash/Actionscript per l'intera applicazione possa essere il modo più semplice per utilizzare anche più tecnologie. Posso consigliare Soundmanger come libreria javascript molto comoda per controllare l'audio. Funziona con un piccolo filmato flash che riproduce effettivamente la clip, ma nasconde tutti gli elementi di interfacciamento dietro a una bella API (include anche una serie di eventi).

Quindi questo potrebbe essere il tuo backend audio. Per controllare l'intera scena, sceglierei davvero jQuery, ma è una questione di gusti. Il modo più semplice sarebbe quello di recuperare un file JSON (e "evalarlo" o analizzarlo con JSON2 Script) che contiene tutti gli URL di immagini e audio (o generarlo direttamente nel tuo codice js o qualcosa del genere). Alimenta l'istanza di Soundmanager con le clip recuperate, precarica alcune o tutte le tue immagini e sei pronto per partire.

Quando si tratta di effetti di transizione delle immagini, si può fare molto con jQuery/JS/HTML, ma si può fare MOLTO di più con Flash, che porta al mio suggerimento iniziale di usare Flash e ActionScript per l'intero progetto.

Sperare che questo aiuti un po ', buona fortuna!

p.s. Here is an example di javascript/sincronizzazione audio. La pagina cerca di imitare un record musicale (purtroppo in tedesco), aspetta che finisca una canzone;).

Answer 5

Probabilmente è eccessivo, ma se un giocatore ridistribuibile è un criterio chiave puoi provare a usare Unity. Il web player è free and freely redistributable.