Musik ist heutzutage oft nur Lärm mit Copyright. – Peter Holl

Kapitel 23 Multimedia

Das Einbinden von Multimedia-Inhalten wie Audio und Video in Webseiten wird generell sehr stiefmütterlich behandelt. Allzu aufdringliches Hintergrundgedudel gilt generell als verpönt, und wenn sich jemand doch traut, seine Website musikalisch zu untermalen, werden meistens Kardinalfehler begangen, so dass das Grauen nur im Internet Explorer (oder in dem vom Webmaster bevorzugten Browser) zu hören ist – wobei sich hier die Frage stellt, ob das wirklich ein Nachteil ist.

Doch es soll nicht verschwiegen werden, dass es im World Wide Web viele qualitativ hochwertige Multimedia-Inhalte gibt – wenn man nur lange genug danach sucht. Der Einbau an sich ist schon ein kleines Problem, weil einige populäre HTML-Anleitungen in diesem Punkt einiges an Ungenauigkeiten und Auslassungen aufweisen. Das ist zum Teil verständlich – da wird aus der offiziellen Spezifikation kopiert, und Multimediadaten zum Testen stehen nicht zur Verfügung –, führt aber bei dem- bzw. derjenigen, der bzw. die das umsetzen muss, zu großem Frust.

Das Ziel dieses Kapitels ist nicht, eine große HTML-Einführung abzuliefern, sondern es soll zeigen, wie man mit ein wenig JavaScript die Multimedia-Inhalte steuern kann. Dazu werden zwei Anwendungen vorgestellt, die mit JavaScript manipulierbar sind. Zunächst beschäftigen wir uns mit der herkömmlichen Wiedergabe von Audiodaten über die beim Internet Explorer und Netscape Navigator mitgelieferten Komponenten (ActiveX beim Internet Explorer, Plugins beim Netscape Navigator). Im zweiten Teil wird der Media Player von Microsoft näher beleuchtet: Sie sehen, wie Inhalte für dieses Produkt in Webseiten integriert werden können und wie Sie mit JavaScript das Steuer übernehmen können. Der Media Player kann nicht nur Audio-, sondern auch Videodaten wiedergeben.

Bevor wir in medias res gehen, noch ein kurzer Hinweis: Bei all der Begeisterung für bewegte Bilder und Töne sollten Sie zwei Sachen nie außer Acht lassen:

die Bandbreite des Internetzugangs Ihrer Benutzer

die Leidensfähigkeit Ihrer Benutzer

Halten Sie also die Dateigrößen in einem akzeptablen Rahmen, und verwenden Sie Audio (und Video) nicht um des bloßen Effekts willen, sondern gerade weil es gut zur Seite passt und dennoch nicht aufdringlich ist. Ansonsten sind die Besucher schneller wieder weg, als Ihnen lieb sein kann.

23.1 Musik 

Wenden wir uns zunächst dem Einbau von Sounddaten zu. Die unterstützten Dateiformate sind von bereits installierten Plugins oder Abspielkomponenten der Browser abhängig, insbesondere populäre Formate wie etwa WAV werden nicht immer direkt unterstützt.

Der wohl kleinste gemeinsame Nenner ist hier das .mid-Format; das steht für MIDI. In diesem Format wird nur eine begrenzte Menge an Informationen gespeichert: Welche Tonhöhe hat eine Note, wie laut ist diese Note, wie lange wird sie gehalten, und welches Instrument spielt sie? Das ist auch alles – die Emulation des Instruments muss das Abspielprogramm übernehmen, darüber ist in der Datei nichts ausgesagt. Aus diesem Grund klingen MIDI-Dateien auch immer eher bescheiden, was aber nicht an der Qualität der Datei liegt, sondern an den Beschränkungen des Formats und der mangelnden Qualität der Abspielsoftware.

23.1.1 Einbau in HTML 

