O'Reilly hat den Zoom H4 einem umfangreichen Test unterzogen. Im Artikel Links zu weiteren interessanten Stereo-Aufnahmegeräten mit Flash-Speicher, dem M-Audio MicroTrack 24/96 und dem Edirol R-09. Das seltsame Gerät mit den Bullenfängern vor den Mikros kostet um die 500$. Wegen der Möglichkeit unkomplizierter Stereo-Aufnahmen, die vor allem für Multimedia-Reportagen sehr wichtig sind, scheint mir das Gerät eine interessante Alternative zu meinem bisherigen Wunschgerät, dem Marantz PMD 660, zu sein.
Via SWR

Audio-Slideshows, wie sie z.B. bei der New York Times mehrmals wöchentlich erscheinen, sieht man in Deutschland noch selten. Ein Grund ist der Aufwand, der nötig ist, um solche Beiträge mit Zeitleiste und Navigation einzeln aufzubauen. Ich habe zwar bereits eine einfache Methode gezeigt, um mit SMIL Audio-Slide-Shows zu erstellen, aber diese Beiträge benötigen den Quicktime- oder Real-Player um abgespielt zu werden. Flash hat eine höhere Verbreitung und sich mittlerweile auch als Video-und Audioplayer durchgesetzt.
Die Software Soundslides (39$) von Joe Weiss ist da eine tolle Lösung: Man lädt die Bilder und eine Tonspur, arrangiert alles zeitlich, und auf Knopfdruck hat man eine Audio-Slide-Show mit Navigation und Timeline als .swf-Datei. Eine großartige Idee, wie auch Kollege Fabian Mohr festgestellt hat.
Allerdings war ich schwer enttäuscht, als ich festgestellt habe, dass man nur eine Tonspur laden kann. Im Normalfall benötigt man zwei bis vier Tonspuren: Eine für den Sprecher und/oder die Interviews und ein bis drei für Geräusche, Atmo und/oder Musik. Bei Soundslides kann man das nur als ein fertiges MP3 laden. Schön wäre es gewesen, wenn man einzelne Geräusche auf mehreren Spuren anordnen könnte.
Die Arbeit mit Soundslides stelle ich mir also etwas mühsam vor: Wenn der Beitrag gesprochen ist, muss man die Bilder in Soundslides mit der Sprache synchronisieren. Erst wenn dass passt, kann man die Sekunden der Bildwechsel aus der Zeitleiste von Soundslides notieren und in den Sprachbeitrag an diesen Stelle die Geräusche/Atmo/Musik für einzelne oder mehrere Bilder beimischen. Da dieses Abmischen mit einem externen Schnittprogramm geschehen muss und nicht in Soundslides, muss man sehr korrekt arbeiten. Einfach mal ausprobieren ist mühsam. Auch Feinjustierung, wie z.B. ein Geräusch eine halbe Sekunde vor dem Bildwechsel bereits beizumischen, um den Bildwechsel einzuleiten (wie im Film), stelle ich mir schwierig vor.
Trotzdem hat man mit dieser Software eine revolutionär einfache Möglichkeit, um multimediale Beiträge selbstständig und flott zu produzieren. Die Demoversion ist bis auf eine Einblendung am Anfang übrigens voll funktionsfähig.

Ein Beispiel für einen journalistischen Einsatz der Software ist dieser kurze Beitrag über den Abriss einer Achterbahn in Central Massachusetts, der für eine Lokalzeitung erstellt wurde. Er kombiniert historische Photos, aktuelle Photos (teilweise als Time-Lapse-Sequenzen), einen Sprecher, Interview-Töne und Geräusche. Mehr Beispiele im Forum von Soundslides.com.

Dieser Artikel bezieht sich auf meine Reportage über den bevorstehenden Abriss des Münchner Hauptbahnhofs. Er erklärt die technische Funktionsweise des von mir entwickelten Multimedia-Formats und beschreibt in einem Tutorial, wie man ohne Programmierkenntnisse und ohne Macromedia Flash solche textbasierten Multimedia-Reportagen erstellen kann. Grundkenntnisse in HTML reichen aus.

Technische Details

Um dem Text der Reportage Töne zuordnen zu können, wurde er auf Absätze unterteilt. Diese Absätze sind alle gleich groß, um eine einfachere Steuerung zu erreichen. Sie besitzen außerdem einen ungewöhnlich großen Abstand voneinander, damit sichergestellt wird, dass der Leser den Ton zu hören bekommt, dessen Absatz er gerade liest.

Um einem Absatz eine Tondatei zuzuordnen, wird die Flash-Datei spielen.swf in einem Absatz eingebunden. Sie enthält eine Menge Programmiercode und die Steuerung, die mit Javascript kommuniziert, aber noch nicht die MP3-Datei für den entsprechenden Absatz. Erst bei der Einbindung wird der Flashdatei per Parameter der Dateiname der entsprechenden MP3-Datei mitgeteilt, die mit der Reportage im selben Ordner liegt. Außerdem werden einige Parameter für Lautstärke oder die Anzahl der Wiederholungen angehängt.

Innerhalb des Javascript-Codes wird einem eingebundenen Flash-Objekt ein Start-Absatz und ein End-Absatz zugeordnet. So können Geräusche für einen Absatz spielen, oder für mehrere.

Beim Durchscrollen wird mehrmals pro Sekunde die Position der Seite auf dem Bildschrim abgefragt. Wenn ein Absatz innerhalb des Lesebereichs liegt, sendet Javascript einen Start-Befehl an das entsprechende Flash-Objekt.

