Was sind die Möglichkeiten für eine Browser-agnostische Art, eine Web-Slideshow mit Audio zu machen?

8

Ich habe eine Anforderung, um eine Anwendung zu erstellen, die eine Web-Diashow erstellen wird.

Es muss in der Lage sein, phantasievolle Ü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 hat seine eigene Tonspur).

Es muss auch mit einem Programm erstellt werden, also keine ausgefallenen GUI-Designer-Tools - Ich möchte nur XML- oder Nur-Text-Dateien generieren, die entweder direkt in einen Browser geladen (a la jQuery) oder mit einem kompiliert werden können frei verteilbares Werkzeug (a la Open Laszlo).

Meine bisherige Webarbeit war J2EE, aber ich denke, es ist an der Zeit, einige der umfangreicheren clientseitigen Tools auszuprobieren. Ich habe einen kurzen Blick in Open Laszlo und jQuery geworfen, aber ich bin mir nicht sicher, wie ich die Folien mit dem Audio synchronisieren würde. Der grundlegende Prozess wird sein:

  • Starten Sie die Audiospur.
  • Übergang zum Bild.
  • warten Sie, bis die Audiospur fertig ist.
  • spülen und wiederholen.

Ist das mit jQuery möglich? Es scheint eine riesige Menge an DOM-Manipulationskram zu geben, aber ich kann nichts Offensichtliches über die Audiosynchronisation finden.

Ich bin offen für andere Vorschläge, wenn Sie sie haben, aber die Voraussetzung für frei verteilbare Tools ist ein absolutes. Dies wird wahrscheinlich die Mehrheit der Adobe Flash-Lösungen ausschließen.

    
paxdiablo 31.12.2009, 14:21
quelle

5 Antworten

3

Ich empfehle jPlayer Ссылка als Audio-Event-Handler. jPlayer ist großartig, weil es auch HTML5 Audio unterstützt.

Sie können dann die onSoundComplete -Rückruffunktion innerhalb von jPlayer verwenden, um eine Bildänderung auszulösen. Es gibt zu viele Bild Scroller / Slideshow jQuery zu listen, aber persönlich mag ich Cycle: Ссылка

    
webguydan 05.01.2010, 01:04
quelle
2

Während es in html5 dieses neue helle und glänzende Audio-Tag gibt, kann man es wirklich nicht verwenden, bis die meisten Surfer-Browser es unterstützen. Dies 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 einfache Weg ist, können Sie auch mehrere Technologien verwenden. Ich kann Soundmanger als sehr bequeme Javascript-Bibliothek zur Steuerung von Audio empfehlen. Es funktioniert mit einem winzigen Flash-Film, der den Clip tatsächlich abspielt, aber alle Schnittstellen hinter einer schönen API verbirgt (enthält auch eine Reihe von Ereignissen).

Das könnte also Ihr Audio-Backend sein. Für die Kontrolle der ganzen Szene würde ich zwar jQuery wählen, aber das ist Geschmackssache. Der einfachste Weg wäre, eine JSON-Datei zu holen (und entweder "eval" oder "parsen" mit JSON2-Skript ), die alle enthält die Bild-und Audio-URLs (oder generieren Sie es direkt in Ihrem js-Code oder etwas). Füttern Sie Ihre Soundmanager-Instanz mit den abgerufenen Clips, laden Sie einige oder alle Ihrer Bilder vor und schon können Sie loslegen.

Wenn es um Bildübergangseffekte geht, können Sie viel mit jQuery / JS / HTML machen, aber Sie können VIEL MEHR mit Flash machen, was zu meinem ersten Vorschlag führt, Flash und ActionScript für das gesamte Projekt zu verwenden.

Hoffentlich hilft das ein bisschen, viel Glück!

ps. Hier ist ein Beispiel von Javascript / Audio Synchronisation. Die Seite versucht, eine Musikaufzeichnung nachzuahmen (auf Deutsch leider), warten, bis ein Lied zu Ende ist;).

    
jek 04.01.2010 16:42
quelle
0

Sie können es in ActionScript 3 mit den Flex-Bibliotheken schreiben (das SDK ist kostenlos). Ich kenne keine andere Option hier, besonders in Anbetracht der Synchronisation mit Audio-Anforderung.

Mit AS3 können Sie eine XML-Datei laden, die Ihre Diashow beschreibt, die entsprechenden Assets herunterladen, das gewünschte Timing verwenden und so viele Effekte wie möglich schreiben.

    
rfunduk 31.12.2009 14:41
quelle
0

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

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

    
myfreeweb 31.12.2009 14:42
quelle
0

Es ist wahrscheinlich zu viel, aber wenn ein weiterverteilbarer Spieler ein Schlüsselkriterium ist, könntest du versuchen, Unity zu verwenden. Der Web-Player ist kostenlos und frei verteilbar .

    
nathanchere 05.01.2010 03:59
quelle

Tags und Links