Prinzipiell stehen für den Einbau von Multimediadaten mehrere HTML-Tags zur Verfügung. Die verbreitetsten sind <embed> und <object>. <embed> gilt als Netscape-Erfindung und wurde aus Konzessions- und Kompatibilitätsgründen in den Internet Explorer 4 eingebaut (der etwas nach dem Netscape Navigator 3 erschien, in dem das Tag eingeführt wurde). Gleichzeitig hat Microsoft in dieser Internet-Explorer-Version ein weiteres Tag eingeführt, <object>. Das Rennen hat (nicht nur hier) Microsoft gewonnen, <object> ist inzwischen eine offizielle W3C-Empfehlung und wird auch von Mozilla-Browsern unterstützt (allerdings verwenden diese auch immer noch <embed>, sofern notwendig). Für einfache Audiodaten ist mit <embed> jedoch ein kleinster gemeinsamer Nenner gefunden, der sowohl im Internet Explorer als auch im Mozilla funktioniert.

Mozilla wird eigentlich ohne Audio-Plugins ausgeliefert, aber auf den meisten Sytemen ist mindestens ein Sound-Player vorhanden, der sich in den Browser einklinkt.

Eine Audiodatei kann wie folgt (weitestgehend) browserunabhängig eingebaut werden:

<embed name="musik" src="datei.mid"
  autostart="true" hidden="false" mastersound="mastersound"></embed>

An dieser Stelle sollen nur die wichtigsten Attribute vorgestellt werden, in der Praxis gibt es freilich weitere:

autostart: kann entweder auf "true" oder auf "false" gesetzt werden und gibt an, ob die Wiedergabe der Audiodatei sofort nach dem Laden der Seite beginnen soll (dann "true") oder nicht (dann "false").

hidden: kann entweder auf "true" oder auf "false" gesetzt werden und gibt an, ob eine Audiokomponente (inklusive Kontrollelementen zum Starten, Stoppen und Spulen des Dateiinhalts) angezeigt werden soll (dann "false") oder nicht (dann "true").

mastersound: Mozilla-Browser benötigen dieses Attribut, um die Audiodaten wiederzugeben.

name: wie gehabt: Ein Identifikator, über den die Audiokomponente von JavaScript aus angesprochen werden kann. Der Zugriff erfolgt wie gehabt über document.name-Attribut oder ausführlich über document.embeds["name-Attribut"].

23.1.2 Standardkontrollen des Internet Explorers 

Für die Audiowiedergabe ist im Internet Explorer die ActiveMovie-ActiveX-Komponente zuständig, die standardmäßig bei Windows 95 mitgeliefert wurde. Ab Windows 98 tritt an diese Stelle der Windows Media Player (WMP). In den ursprünglich ausgelieferten Versionen von Windows 98 und Windows 98 SE war das Version 6.4. Etwas später – in etwa mit Windows ME – erschien WMP-Version 7, zum Zeitpunkt der Drucklegung dieses Buchs war Version 11 aktuell (als Beta-Version und Vorbote von Windows Vista). Bei der Installation des Windows Media Players (die Versionen ab 7 stehen für alle Windows-Plattformen außer Windows 95 und Windows NT 4 zur Verfügung) wird die zugehörige ActiveX-Komponente gleich in den Internet Explorer integriert. An sich ist das keine schlechte Sache, aber die Ansteuerung der Komponenten ist unterschiedlich.

Die wesentlichen Funktionen zur Ansteuerung von Audiodaten sind die folgenden:

Wiedergabe starten

Wiedergabe anhalten

Wiedergabe pausieren lassen

Das ActiveX-Control von ActiveMovie oder vom Windows Media Player bietet hierzu drei Funktionen an, die bei allen Controls einen identischen Namen tragen:

play() – startet die Wiedergabe (bzw. setzt sie nach dem Pausieren fort).

pause() – hält die Wiedergabe an.

stop() – beendet die Wiedergabe.

Der aktuelle Wiedergabestatus kann ebenfalls abgefragt werden, doch hier unterscheiden sich die ActiveMovie-Komponente und das ActiveX-Control des Media Players. Während die ActiveMovie-Komponente den Status in der Eigenschaft CurrentState speichert, heißt das Gegenstück des Windows Media Players PlayState. Doch damit nicht genug der Unterschiede: Der Windows Media Player Version 6.4 ist in Sachen Wertebereich für die Eigenschaft weitestgehend kompatibel zu ActiveMovie, wie aus der folgenden Tabelle ersichtlich ist.

Mit Version 7 des Media Players hat sich dieses Verhalten leider geändert – die verschiedenen Statuswerte haben jetzt eine andere Bedeutung. In den Versionen 7.1 bis 11 wurde wenigstens nichts geändert, so dass die Hoffnung besteht, dass auch die Komponenten der zukünftigen Media Player ein konsistentes Verhalten zeigen.