Gegenüber der Vorgängerversion habe ich die Technik der Reportage komplett überholt. Mit objektorientiertem Javascript und der Parameterübergabe an Flash habe ich einen weitgehend selbstständigen Ablauf erreicht, durch den sich der Aufwand zum Einfügen von Tondokumenten erheblich reduziert.

Tutorial

Drehbuch

Der Beginn der Reportage muss zwingenderweise ein Drehbuch sein, wie ich es auch bei der Audio-Slideshow mit SMIL empfohlen habe. Dafür habe ich in einem Textverarbeitungs-Programm drei Spalten angelegt: Bild, Text, Ton. Wer ein planender Mensch ist, macht sich dieses Drehbuch bereits vor dem "Drehtag". Ich dagegen habe ein Konzept meiner Reportage ungefähr im Kopf gehabt, und danach erst das Drehbuch erstellt.
Die Bilder werden unbearbeitet in die Spalten links kopiert. Geräusche werden rechts eingetragen. O-Töne sollte man hier paraphrasiert eintragen, damit zwischen Ton und Bild nicht unfreiwillige Komik entsteht. Sehr viel Mühe sollte man für den schriftlichen Text der Reportage in der mittleren Spalte aufbringen. Im Unterschied zu einer Audio-Slideshow oder einem Film ist der Text das Trägermedium, der durch die Geschichte führt. Er muss die Narration enthalten, den Leser bei der Hand nehmen und die Bilder und Töne explizit oder implizit einleiten.

Textaufbau

Bei der Erstellung der HTML-Datei ist es am einfachsten, den Quellcode meiner bestehenden Reportage zu verwenden und abzuändern. Ein leerer Absatz sieht wie folgt aus:

<div class="absatz" id="div1" >
<!--Die grünen Pfeile und die Orientierungsleiste neben einem Absatz-->
<div class="steuer" >
<div class="rauf">
     <a href="javascript:zurueck();">
        <img src="rauf.gif" width="16" height="16" border="0" alt="Nach oben" />
     </a>
</div>
<div class="runter">
     <a href="javascript:weiter();">
        <img src="runter.gif" width="16" height="16" border="0" alt="Nach unten" />
     </a>
</div>
</div>
Hier steht der Inhalt
</div>

Jeder Absatz hat neben seiner Formatierung class="absatz" eine eindeutige ID: dieser heißt div1. Danach folgen die Div-Tags für die grünen Pfeile die gleichzeitig per CSS den grauen Balken produzieren, der als Orientierungsleiste dient: Wenn ein Absatz nur einen Satz enthält, kann der Leser beim Scrollen trotzdem intuitiv den Absatz im Lesebereich positionieren.
Von diesen leeren Absätzen werden jetzt so viele hintereinander eingefügt, wie man benötigt. Der Text und die Bilder werden bei "Hier steht der Inhalt" eingefügt. Die maximale Bildgröße ist in meinem Layout width:480px und height:260. Außerdem werden die IDs hochzählend geändert: div2, div3, div4 usw.
Um das Aussehen der Reportage zu testen, sollte man den Ladescreen vorübergehend deaktivieren. Dazu fügt man im body-Tag zusätzlich zu den anderen Javascript-Funktionen den Befehl laderweg(); ein.

<body onload="initialisieren(); ladenstarten(1); laderweg();">

Steuerkasten einfügen

Überall dort, wo ein Tondokument abgespielt werden soll, bindet man das Flash-Objekt "spielen.swf" ein, das im selben Ordner liegen muss. Sinnvollerweise fügt man es in den Absatz ein, wo es zu spielen beginnen soll, und zwar vor dem Inhalt. Allerdings wird der Startzeitpunkt erst später im Javascript festgelegt. Die Position, an der das Flash-Objekt eingefügt wird, entscheidet also nicht über den Startpunkt. Unser Absatz sieht nun so aus:

<div class="absatz" id="div1" >
<!--Die grünen Pfeile und die Orientierungsleiste neben einem Absatz-->
<div class="steuer" >
<div class="rauf">
     <a href="javascript:zurueck();">
        <img src="rauf.gif" width="16" height="16" border="0" alt="Nach oben" />
     </a>
</div>
<div class="runter">
     <a href="javascript:weiter();">
        <img src="runter.gif" width="16" height="16" border="0" alt="Nach unten" />
     </a>
</div>
</div>
<div class="flashpos">
<object class="flash"
       classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
       codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="ton_1">
       <param name="movie" value="spielen.swf" />
       <param name="play" value="true" />
       <param name="loop" value="false" />
       <param name="quality" value="high" />
       <param name="swLiveConnect" value="true" />
       <embed class="flash"
             play="true"
             swliveconnect="true"
             name="ton_1"
             src="spielen.swf"
             quality="high"
             type="application/x-shockwave-flash"
             pluginspage="http://www.macromedia.com/go/getflashplayer">
       </embed>
</object>
</div>
Hier steht der Inhalt
</div>

