Kapitel 14 Musik

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

Die Einbindung von Musik auf Webseiten übt auf viele angehende Webmaster eine eigentümliche Faszination aus. Und so hört man auf vielen Webseiten ein grausames Gedudel, und nicht einmal mit jedem Browser. Auf professionellen Webseiten, insbesondere bei betont seriösen Anbietern, fehlen diese Effekte vollkommen. Hin und wieder sieht man eine Flash-Animation oder einen Shockwave-Film, aber von Musikeinbindung keine Spur. Es gibt hierfür zwei Gründe. Zum einen werden viele kommerzielle Webseiten der Informationen wegen angesurft. Grafiken und Animationen mögen da zwar das Auge locken und der Webseite ein appetitliches Aussehen bescheren, aber Musik hat hier nichts zu suchen – und wird auch schnell eintönig. Lesen Sie einmal einen mehrseitigen Text, und hören Sie dabei eine sich stets wiederholende Melodie (zum Beispiel ein Modern Talking-Album)! Der zweite Grund ist ein betriebswirtschaftlicher. Zwar gibt es ziemlich viele Grafiker, aber Komponisten sind ziemlich rar. Und geklaute Sounddateien findet man zwar auf privaten Seiten, auf kommerziellen Seiten in der Regel nicht.

Warum in diesem Buch das Thema dennoch behandelt wird? Nun, sparsam und vorsichtig eingesetzt, können auch Soundeffekte gut ankommen, vor allem dann, wenn Sie eh viele Multimedia-Elemente auf Ihrer Seite einsetzen. Außerdem erfahren Sie in diesem Kapitel en passant, wie Sie das Vorhandensein gewisser Plugins überprüfen können (nur beim Netscape Navigator): Wie so oft in diesem Buch haben Netscape und Microsoft unterschiedliche Techniken zur Soundeinbindung und -steuerung, und wie so oft werden am Schluss des Kapitels Strategien vorgestellt, das JavaScript-Programm browserunabhängig zu machen.

14.1 Plugins erkennen 

Die Unterstützung von Musik ist kein in den Browsercode eingebautes Feature. Statt dessen verwenden beide Browser jeweils ein Plugin. Beim Netscape heißt dies LiveAudio, beim Internet Explorer ist es ActiveMovie Control oder der installierte Windows Media Player 6.4 oder 7.0. Der Internet Explorer kennt keine Plugins, deswegen kann man bei diesem Browser nicht mit JavaScript auf irgendwelche Plugins zugreifen. Beim Netscape Navigator ist das schon anders.

14.1.1 Zugriff auf Plugins 

Alle Plugins werden beim Netscape Navigator im Array navigator.plugins[] gespeichert. Der Internet Explorer kennt dieses Objekt auch, es ist aber leer. Beim Zugriff gibt es also eine Fehlermeldung, aber man kann keine Werte abfragen. Jedes Element des navitator.plugins[]-Array ist ein Plugin-Objekt. Es hat die folgenden Eigenschaften:

name: Name des Plugins

description: Beschreibung des Plugins

filename: Der lokale Dateiname des Plugins

length: Anzahl der vom Plugin unterstützten MIME-Typen

Ein MIME-Type ist eine Art von Identifikator, die der Webserver den Daten, die er schickt, voranstellt. Bei HTML-Dateien ist dieser MIME-Typ text/html, bei .js-Dateien sollte es text/javascript sein.

Auf ein Plugin kann auf die folgende Art und Weise zugegriffen werden:

navigator.plugins["Plugin-Name"]

navigator.plugins[Index]

Wie immer beginnt die Zählung bei Null, das dritte Plugin hat also den Index Zwei.

Die folgende Schleife gibt alle Plugins aus, die in Ihrem Netscape Navigator installiert sind.

function tag(s) return "<"+s+">" 
tag("TABLE BORDER=1");
for (var i=0; i<navigator.plugins.length; i++){
   document.write(tag("TR") + tag("TD"))
   document.write(navigator.plugins[i].name)
   document.write(tag("/TD"))
   document.write(tag("TD"))
   document.write(navigator.plugins[i].description)
   document.write(tag("/TD"))
   document.write(tag("TD"))
   document.write(navigator.plugins[i].filename)
   document.write(tag("/TD"))
   document.write(tag("TD"))
   document.write(navigator.plugins[i].length)
   document.write(tag("/TD")+tag("/TR"))
}
tag("/TABLE")

14.1.2 Zugriff auf MIME-Typen 

Um auf MIME-Typen zuzugreifen, gibt es ebenfalls mehrere Möglichkeiten:

navigator.plugins["Name"/Index]["Name"]

navigator.plugins["Name"/Index][Index]

