Welche Möglichkeiten gibt es für eine browserunabhängige Web-Diashow mit Audio?

Question

Ich habe die Anforderung, eine Anwendung zusammenzustellen, die eine Web-Diashow erzeugt.

Es muss in der Lage sein, ausgefallene Übergänge zwischen mehreren Bildern (in einem Browser) zu machen und auch Audio zu liefern, während diese Bilder angezeigt werden. Die Übergänge zwischen den Bildern müssen verzögert werden, bis der Ton fertig ist (jedes Bild wird seine eigene Tonspur haben).

Es muss auch mit einem Programm erstellt werden, also keine ausgefallenen GUI-Designer-Tools - ich möchte in der Lage sein, einfach XML- oder reine Textdateien zu generieren, die entweder direkt in einen Browser geladen (a la jQuery) oder mit einem frei verteilbaren Tool (a la Open Laszlo) kompiliert werden können.

Meine gesamte bisherige Webarbeit war J2EE, aber ich denke, es ist an der Zeit, dass ich einige der reichhaltigeren clientseitigen Tools ausprobiere. Ich habe einen kurzen Blick in Open Laszlo und jQuery geworfen, aber ich bin mir nicht sicher, wie ich die Folien mit dem Ton synchronisieren soll. Der grundlegende Prozess wird sein:

• Audiospur einleiten.
• Übergang zum Bild.
• warten, bis die Tonspur beendet ist.
• ausspülen und wiederholen.

Ist diese Art von Dingen mit jQuery möglich? Es scheint eine riesige Menge von DOM-Manipulation Zeug zu sein, aber ich kann nicht finden, etwas offensichtlich über die Audio-Synchronisation.

Ich bin offen für andere Vorschläge, wenn Sie welche haben, aber die Forderung nach frei verteilbaren Tools ist ein absolutes Muss. Dies wird wahrscheinlich die meisten Lösungen vom Typ Adobe Flash ausschließen.

Answer 1

Ich empfehle jPlayer http://www.happyworm.com/jquery/jplayer/ als Ihren Audio-Event-Handler. jPlayer ist großartig, weil es auch HTML5-Audio unterstützt.

Sie können dann die onSoundComplete Callback-Funktion innerhalb des jPlayers, um einen Bildwechsel auszulösen. Es gibt zu viele Bild Scroller / Slideshow jQuery aufzulisten, aber ich persönlich mag Cycle: http://malsup.com/jquery/cycle/

Answer 2

Es gibt zwar dieses neue, glänzende Audio-Tag in html5, aber man kann es nicht wirklich nutzen, bis die meisten Browser es unterstützen. Das bedeutet, dass Flash die einzige Option für den Audioteil ist. Obwohl ich denke, dass die Verwendung von Flash/Actionscript für die gesamte Anwendung der einfachste Weg ist, kann man auch mehrere Technologien verwenden. Ich kann empfehlen Soundmanger als sehr komfortable Javascript-Bibliothek zur Steuerung von Audio. Es funktioniert mit einem winzigen Flash-Film, der tatsächlich spielt den Clip, aber versteckt alle Schnittstellen hinter einem netten api (enthält eine Reihe von Ereignissen, auch).

Dies könnte also Ihr Audio-Backend sein. Für die Steuerung der gesamten Szene würde ich tatsächlich jQuery wählen, aber das ist Geschmackssache. Am einfachsten wäre es, eine JSON-Datei zu holen (und sie entweder zu "evalisieren" oder zu parsen mit JSON2-Skript ), die alle Bild- und Audio-URLs enthält (oder generieren Sie sie direkt in Ihrem js-Code oder so). Füttern Sie Ihre Soundmanager-Instanz mit den abgerufenen Clips, laden Sie einige oder alle Ihre Bilder vor, und schon sind Sie bereit.

Wenn es um Bildübergangseffekte geht, kann man mit jQuery/JS/HTML eine Menge machen, aber man kann VIEL mehr mit Flash machen, was zu meinem anfänglichen Vorschlag führt, Flash und ActionScript für das gesamte Projekt zu verwenden.

Ich hoffe, das hilft ein bisschen, viel Glück!

p.s. Hier ein Beispiel der Synchronisierung von Javascript und Audio. Die Seite versucht, eine Musikaufnahme zu imitieren (leider in Deutsch), warten Sie auf ein Lied zu beenden ;).

Answer 3

Sie könnten es in ActionScript 3 mit den Flex-Bibliotheken schreiben (das SDK ist kostenlos). Ich kenne keine andere Möglichkeit, vor allem, wenn man die Synchronisation mit dem Ton berücksichtigt.

Mit AS3 können Sie eine XML-Datei laden, die Ihre Diashow beschreibt, die entsprechenden Elemente herunterladen, das Timing nach Belieben einstellen und so ziemlich alle Effekte schreiben, die Ihnen einfallen.

Answer 4

Ja, jQuery kann dies tun. Für Audio verwenden Sie das HTML5-Audio-Tag mit Flash-Fallback für Opera & IE.

Wenn Sie img ändern, können Sie die Audio-URL ändern.

Answer 5

Es ist wahrscheinlich übertrieben, aber wenn ein weiterverteilbarer Player ein wichtiges Kriterium ist, könnten Sie es mit Unity versuchen. Der Webplayer ist kostenlos und frei weiterverteilbar .