Wer schonmal Flash-Objekt eingebunden hat, der weiß, dass hier doppelt eingebunden werden muss: Einmal mit dem object-Tag für den IExplorer und einmal mit embed für Opera und Mozilla/Firefox. Auch wenn die Browser mittlerweile teilweise auch die jeweils andere Einbindung verstehen, empfehle ich, genau meine Einbindung zu verwenden. Ich habe einen halben Tag damit verbracht, verschiedene Einbindungen zu testen und nur bei dieser klappt die Steuerung des Objekts per Javascript für alle Browser.
Das Flash-Objekt wird von einem div-Tag der Klasse "flashpos" umschlossen. Es gibt die Position des Objekts an. Wenn man in einen Absatz zwei Ton-Dokumente einfügt, muss man eines nach oben oder nach unten verschieben, indem man diesem div-Tag eine style-Angabe einfügt, z.B. style="top:30px".
Die Tonobjekte bekommen nun auch alle ihren eindeutigen Namen. Im object geben wir an: id="ton1", im embed dagegen name="ton1".
Bitte beachten, dass der Loop-Parameter des Flash-Objekts auf false stehen muss, selbst wenn das MP3 wiederholt werden soll. Wie man das erreicht erkläre ich im nächsten Absatz.

Einfügen der MP3-Datei und weitere Parameter

Bis jetzt ist aber nur der Steuerungskasten in den Absatz eingefügt worden. Per Parameter müssen wir ihm jetzt mitteilen, welche MP3-Datei er laden soll. Dafür notieren wir hinter spielen.swf einen Parameter, und zwar sowohl im object als auch im embed.

<param name="movie" value="spielen.swf?ton=atmo_aussen_128.mp3" />
...
src="spielen.swf?ton=atmo_aussen_128.mp3

Außerdem stehen nun weitere Parameter zur Verfügung, die mit einem Kaufmanns-Und "&" hinter den Dateinamen gehängt werden. Die komplette Liste der Paramter ist:

ton=atmo_innen.mp3
Gibt das Soundfile an, das gespielt werden soll

fadein=10
fadeout=10
Wenn eingefadet werden soll, gibt fadein die Schritte an, in denen hochgefadet wird. Ein kleine Zahl bedeutet langsames einfaden. Sinnvoll sind Zahlen zwischen 1 und 25.

volmax=30
Beschränkt die Lautstärke auf einen Prozentwert.

loop=1
Spielt das Stück eine bestimmte Anzahl oft ab. Wird nichts angegeben, wird es 9999 mal wiederholt.

titel=Vogelgezwitscher
Zeigt in der Steuerung einen Titel anstatt des MP3-Files an. Hier können Leerzeichen verwendet werden, aber keine Umlaute (damit hat Opera Probleme).

Ein komplettes Beispiel wären also folgende Angaben:

<param name="movie" value="spielen.swf?ton=voegel.mp3&fadein=20&fadeout=20&volmax=70&loop=4&titel=Voegel im Garten" />
...
src="spielen.swf?ton=voegel.mp3&fadein=20&fadeout=20&volmax=70&loop=4&titel=Voegel im Garten"

Praktischerweise sollte man die Parameterangaben erst nur im object oder embed machen, je nachdem ob man die Reportage im IExplorer oder in Opera/Mozilla/Firefox testet. Man wird in den Testläufen noch viel an der Lautstärke und an anderen Parametern justieren. Erst am Schluss kopiert man die Angaben dann in die andere Einbindung.

Einfügen der Objekte in Javascript

Direkt nachdem man eine MP3-Datei auf diese Weise per Flash in einen Absatz eingebunden hat, kann man das Ton-Objekt in Javascript eintragen und einem oder mehreren Absätzen zuordnen. Wie das geht, ist eigentlich selbsterklärend, wenn ich die jeweiligen Absätze aus Javascript hier zeige:

function initialisieren() {
ton_1Obj = new Multimedia("ton_1");
ton_2Obj = new Multimedia("ton_2");
ton_3Obj = new Multimedia("ton_3");
ton_4Obj = new Multimedia("ton_4");
}

function PositionAnz(){
...
ton_1Obj.pruefe("div2","div9");
ton_2Obj.pruefe("div4","div4");
ton_3Obj.pruefe("div5","div5");
ton_4Obj.pruefe("div6","div6");
...
}

Was hier genau abläuft, muss man nicht verstehen. Aber für jedes Ton-Dokument "tonx" müssen wir ein entsprechendes Objekt "tonxObj" in Javascript instanzieren und den Namen bzw. die ID, die wir ihm gegeben haben, angeben. Im zweiten Teil wird angegeben, wann dieses Objekt spielen soll. An erster Stelle steht die ID des Div-Absatzes, an dem es starten soll, im zweiten Teil, wo es stoppen soll.

Wenn auf diese Weise alle Ton-Dokumente per Flash eingefügt worden sind und in Javascript instanziert und Absätzen zugeordnet wurden, müsste die Reportage funktionieren. Allerdings er, wenn man auf den grünen-Start-Button klickt, also nicht vergessen, den Ladescreen wieder zu aktivieren.

Layout verändern

Das Layout der Seite kann problemlos geändert werden, solange nicht die Größe eines Absatzes oder die Leseposition verändert wird. Ändert man die Größe der Absätze, muss einiges beachtet werden. Folgende Details müssen immer aufeinander abgestimmt sein:

• Größe und Position des Lesebereichs, der als Hintergrund-GIF im Body untergebracht ist.
• Die Größe und der Abstand der Textabsätze, die über die Klasse absatz geändert werden.
• Größe und Position der grünen Pfeile und des grauen Orientierungsbalkens.
• Die Position des Steuerungskastens über die Klasse flashpos.
• Die Javascript-Funktionen für Vor- und Zurückblättern: weiter() und zurueck().
• Die Justierung in Javascript für das Starten und Stoppen von Tondokumenten. Diese erfolgt in der Funktion pruefe() und ist im Quelltext kurz dokumentiert.