navigator.mimeTypes["Name"/Index]

Ein mimeTypes-Objekt, also ein Element des Arrays, hat die folgenden Eigenschaften:

type: Name des MIME-Typs

description: Beschreibung des MIME-Typs

suffixes: Mögliche Dateiendungen der Dateien des MIME-Typs

enabledPlugin: Boolescher Wert, ob es für diesen MIME-Typen ein Plugin im Browser gibt

Mit einer ähnlichen Schleife wie oben lassen sich alle vom Browser akzeptierten MIME-Typen ausgeben; da dies jedoch in der Regel über hundert sind, sollte man dies nicht unbedingt ausprobieren. Vor allem der Netscape braucht beim Rendern von riesigen Tabellen sehr lange, und friert dabei manchmal sogar ein.

14.1.3 Refresh 

Von besonderem Interesse ist noch die Methode plugins.refresh(). Hiermit wird die Liste aller Plugins aktualisiert und gegebenenfalls werden alle Plugins aktiviert. Nach der Installation eines Plugins kann man diese Methode aufrufen. Ein Boolescher Parameter muss übergeben werden. Das hat die folgenden Konsequenzen:

navigator.plugins.refresh(false): Plugins, die normalerweise aktiv wären, werden nicht aktualisiert oder aktiviert.

navigator.plugins.refresh(true): Die gesamte Plugin-Liste wird aktualisiert, und alle Plugins neu gestartet.

Die letztere Variante wird ebenfalls erreicht, wenn kein Parameter an die refresh()-Methode übergeben wird. Wenn Sie – beispielsweise über die Netscape’sche SmartUpdate-Technologie – ein Plugin installieren, und den Browser neu starten müssen, so wird der Benutzer, der das Plugin gerade installiert hat, nicht unbedingt auf Ihre Seite zurückkommen. Den Neustart können Sie sich aber wie gesagt sparen, wenn Sie navigator.plugins.refresh(true) verwenden.

Der Netscape Navigator hat einen Menübefehl Help • About plug-ins bzw. Hilfe • Über Plug-ins, der Ähnliches leistet. In Abbildung 14.1 finden Sie eine Beispielsausgabe.

Abbildung 14.1  Die Plugin-Anzeige des Netscape Navigator

14.2 Zugriff auf Musikdateien 

Der Internet Explorer und Netscape Navigator bieten verschiedene HTML-Tags an, um Musikdateien in HTML-Seiten einzubinden. Ohne sich hier in allzu viele Details zu verlieren: Der kleinste gemeinsame Nenner ist der <EMBED>-Tag. Dieser wird vom Netscape Navigator ab Version 3 sowie im Internet Explorer ab Version 4 unterstützt. Wenn Sie auch beim Internet Explorer 3 Musik verwenden wollen, sollten Sie den <BGSOUND>-Tag verwenden, der aber nicht Thema dieses Kapitels ist.

Obwohl der <EMBED>-Tag von beiden Browsern unterstützt wird, ist die Implementierung der Browser leicht unterschiedlich. Im Folgenden werden einige Methoden aufgezeigt, die häufig benötigt werden, beispielsweise für das Starten und Anhalten der Musik. Außerdem wird aufgezeigt, wie die Musikunterstützung des Browsers mit JavaScript festgestellt werden kann.

14.2.1 Browsertest 

Beim Internet Explorer ist das ActiveMovie Control, das für die Steuerung von Sounddateien zuständig ist, stets installiert, beim Netscape Navigator muss das LiveAudio-Plugin vorliegen (das aber bei der Standardinstallation mitinstalliert wird). Es haben sich die folgenden beiden Methoden durchgesetzt, um zu überprüfen, ob der Browser Soundwiedergabe unterstützt und um welchen Browserhersteller es sich hierbei handelt:

Der (soundfähige) Internet Explorer liegt vor, wenn navigator.plugins existiert (wie erwähnt, es hat zwar keine Eigenschaften oder Methoden, aber das Objekt existiert, wenn die Unterstützung von ActiveX-Controls aktiviert ist) und document.all existiert (dann ist es ein Internet Explorer ab Version 4).

Der (soundfähige) Netscape Navigator liegt vor, wenn navigator.plugins existiert und das LiveAudio-Plugin vorliegt. Man muss die Existenz von navigator.plugins überprüfen, um eine Fehlermeldung in der zweiten, direkten Plugin-Abfrage zu vermeiden. Aufgrund der Short Evaluation funktioniert das auch.

Fassen wir zusammen. Mit dem folgenden Code werden zwei Boolesche Variablen gesetzt, die angeben, ob ein soundfähiger Netscape Navigator oder Internet Explorer vorliegt:

var IE = (navigator.plugins && document.all)
var NN = (navigator.plugins&&navigator.plugins["LiveAudio"])

14.2.2 Soundsteuerung 

Es würde an dieser Stelle zu weit führen, alle Eigenschaften und Methoden des LiveAudio-Plugins und des ActiveMovie Control aufzuführen. Im Alltagsgebrauch sind eh nur ein paar Funktionen nützlich, und diese finden Sie in Tabelle 14.1.

14.2.3 Jukebox 

Mit diesem Hintergrundwissen lässt sich nun eine einfache, browserunabhängige Jukebox programmieren. Wie oben beschrieben, wird der Browsertyp bestimmt. Man kann die Soundwiedergabe anhalten, pausieren und wieder starten sowie den aktuellen Status des <EMBED>-Elements auslesen. Ebenso kann die Lautstärke angepasst werden.

<HTML>
<HEAD>
<TITLE>Soundsteuerung mit JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
//globale Variablen
var IE, NN, musik

function init()
   IE = (navigator.plugins && document.all)
   NN = (navigator.plugins&&navigator.plugins["LiveAudio"])
   musik = document.jukebox
   zeigestatus()

function zeigestatus()
   var s = "unbekannt"
   if (NN)
      if (musik.IsReady())
         s = "Stop"
      if (musik.IsPaused())
         s = "Pause"
      if (musik.IsPlaying())
         s = "Wiedergabe"
   else if (IE)
      var stat = musik.currentState
      if (stat==0)
         s = "Stop"
      if (stat==1)
         s = "Pause"
      if (stat==2)
         s = "Wiedergabe"
   
   if (NN)
      s += " ("+musik.GetVolume()+")"
   else if (IE)
      s += " ("+musik.volume+")"
   document.forms[0].Soundstatus.value = s

function Stop()
   if (NN||IE)
      musik.stop()
      zeigestatus()
   

function Pause()
   if (NN||IE)
      musik.pause()
      zeigestatus()
   

function Start()
   if (NN)
      musik.play(true)
   else if (IE)
      musik.play()
   zeigestatus()

function Lauter()
   if (NN)
      musik.setvol(musik.GetVolume()+5)
   else if (IE)
      musik.volume += 5
   zeigestatus()


function Leiser()
   if (NN)
      musik.setvol(musik.GetVolume()-5)
   else if (IE)
      musik.volume -= 5

   zeigestatus()


//--></SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H3>Jukebox</H3>
<EMBED NAME="jukebox" SRC="musik.mid" AUTOSTART="true"
  MASTERSOUND HIDDEN="true">
<FORM>
<INPUT TYPE="BUTTON" VALUE="Start" onClick="Start()">
<INPUT TYPE="BUTTON" VALUE="Stop" onClick="Stop()">
<INPUT TYPE="BUTTON" VALUE="Pause" onClick="Pause()">
<INPUT TYPE="BUTTON" VALUE="Lauter" onClick="Lauter()">
<INPUT TYPE="BUTTON" VALUE="Leiser" onClick="Leiser()">
<INPUT TYPE="TEXT" NAME="Soundstatus" SIZE="10"
  onFocus="this.blur()">
</FORM>
</BODY>
</HTML>

Abbildung 14.2  Die Jukebox in Aktion

Beachten Sie die interessanten Attribute des <EMBED>-Tags:

NAME gibt den Bezeichner an, unter dem der Container mit JavaScript angesprochen werden kann.

SRC gibt den Dateinamen der Sounddatei an. Wenn Sie mit ein paar MIDI-Files experimentieren wollen, durchsuchen Sie (wenn Sie mit Microsoft Windows arbeiten) mal das Windows-Verzeichnis nach Dateien mit der Endung .mid!

AUTOSTART gibt an, ob die Sounddatei beim Laden der Seite sofort abgespielt werden soll ("true") oder nicht ("false"). Beim Netscape Navigator wird "true" angenommen, wenn nichts angegeben wird; beim Internet Explorer wird standardmäßig von "false" ausgegangen.

HIDDEN gibt an, ob man eine Konsole sieht, die ebenfalls Schaltflächen zum Abspielen und Anhalten der Soundatei anbietet ("false") oder nicht ("true"). Standardmäßig wird der Wert "false" angenommen.

Wenn das Beispiel unter Ihrem Netscape Navigator einfach nicht laufen will, überprüfen Sie bitte in den Einstellungen, ob Java aktiviert ist. Für Plugin-Steuerung benötigt der Netscape Navigator nämlich Java. Man kann übrigens mit navigator.javaEnabled() überprüfen, ob der Benutzer Java eingeschaltet hat (siehe//Kapitel »Java«).