Der Nachteil der Inkompatibilität kann aber insofern ausgeglichen werden, als dass der aktuelle Status in der Regel uninteressant ist. Wenn Sie die komplette Steuerung mit JavaScript durchführen, können Sie den Status auch selbst von Hand nachverfolgen, da die Audiodaten alle per Skript gestartet, gestoppt und auf »Pause« gestellt werden.

Die Lautstärke steht in der Eigenschaft volume des ActiveX-Control. Sie haben von JavaScript aus Lese- und Schreibrechte auf diese Eigenschaft, Sie können also die Wiedergabelautstärke per JavaScript ändern:

document.musik.volume += 20;  // 20 Einheiten lauter

Über die Eigenschaft currentPosition können Sie die aktuelle Position des Abspielkopfes bestimmen und auch verändern. Die Maßeinheit sind dabei Sekunden. Folgendes Kommando spult das Band bildlich gesprochen zurück:

document.musik.currentPosition = 0;

Um auf das Gegenstück – das Ende und damit die Länge des Audioclips – zuzugreifen, muss etwas weiter ausgeholt werden.

Es besteht die Möglichkeit, die Wiedergabe an einer bestimmten Stelle starten und an einer anderen, ebenfalls definierten Stelle enden zu lassen. Dies nennt man eine Auswahl (engl. selection), und die zugehörigen Eigenschaften heißen selectionStart (Beginn der Wiedergabe in Sekunden) und selectionEnd (Ende der Wiedergabe in Sekunden). Um also festzustellen, wie lang der Audioclip ist, genügt es, nach dem Laden auf selectionEnd zuzugreifen. Diese Eigenschaft steht erst zur Verfügung, wenn die Audiodatei komplett geladen worden ist; die Eigenschaft ReadyState hat dann den Wert 4.

Zum Abschluss sehen wir uns kurz die letzte wichtige Funktion an: das Laden eines Audioclips. In der Eigenschaft FileName wird der Name der aktuellen Datei gespeichert. Dieser kann auch verändert werden:

document.musik.FileName = "galileo.mid";

23.1.3 Standardkontrollen des Netscape Navigator 

Mit den meisten Netscape- und sogar manchen Mozilla-Versionen wird das LiveAudio-Plugin mitgeliefert. Als Netscape/Mozilla-Plugin besitzt es – im Gegensatz zu ActiveX-Komponenten des Internet Explorers – keine Eigenschaften, sondern erlaubt nur einen Zugriff über Methoden. Das ist kein größeres Problem, denn (fast) alles, was im Internet Explorer mit einer Eigenschaft gesetzt werden kann, findet im Konkurrenzbrowser mit einer Funktion eine Entsprechung.

Ein Wort zum Mozilla: Meistens ist dort kein Audio-Plugin dabei. Das heißt, der Client benötigt ein spezielles Plugin, etwa von Quicktime oder vom Windows Media Player oder vom Real Player. In der Praxis wird aber meistens Flash verwendet, um Audio- (und auch Video-)Daten abzuspielen. In Abschnitt 23.3.3 erfahren Sie mehr zur Ansteuerung per JavaScript. Der Windows Media Player wird in Abschnitt 23.2 genauer behandelt.

Auch bei einem LiveAudio-Plugin können Sie die drei Standardfunktionen – Start, Pause, Stop – aufrufen:

play(loop) – startet die Wiedergabe oder lässt sie (wenn sie pausierte) wieder starten.

pause() – lässt die Wiedergabe pausieren.

stop() – beendet die Wiedergabe.

Zur Abfrage des Wiedergabestatus stehen drei Funktionen zur Verfügung; genau eine davon liefert true, die beiden anderen false:

IsPaused() – gibt an, ob die Wiedergabe pausiert wurde (true) oder nicht (false).

IsPlaying() – gibt an, ob die Audiodatei gerade wiedergegeben wird (true) oder nicht (false).

IsReady() – gibt an, ob das Plugin samt Audiodatei komplett geladen worden ist (true) oder nicht (false).