Debugging-Modus

Falls irgendwas mal nicht klappt: Für Testzwecke ist im spielen.swf ein Debugging-Modus eingerichtet. Dafür muss man die Höhe der Klasse flash im CSS von 60px auf 120px ändern. Dann erscheinen alle Steuerungsfenster im Debugging-Modus und geben Auskunft über übergebene Parameter sowie aktuelle Zustände und Sollzustände.

.flash {
       width:200px;
       height:120px;
       }

Außerdem gibt es noch eine Positionsanzeige, die bei der Feinjustierung der Absätze hilft. Sie zeigt die aktuelle Seitenposition in Pixeln an. Der entsprechende Code ist im HTML (direkt nach dem Body-Tag) und in Javascript (in den Funktionen pruefe() und PositionAnz()) auskommentiert und kann bei Bedarf aktiviert werden.

Ausblick

Ich hoffe, dass dieses Tutorial zu weiteren Experimenten von anderen Journalisten anregt. Weder die technische noch die narrative Seite des Formats ist ausgereizt. Denkbar sind auch kurze Video-Beiträge, die in Absätzen gestartet werden, oder bewegte Flash-Animationen wie zum Beispiel zoomende oder scrollende Photos. Vor allem eine Umstellung der Kommunikation zwischen Actionscript und Javascript auf die ExternalInterface API von Macromedia würde neue Möglichkeiten bieten und das Multimedia-Format vor allem auch für Macintosh-Computer lauffähig machen.

Fab von foto-fish.de hat nach meinem SMIL-Tutorial erste Experimente mit der Multimedia-Technik gemacht: eine kurze mit Ton untermalte Diashow über ein thailändisches Dorfradio. Sehr schön! Ich finde, davon hat man in jedem Fall mehr also von stummen Photos.
Und noch einen Trick hat er endteckt: Wenn man Quicktime Pro besitzt (nehme ich an), kann man SMIL-Dateien laden und anschließend als .mov-Datei speichern. Diese enthält dann auch die Bild- und Tondateien.

Multimedia-Reportagen, wie ich sie hier wöchentlich vorstelle, sind meistens mit Flash gemacht. Dabei muss das gar nicht sein. Vor einigen Tagen habe ich hier eine kleine vertonte Slideshow vorgestellt, die den Aufbau des Oktoberfests in München beschreibt. Mit ein bisschen Know-How kann das jeder ohne viel lernen zu müssen und ohne irgendetwas kaufen zu müssen. Ein Text-Editor reicht aus.
Flash hat den Vorteil, dass die meisten Browser bereits "ab Werk" das Flash-Plugin mit an Bord haben. Aber für Produktion von Flash-Files braucht man das Programm von Macromedia (nicht gerade billig) und eine ordentlich Einarbeitungsphase. Außerdem ist die Produktion aufwendig, weil man Navigationselemente wie Lautstärkenregelung, Ladeanzeige und "Zurückspulen" selber erstellen muss. Ich gehe davon aus, dass dies der Hauptgrund ist, warum Multimedia-Reportagen bei vielen Nachrichtenseiten in Deutschland nicht produziert werden.

Dabei geht es viel einfacher und vor allem kostenlos. Das World Wide Web Consortium hat schon vor Jahren die Multimedia-Sprache SMIL vorgestellt, die im Syntax eine XML-Sprache wie HTML ist und außerdem extrem einfach ist. Das Problem für die geringe Verbreitung ist möglicherweise, dass Webbrowser von sich aus kein SMIL abspielen können. Aber das müssen sie auch gar nicht, denn Quicktime und der Real Player können mit diesen Dokumenten umgehen. Alle Audio-, Video-, Bild oder Text-Dateien, die diese Plugins abspielen können, kann man mit SMIL in die richtige Reihenfolge bringen. Anders als bei Flash-Dateien enthält die SMIL-Datei aber nicht die Bilder und Töne. SMIL legt nur fest, zu welchem Bild welcher Ton kommt, etc. Die Bilder und Töne müssen zusätzlich auf dem Webserver abgelegt werden.

Für mich ist SMIL auch neu, dieses Tutorial sind mehr oder weniger meine dokumentierten Versuche, mit SMIL Multimedia-Reportagen zu erstellen, denn dafür ist diese Sprache prädestiniert. Informiert habe ich mich dabei vor allem bei dem älteren, aber sehr einfachen SMIL Tutorial. Weitere Resourcen und Bücher finden sich auf der offiziellen W3C-Seite.

Grundlegender Aufbau

Wie bei HTML hat eine SMIL-Datei ebenfalls einen Head-Bereich und einen Body. So fängt eine typische SMIL-Datei an:

<smil qt:autoplay="false" >
 <head>
   <meta name="base" content="http://rufposten.de/daten/smil-tutorial/" />
   <layout>
   <root-layout width="500" height="390"
        background-color="white" />
   <region id="loben" left="0" top="0"
        width="500" height="380" />
  </layout>
 </head>

Zu Beginn wird wie bei HTML mit <smil> angezeigt, dass es sich um eine SMIL-Datei handelt. Der Parameter dazu ist speziell für Quicktime und sagt dem Programm, dass es nicht automatisch mit der Slideshow starten soll, sobald die Dateien geladen sind.
Die Meta-Angabe base entspricht der bei HTML: Dem Player wird gesagt, wo er die verwendeten Bild- und Tondateien finden kann. Zum Testen auf dem Rechner daheim kann man diese Angabe weglassen, dann sucht der Player die Dateien im selben Verzeichnis wie die SMIL-Datei selbst. Aber sobald man die SMIL-Datei ins Netz hochlädt, funktioniert das nicht mehr. Dann braucht man diese Angabe also unbedingt. Anschließend wird im Kopf zunächst das Grundlayout mit root-layout bestimmt. Hier wird aber lediglich Höhe und Breite, sowie Hintergrundfarbe angegeben. Diese Angaben richten sich nach der Größe der Bilder, die man anzeigen will. Keine großer Zauberei also.
Danach wird mit region eine Region angelegt. Man kann innerhalb des Root-Layouts verschiedene Felder festlegen, in denen später visuelle Inhalte erscheinen sollen. So könnte man z.B. verschiedene Bilder nebeneinander anzeigen. Weil wir das aber bei Multimedia-Reportagen nicht brauchen, reicht eine Region, in der dann alle Bilder angezeigt werden. Sie ist fast so groß wie die gesamte Anzeigefläche, ich habe sie nur etwas kleiner gemacht, damit die Steuerleiste von Quicktime nicht direkt am Bild klebt. Innerhalb diese Fläche wird das Bild mit null Pixeln Abstand nach links und nach oben gezeigt. Deswegen habe ich sie "loben" genannt, für "links oben".

Nun werden im Body-Bereich die Inhalte in die vorgebene Region platziert. SMIL bietet dabei ein ganz einfach Konzept an, um die Reihenfolge der eingefügten Bild- und Tondateien zu bestimmen. Es kennt das par-Element, innerhalb dessen alle Elemente gleichzeitig angezeigt, bzw. abgespielt werden. Und es kennt das seq-Element, das die Dateien in Reihenfolge abspielt. Für unser Beispiel wollen wir zunächst mal ein Bild anzeigen und gleichzeitig ein passendes Geräusch als MP3-Dateu dazu abspielen.

 <body>
  <par>
   <img src="wiesn_aufbau_-007.jpg"
        alt="Gabelstapler"
        region="loben"
        dur="13s"
        />
   <audio
         src="gabelstapler.mp3"
         alt="Gabelstapler 80kbps"
         dur="13s"
         />
  </par>
 </body>
</smil>

Das Bild und die MP3-Datei sind beide innerhalb des par-Elements, also werden sie gleichzeitig abgespielt. Neben dem src-Attribut, das den Dateinamen bestimmt, wird auch noch die Anzeigedauer mit dur bestimmt. Zusätzlich zu dur könnte man den Start der Anzeige, bzw. des Abspielens auch noch mit begin um eine Sekundenangabe verzögern. Für das Bild wird außerdem die Region bestimmt, in der es angezeigt wird. In diesem Fall ist das die Region "loben", die wir vorher bestimmt haben.

Das war es bereits. Wir sehen und hören nun einen Gabelstapler mit Ton.

Verschachteln von par und seq

Die Audio-Slideshow zum Oktoberfest-Aufbau, die ich anfangs erwähnt hatte, verwendet im Prinzip nichts anderes als die paar Befehle, die ich oben erklärt habe. Da ich in dem Beispiel einen Text zu allen Bildern spreche und zusätzlich einzelne Bilder oder mehrere Bilder mit einem speziellen Hintergrungeräusch unterlegt sind, ergibt sich eine bunte Verschachtelung von par und seq:

<smil qt:autoplay="false">
 <head>
  <meta name="base" content="http://rufposten.de/daten/smil-tutorial/" />
  <layout>
   <root-layout width="500" height="390"
        background-color="white" />
   <region id="loben" left="0" top="0"
        width="500" height="380" />
  </layout>
 </head>
 <body>
  <par>
   <seq>
   <par>
   <img src="eingang.jpg"
        alt="Eingang"
        region="loben"
        begin="0s"
        dur="9s"
         />
   <audio
         src="haemmern.mp3"
         alt="Hämmern"
         dur="9s"
         begin="0s"
         />
   </par>
   <img src="wohnwagen.jpg"
        alt="Wohnwagen"
        region="loben"
        begin="0s"
        dur="6s"
         />
   <img src="achterbahn.jpg"
        alt="Wohnwagen"
        region="loben"
        begin="0s"
        dur="8s"
         />
   <par>
   <img src="saegen.jpg"
        alt="Sägebild"
        region="loben"
        begin="0s"
        dur="10s"
         />
   <audio
         src="saegen.mp3"
         alt="Saegen"
         dur="10s"
         begin="0s"
         />
   </par>
   <img src="braeurosl.jpg"
        alt="Aufkleber Container"
        region="loben"
        begin="0s"
        dur="7s"
         />
   <img src="container.jpg"
        alt="Container ganz"
        region="loben"
        begin="0s"
        dur="10s"
         />
   <par>
   <seq>
   <img src="innen_ganz.jpg"
        alt="Innenansicht"
        region="loben"
        begin="0s"
        dur="12s"
         />
   <img src="innen_baenke.jpg"
        alt="Innenansicht"
        region="loben"
        begin="0s"
        dur="8s"
         />
   <img src="schild.jpg"
        alt="Handwerker mit Schild"
        region="loben"
        begin="0s"
        dur="8s"
         />
   <img src="preis.jpg"
        alt="Preis"
        region="loben"
        begin="0s"
        dur="16s"
         />
   </seq>
   <audio
         src="innenatmo.mp3"
         alt="Innenatmo"
         dur="44s"
         begin="0s"
         />
   </par>
   </seq>
   <audio
         src="sprecher.mp3"
         alt="Gabelstapler 80kbps"
         dur="90s"
         begin="0s"
         />
  </par>
 </body>