Die Lautstärke kann nicht über eine Eigenschaft gesetzt werden, sondern hier ist – wie eingangs erwähnt – eine extra Methode erforderlich. Mit setvol() wird die Lautstärke geändert, als Wert sollte eine Zahl von 0 bis 100 angegeben werden, denn das Plugin misst in Prozentpunkten. Die aktuelle Lautstärke wird von der Funktion GetVolume() zurückgeliefert.

document.musik.setvol(document.musik.GetVolume() + 20);
  // 20 Prozentpunkte lauter

Die aktuelle Position innerhalb der Wiedergabe kann mit dem LiveAudio-Plugin nicht bestimmt werden, zumindest nicht von JavaScript aus. Jedoch kann eine Start- und eine Endzeit festgesetzt werden, von bzw. bis zu der die Audiodaten abgespielt werden können. Die zugehörigen Methoden des Plugins heißen start_time() und end_time(), der Parameter ist jeweils die gewünschte Sekundenzahl.

Wenn also zu Sekunde 20 der Audiodatei gesprungen werden soll, kann die Startzeit auf 20 gesetzt werden:

document.musik.start_time(20);

Die mit start_time() und end_time() vorgenommenen Angaben gelten auch für ein wiederholtes Abspielen der Sounddatei. Um die Einstellungen wieder rückgängig zu machen, können die Methoden start_ at_beginning() (macht start_time() rückgängig) und stop_at_end() (macht end_time() rückgängig) aufgerufen werden.

Der Dateiname des aktuellen Clips kann mit der bereits bekannten play()-Funktion geändert werden. Die URL des Clips kann als zweiter Parameter übergeben werden:

document.musik.play(true, "galileo.mid");

23.1.4 Browserunabhängige Ansteuerung 

Um den Audioclip browserunabhängig anzusteuern, muss zunächst festgestellt werden, welche Form von Browser vorliegt.

Der Internet Explorer kann daran erkannt werden, dass window.ActiveX-Object existiert.

Der Netscape- oder Mozilla-Browser muss, um LiveAudio-Daten zu unterstützen, die folgenden Bedingungen erfüllen:

navigator.plugins muss existieren (darf also nicht false zurückliefern). Dann nämlich werden Plugins vom Browser unterstützt.

navigator.plugins["LiveAudio"] muss existieren (darf also nicht false zurückliefern). Dann nämlich ist das LiveAudio-Plugin installiert.

navigator.javaEnabled() muss true zurückliefern – denn ohne Java funktioniert der JavaScript-Zugriff auf das Plugin nicht.

if (navigator.plugins &&
    navigator.plugins["LiveAudio"] &&
    navigator.javaEnabled()) {
   // Code für LiveAudio
} else if (navigator.plugins && document.all) {
   // Code für ActiveMovie / Media Player
}

Um die Erstellung von browserunabhängigen Funktionen zur Soundsteuerung zu erleichtern, werden zwei Hilfsfunktionen geschrieben, die jeweils angeben, ob der Internet-Explorer- oder Netscape-spezifische Code verwendet werden kann:

function sound_nn() {
   return (navigator.plugins &&
           navigator.plugins["LiveAudio"] &&
           navigator.javaEnabled());
}
function sound_ie() {
   return (window.ActiveXObject != null);
}

Die weiteren Funktionen bedienen sich der vorgestellten Hilfsfunktionen. Zunächst ist aber noch ein letzter Vorbereitungsschritt nötig. Das Ziel der Hilfsfunktionen (und der meisten Beispiele in diesem Buch) ist es, möglichst universell einsetzbar zu sein. Aus diesem Grund ist es nicht möglich, innerhalb der Funktionen auf einen »hartkodierten« (also nicht veränderbaren) Namen des Soundelements zuzugreifen. Stattdessen wird vorausgesetzt, dass ein extra Objekt erzeugt worden ist. Dieses Objekt enthält als Eigenschaften unter anderem eine Referenz auf das Soundobjekt, aber auch Verweise auf die einzelnen im Folgenden ausprogrammierten Methoden.

Ein solches Objekt wird mit folgender Anweisung erzeugt:

var o = new sound_obj(ref);

Als Parameter wird eine Referenz auf das Plugin oder das ActiveX-Control übergeben, in der Regel wie zuvor auch via document.embeds["name-Attribut"]. Die Funktion, die das JavaScript-Objekt erstellt, sieht folgendermaßen aus:

function sound_obj(ref) {
   this.obj = ref;
   this.play = sound_play;
   this.pause = sound_pause;
   this.stop = sound_stop;
   this.getVolume = sound_getVolume;
   this.setVolume = sound_setVolume;
   this.start = sound_start;
   this.ende = sound_ende;
   this.startReset = sound_start_reset;
   this.endeReset = sound_ende_reset;
   if (sound_ie()) {
      this.origEnde = 0;
   }
   this.lade = sound_lade_datei;
   return this;
}

Wie Sie sehen, werden in der Funktion eine Reihe von Methoden definiert. Die zugrunde liegenden Hilfsfunktionen für die neuen Methoden werden im Folgenden entwickelt. Über this.obj kann jederzeit auf das Sound-Objekt zugegriffen werden, also das Plugin bzw. die ActiveX-Komponente. Für die ActiveMovie- bzw. Media-Player-Komponente wird in einer Objekteigenschaft abgelegt, welche Länge der Clip ursprünglich hatte.

Beispielsweise müssen Sie bei der Funktion zur Wiedergabe der Audiodatei eine Unterscheidung vornehmen. Wenn ein Parameter (oder mehrere) übergeben werden, muss er an die Methode play() übergeben werden, aber nur, wenn ein Netscape-Browser vorliegt. Wird kein Parameter übergeben, muss als Standardparameter true übergeben werden (denn der Macintosh-Netscape benötigt unbedingt einen Parameter für play()).

function sound_play() {
   if (sound_nn()) {
      var anzParameter = sound_play.arguments.length;
      var param1 = (anzParameter < 1) ? true :
                   sound_play.arguments[0];
      var param2 = (anzParameter < 2) ? null :
                   sound_play.arguments[1];
      if (param2) {
         this.obj.play(param1, param2);
      } else {
         this.obj.play(param1);
      }
   } else if (sound_ie()) {
      this.obj.play();
   }
}

Die Funktionen zum Pausierenlassen und zum Stoppen der Wiedergabe sind da wesentlich leichter zu erstellen – denn die Bezeichnungen sind identisch:

function sound_pause()   {
   if (sound_nn() || sound_ie()) {
      this.obj.pause();
   }
}

function sound_stop()   {
   if (sound_nn() || sound_ie()) {
      this.obj.stop();
   }
}

Für das Lesen und Setzen der Lautstärke muss wieder zwischen den Browsern unterschieden werden. Beim Internet Explorer (sprich: Ac-tiveMovie bzw. Media Player) kann auf die Eigenschaft volume zurückgegriffen werden, Netscapes LiveAudio kennt die Methoden setvol() und GetVolume():

function sound_getVolume()   {
   if (sound_nn()) {
      return this.obj.GetVolume();
   } else if (sound_ie()) {
      return this.obj.volume;
   }
}

function sound_setVolume(v)   {
   if (sound_nn()) {
      this.obj.setvol(v);
   } else if (sound_ie()) {
      this.obj.volume = v;
   }
}

Als Nächstes wenden wir uns der Auswahl eines Abspielbereichs zu: dem Setzen der Start- und Endzeit. Als Parameter verwenden sowohl die Netscape- als auch die Internet Explorer-Methoden Sekunden, so dass keine Umrechnung notwendig ist.

function sound_start(n)   {
   if (sound_nn()) {
      this.obj.start_time(n);
   } else if (sound_ie()) {
      if (this.obj.ReadyState == 4) {
         this.obj.SelectionStart = n;
      }
   }
}

function sound_ende(n)   {
   if (sound_nn()) {
      this.obj.end_time(n);
   } else if (sound_ie()) {
      if (this.obj.ReadyState == 4) {
         if (this.origEnde == 0) {
            this.origEnde = this.obj.SelectionEnd;
         }
         this.obj.SelectionEnd = n;
      }
   }
}

Beachten Sie im obigen Code die folgende Abfrage:

if (this.obj.ReadyState == 4)

Damit wird überprüft, ob die Audiodatei bereits vollständig geladen worden ist. Wenn das nicht der Fall ist, kann nicht auf die Eigenschaft SelectionEnd zugegriffen werden.

Ebenfalls wird in obigem Code der originale Wert von SelectionEnd in der Objekteigenschaft origEnde gespeichert. Der Wert wird später noch benötigt.