</smil>

Das schaut verwirrender aus, als es ist. Wenn man seine eigene Slideshow baut, dann geht man einfach Schritt für Schritt vor. Zunächst kommen mal alle Bilder in eine sequentielle Abfolge, werden also von <seq> und </seq> umfasst. Diese wird dann mit dem Sprecher-MP3 in eine paralelle Abfolge gebracht:

<par>
     <seq>
     Bild 1
     Bild 2
     Bild 3
     ...
     <seq>

     Sprecher.mp3
</par>

Damit ist das grundlegendste erledigt. Anschließend könnte man noch einzelne Bilder, wie im Beispiel das Bild mit dem Arbeiter der Holz sägt, zusätzlich in ein par-Element packen, um ein Hintergrundgeräusch dazu zu spielen. Bei den Bildern aus dem Inneren des Zeltes sind mehrere Bilder mit Ton hinterlegt. Diese mussten dann nochmal in eine Sequenz gelegt werde und dann mit dem MP3 in das par-Element.

Die Audio-Slideshow "timen"

Schließlich muss man nur noch für alle Bildelemente die passenden Zeiten eintragen, so dass der gesprochene Text mit den Bildern harmoniert. In der Praxis bin ich dafür so vorgegangen: Ich habe mir vor dem Erstellen der Reportage ein kleines Storyboard mit meinem Textverarbeitungs-Programm erstellt und einfach alle Bilder übereinander in eine Tabelle gelegt. In der Spalte daneben habe ich zu jedem Bild ein paar Zeilen getextet. Nur so vermeidet man, dass sich eine sogenannte Bild-Text-Schere auftut, dass sich also unfreiwillige Komik oder einfach nur Missverständnisse im Zusammenwirken von Bild und Text ergeben. Diesen Text habe ich dann gesprochen und aufgenommen. Schließlich habe ich abgestoppt, wie lange nun jedes Bild gezeigt werden muss um mit dem Sprecher übereinzustimmen. Diese Werte habe ich dann eingetragen. Wer es ganz genau machen will, der kann übrigens statt einem Zeitwert von z.B. "1s" auch "1000ms" angeben und so auf die Tausendstel-Sekunde genau timen.

Das Einbetten

Es gibt nun zwei Möglichkeiten, diese Diashow online anzubieten. Entweder man gibt dem User über einen Link die SMIL-Datei zum Download und er kann sie sich dann mit dem externen Quicktime-Player oder Real-Player starten. Oder man bettet die Datei mit object in eine HTML-Datei ein.
Ärgerlicherweise bringen beide Formen wieder eine Menge Probleme mit sich, die man umschiffen muss. Anders als der Realplayer registriert sich der Quicktime-Player nämlich bei der Standardinstallation nicht für das SMIL-Dateiformat. Weder der Player noch das Plugin. Das ist vor allem ärgerlich, wenn man bedenkt, dass dieses Programme sich sonst immer um die Zuständigkeit von Dateiformaten streitet und beim Start mitteilt, dass ein anderes Programm die Zuordnungen übernommen habe.
Mit Doppelklick wäre die Datei also nicht zu starten, wenn sie geladen wurde, und auch der Downloaddialog des Browsers würde kein geeignetes Programm zum Abspielen anbieten. Deshalb können wir diese Lösung schonmal ausschließen, weil man nicht erwarten kann, dass alle ihren Quicktime-Player umkonfigurieren. Von dem Realplayer wollen wir gar nicht erst reden, er ist das nervigste, werbeüberladenste Stück Software der Computergeschichte.

Ich empfehle also, die Slideshow in HTML einzubetten und mit einem Plugin abspielen zu lassen. Der Realplayer ist als Plugin auch wesentlich angenehmer, lässt sich gut konfigurieren und wird z.B. auch von Spiegel Online verwendet, um Video abzuspielen.
Aber auch hier haben wir ein Problem. Normalerweise sollte der sogenannte Mime-Type bei einer Einbettung angeben, welcher Art von Datei vorliegt, und der Browser ruft dann das passende Plugin zum Abspielen auf. Für SMIL wäre das die Angabe "application/smil". In einer besseren Welt würde man das bei der Einbettung mit angeben, und dann würde es auf allen Computern laufen, die Realplayer oder Quicktime installiert haben. In der Realität sehen sich aber beide Player in ihrer Standard-Einstellung nicht zuständig für diesen Mime-Typ. Sie spielen dass SMIL-Dokument nur ab, wenn man den Player sozusagen "beim Namen ruft", also mit "video/quicktime" oder mit "audio/x-pn-realaudio-plugin". Man muss sich also entscheiden, welchen Player man beim Leser vermutet. Hier nun die Einbettung:

Einbetten für Quicktime

So sieht die Einbettung für Quicktime aus:

<object
  id="beispiel_2"
  width="500"
  height="406"
  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0">
    <param name="SRC" value="beispiel_2.smil">
    <param name="autoplay" value="false">
    <param name="controller" value ="true">
    <param name="type" value="video/quicktime">
    <param name="pluginspage"
      value="http://www.apple.com/quicktime/download/index.html">
  <embed
    name="beispiel_2"
    width="500"
    height="406"
    src="beispiel_2.smil"
    type="video/quicktime"
    autoplay="false"
    controller="true"
    enablejavascript="true"
    pluginspage="http://www.apple.com/quicktime/download/index.html">
    </embed>
</object>

Das enstpricht der Einbettung von MP3-Dateien mit Quicktime, zu der ich bereits ein Tutorial geschrieben habe. Bei Apple finden sich auch noch weitere Parameter, die die Einbettung von Multimedia-Dateien steuern. Die Höhe von unserem Objekt ist nun übrigens 406. Die Bilder der Slideshow waren ja 380 Pixel hoch, dann haben wir die Slideshow in der SMIL-Datei mit 390 angegeben, damit ein Freiraum zur Steuerleiste entsteht. Und nun kommen nochmals 16 Pixel dazu, das ist die Höhe der Quicktime-Steuerleiste.
Beispiel aufrufen

Einbetten für RealPlayer

So sieht die Einbettung für den RealPlayer aus:

<object
  id="beispiel_2"
  width="500"
  height="390"
  classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
    <param name="SRC" value="beispiel_2.smil">
    <param name="autostart" value="false">
    <param name="console" value="Clip1">
    <param name="controls" value="ImageWindow">
    <param name="type" value="audio/x-pn-realaudio-plugin">
  <embed
    name="beispiel_2"
    width="500"
    height="390"
    src="beispiel_2.smil"
    controls="ImageWindow"
    console="Clip1"
    type="audio/x-pn-realaudio-plugin"
    autostart="false"
    controls="ImageWindow">
    </embed>
</object>

<object
       id="beispiel_2"
       width="500"
       height="45"
       classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
       <param name="controls" value="ControlPanel,StatusBar">
       <param name="console" value="Clip1">
  <embed
    width="500"
    height="45"
    type="audio/x-pn-realaudio-plugin"
    console="Clip1"
    controls="ControlPanel,StatusBar" width="240" height="35">
</object>

Hier ist nun einiges anders. Neben dem bereits erwähnten Mime-Typ sind auch die Parameter für den automatischen Start und die Steuerleiste anders. Auch hier bietet der Hersteller wieder eine umfangreiche Dokumentation aller möglichen Parameter an.
Eine Besonderheit bei der Real-Einbettung ist allerdings, dass die Steuerleiste unabhängig vom Abspielfenster eingebunden werden muss. Deshalb benötigen wir zwei object-Elemente. Die Höhe der Steuerleiste kann man frei wählen, ich fand eine Höhe von 45 Pixeln angenehm. Real bietet auch für die Formatierung der Steuerleiste eine spezielle Dokumentation an.
Beispiel aufrufen

Einbetten für beide Player

Wenn man nun doch beide Player ansprechen will, um die Slideshow für möglichst viele Leute erreichbar zu machen, kann man natürlich einfach zwei HTML-Seiten erstellen und den User dann wählen lassen. Aber dann hat man schon wieder eine Datei mehr. Praktischer geht es mit einer dynamischen Javascript-Lösung, wie ich es bei meinem Beispiel gemacht habe. Der passende Einbettungs-Code wird erst dann ins Browserfenster geschrieben, wenn der Leser auf einen Link geklickt hat.

<script language="JavaScript">
<!--
function quicktime() {
         document.write('<object  id="beispiel_2"  width="500"  height="406"  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  codebase="http:\/\/www.apple.com\/qtactivex\/qtplugin.cab#version=6,0,2,0">    <param name="SRC" value="beispiel_2.smil">    <param name="autoplay" value="true">    <param name="controller" value ="true">    <param name="type" value="video\/quicktime">    <param name="pluginspage"      value="http:\/\/www.apple.com\/quicktime\/download\/index.html">  <embed    name="beispiel_2"    width="500"    height="406"    src="beispiel_2.smil"    type="video\/quicktime"    autoplay="true"    controller="true"    enablejavascript="true"    pluginspage="http:\/\/www.apple.com\/quicktime\/download\/index.html">    <\/embed><\/object> ');
         document.write('.');
}

function realplayer() {
         document.write('<object  id="beispiel_2"  width="500"  height="390"  classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">    <param name="SRC" value="beispiel_2.smil">    <param name="autostart" value="true">    <param name="console" value="Clip1">    <param name="controls" value="ImageWindow">    <param name="type" value="audio\/x-pn-realaudio-plugin">  <embed    name="beispiel_2"    width="500"    height="406"    src="beispiel_2.smil"    controls="ImageWindow"    console="Clip1"    type="audio\/x-pn-realaudio-plugin"    autostart="true"    controls="ImageWindow">    <\/embed><\/object><br \/><object       id="beispiel_2"       width="500"       height="45"       classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">       <param name="controls" value="ControlPanel,StatusBar">       <param name="console" value="Clip1">  <embed    width="500"    height="45"    type="audio\/x-pn-realaudio-plugin"    console="Clip1"    controls="ControlPanel,StatusBar" width="240" height="35"><\/object>');
         document.write('.');
}

         //-->
</script>


<a href="javascript:quicktime();">Audio-Slideshow mit Quicktime abspielen</a><br />
<a href="javascript:realplayer();">Audio-Slideshow mit RealPlayer abspielen</a><br>