Um die von sound_start() und sound_ende() vorgenommenen Einstellungen rückgängig zu machen, werden ebenfalls zwei Funktionen geschrieben. Der Effekt von sound_start() kann sehr leicht aufgehoben werden – die Startzeit wird einfach auf 0 gesetzt:

function sound_start_reset() {
   sound_start(0);
}

Um sound_ende() rückgängig zu machen, muss man sich etwas mehr überlegen. Das Netscape-Plugin bietet die Methode stop_at_end() an, ActiveMovie/Media Player bietet da keinen adäquaten Ersatz. Vielleicht erinnern Sie sich ja – in der Funktion sound_ende() wird die originale Cliplänge in einer Objektvariablen gespeichert. Um also sound_ende() rückgängig zu machen, müssen Sie einfach wieder den alten Wert zuweisen:

function sound_ende_reset() {
   if (sound_nn()) {
      this.obj.stop_at_end();
   } else if (sound_ie()) {
      if (this.origEnde != 0) {
         this.obj.SelectionEnd = this.origEnde;
      }
   }
}

Der letzte Punkt auf unserer Aufgabenliste ist das Laden eines neuen Clips. Bei LiveAudio muss die play()-Funktion aufgerufen werden, beim Internet Explorer die Eigenschaft FileName geändert werden:

function sound_lade_datei(x) {
   if (sound_nn()) {
      this.obj.play(true, x);
   } else if (sound_ie()) {
      this.obj.FileName = x;
   }
}

23.1.5 Anwendung: Wurlitzer 

Mithilfe der entwickelten Hilfsfunktionen lässt sich ohne größeren Aufwand eine funktionsfähige Audio-Jukebox erstellen. Der grafischen Gestaltung sind dabei keine Grenzen gesetzt, das Beispiel an dieser Stelle ist eher spartanisch gehalten:

<html>
<head>
<title>Wurlitzer</title>
<script type="text/javascript" src="multimedia.js"></script>
<script type="text/javascript"><!--
var musik;
function wurlitzer_init() {
   musik = new sound_obj(document.embeds["musik"]);
   document.forms["wurlitzer"].elements["v"].value =
      musik.getVolume();
}
//--></script>
</head>
<body onload="wurlitzer_init();">
<embed name="musik" src="1.mid"
   autostart="true" hidden="true"
   mastersound="mastersound"></embed>
<form name="wurlitzer" onsubmit="return false;">
<a href="javascript:musik.play()">Play</a><br>
<a href="javascript:musik.pause()">Pause</a><br>
<a href="javascript:musik.stop()">Stop</a><br>
<input type="text" name="v" size="2" value="50" />
<a href="javascript:musik.setVolume(parseInt(document.forms['wurlitzer'].elements['v'].value));">
Lautst&auml;rke setzen</a><br />
<input type="text" name="s" size="4" value="0" />
<a href="javascript:musik.start(parseInt(document.forms['wurlitzer'].elements['s'].value));">
Startzeit setzen</a> -
<a href="javascript:musik.startReset();">Startzeit zur&uuml;cksetzen</a><br />
<input type="text" name="e" size="4" value="0" />
<a href="javascript:musik.ende(parseInt(document.forms['wurlitzer'].elements['e'].value));">
Endzeit setzen</a> -
<a href="javascript:musik.endeReset();">Endzeit zur&uuml;cksetzen</a><br />
<input type="text" name="d" size="20" value="1.mid" />
<a href="javascript:musik.lade(document.forms['wurlitzer'].elements['d'].value);">Datei laden</a>
</form>
</body>
</html>

Hier klicken, um das Bild zu Vergrößern

Abbildung 23.1     Eine (grafisch spartanische) Jukebox

Der oben gezeigte Code ist recht geradlinig – auf Mausklick wird die Musikdatei gestartet, gestoppt oder vorübergehend unterbrochen. Die Lautstärke kann in einem Textfeld eingegeben werden, ebenfalls die Start- und Endposition. Der zusätzliche JavaScript-Code erledigt eigentlich nur noch die Kommunikation mit den in multimedia.js definierten Hilfsfunktionen.

Sie dürfen sich jedoch nicht darauf verlassen, dass das oben gezeigte Vorgehen auf jedem System funktioniert – es hängt alles davon ab, ob ein Plugin installiert ist und welches.