Das ganze object-Element muss dabei allerdings in einer Reihe stehen. Diese Variante ist vor allem ausbaufähig: Wer will, automatisiert die Entscheidung für ein Plugin mit einer Javascript-Plugin-Abfrage. Auch die Einbettung könnte man sich erleichtern, indem man Variablen wie Höhe, Breite und SRC-Datei in Variablen schreibt und in alle embed und object-Elemente automatisch einfügen lässt.

Ich hoffe, dass ich mit diesem Tutorial ein paar experimentierfreudige Geschichtenerzähler zu neuen Versuchen auf dem Gebiet des Multimedia Storytellings anregen kann. Wer will, schickt mir die URL von seiner vertonten Bildergeschichte, dann werde ich sie hier in meinem Weblog vorstellen.

Telepolis berichtet über aktuelle Entwicklungen im Bereich Webradio: Jetzt geht es rund im Web!. Der Artikel bespricht neben ersten Tests von 5.1 Surround Radio (Beispiele bei www.tuner2.com) auch Streaming-Technik und die Bandbreiten-Probleme von Webradio. Mit Blick auf die Zukunft werden Technologien wie Multicast oder Peercast erwähnt.

Geräusche und Filme sind sequentielle Medien. Wenn wir mehr als ein Element auf einer Website unterbringen wollen, müssen wir diese irgendwie steuern. Normalerweise geschieht das durch den Anwendet, der z.B. in der Quicktime-Steuerleiste auf Play klickt. Per Javascript kann die Steuerung aber auch über Links, Buttons oder beliebige Grafiken erfolgen. Und schließlich kann man das Starten und Stoppen auch an andere Ereignisse binden, so wie etwa in meiner Multimedia-Entwicklung, in der die Audioelemente nach der Position des Lesers im Text, bzw. des Scrollbalkens, gestartet und gestoppt werden. Hier sollen aber nur die Grundlagen der Technik erklärt werden.

Dazu binden wir einfach wieder ein Quicktime-Element in den HTML-Code ein, wie im letzten Tutorial erklärt. Wichtig ist diesmal die Bezeichnung, die wir dem Objekt mit den entsprechenden HTML-Attributen geben. Dabei müssen wir ein wenig tricksen und dem object-Tag eine Id geben, dem Element-Tag dagegen einen name. Nur dann können wir das Element später in allen Browsern als Element "musik2" ansprechen. Keine Unterstriche verwenden, sonst funktioniert es nicht.
Dieses Element des Dokuments können wir nun mit der Javascript-Methode document.musik2 ansprechen. Dann hängen wir den Befehl zum Abspielen an und verpacken das Ganze in einen Link:

<a href="javascript:document.musik2.Play();">Abspielen</a>

Abspielen
(Jag - Tumbleweed. Ausschnitt, 0:33) ©)

Neben dem abspielen können wir alles mögliche mit diesem Objekt anstellen. Apple bietet uns dazu eine jämmerliche Dokumentation aus dem Jahre 2000 an; in den aktuellen Seiten konnte ich nichts dazu finden. Wir können den lieben Jag mit seiner Bluesgitarre nun stoppen, zurückspulen, die Lautstärke auf 100 oder 200 oder was auch immer setzen (zwischen 0 und 255). Man kann auch zu einer bestimmten Position springen, aber die Dokumentation und überhaupt das ganze Internet schweigt sich dazu aus, wie sich diese Position berechnet. Obiges Beispiel springt zu Position 8000, das Ende der 33 Sekunden Musik liegt bei 20124. Vielleicht kann es jemand ausknobeln, wie sich das berechnet (Zehntelsekunden ?), vielleicht ist es aber auch einfacher, den Schiebregler zu bewegen und die Position dann auszulesen. Außerdem können wir den Kontrollregler aus - und anschalten. Das sollte man aber von vornherein schon bei der Einbettung des Objektes bestimmen. Man hat außerdem eine Menge weiterer Methoden, einer der interessantesten ist dabei noch GetMaxTimeLoaded(), die einem die aktuelle Ladezeit übergibt. Damit könnte man sich mit CSS eine schöne Ladeanzeige basteln, falls man ein MP3-File direkt einbindet.

Aber allein mit der Start- und Stoppfunktion kann man in Verbindung mit Javascript eine Menge spannender Sachen realisieren.

Mit der Maus über das Bild fahren und ein Interview-Ausschnitt (Deutschlandradio) sollte zu hören sein. Dafür wurde der Start- und Stopp-Befehl einfach an einen onMouseover und onMouseout des Bildes geknüpft. Mit dieser Technik könnte man eine schöne Bildreportage erstellen, da es für den Hörer sehr angenehm ist, zuzuhören, während die Augen über ein Bild streifen können. Ich hatte hier bereits eine ähnliche Reportage vorgestellt, in der eine Kunstexpertin Skulpturen bespricht.

Auch ohne Flash kann man also bereits sehr viele interaktive Dinge mit Audio- und Videodateien produzieren. Aber auch hier ist die technische Machbarkeit die eine Seite. Es braucht nun Journalisten oder experimentierfreudige Weblogger, die diese Technik für neue narrative Formen verwenden, die für den Leser wirklich einen Mehrwert darstellen.

In ein bis zwei Wochen werde ich hier im nächsten Tutorial verschiedene Möglichkeiten vorstellen, ohne Flash eine vertonte Diashow im Stil der New York Times Audio Slideshows zu erstellen. Am vielversprechendsten ist dabei die W3C-Multimedia-Sprache SMIL.