Rheinwerk Computing <openbook>
Rheinwerk Computing - Programming the Net


JavaScript von Christian Wenz
Browserübergreifende Lösungen
JavaScript - Zum Katalog
gp Kapitel 14 Musik
  gp 14.1 Plugins erkennen
  gp 14.2 Zugriff auf Musikdateien

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.


Rheinwerk Computing

14.1 Plugins erkennen  downtop

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.


Rheinwerk Computing

14.1.1 Zugriff auf Plugins  downtop

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:

gp  name: Name des Plugins
gp  description: Beschreibung des Plugins
gp  filename: Der lokale Dateiname des Plugins
gp  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:

gp  navigator.plugins["Plugin-Name"]
gp  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")

Rheinwerk Computing

14.1.2 Zugriff auf MIME-Typen  downtop

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

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

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

gp  type: Name des MIME-Typs
gp  description: Beschreibung des MIME-Typs
gp  suffixes: Mögliche Dateiendungen der Dateien des MIME-Typs
gp  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.


Rheinwerk Computing

14.1.3 Refresh  downtop

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:

gp  navigator.plugins.refresh(false): Plugins, die normalerweise aktiv wären, werden nicht aktualisiert oder aktiviert.
gp  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
Abbildung


Rheinwerk Computing

14.2 Zugriff auf Musikdateien  downtop

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.


Rheinwerk Computing

14.2.1 Browsertest  downtop

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:

gp  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).
gp  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"])

Rheinwerk Computing

14.2.2 Soundsteuerung  downtop

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.

Tabelle 14.1  Die wichtigsten Funktionen zur Soundsteuerung im Überblick
 Funktion Netscape Navigator Internet Explorer
(ActiveMovie)
Internet Explorer (Windows Media Player)
Starten der Wiedergabe play(true) play() play()
Pausieren der Wiedergabe pause() pause() pause()
Stoppen der Wiedergabe stop() stop() stop()
Lautstärke ändern setvol(Lautstärke)
](Methode; aktueller Wert mit GetVolume())
volume (Eigenschaft) volume (Eigenschaft)
Abspielstatus IsReady() (Stop) IsPaused() (Pause) IsPlaying() (Wiedergabe) currentState 0 = Stop,
1 = Pause,
2 = Wiedergabe
PlayState 0 = Stop,
1 = Pause,
2 = Wiedergabe
(Version 6.4)

1 = Stop,
2 = Pause,
3 = Wiedergabe
(Version 7.0)


Rheinwerk Computing

14.2.3 Jukebox  toptop

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
Abbildung

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

gp  NAME gibt den Bezeichner an, unter dem der Container mit JavaScript angesprochen werden kann.
gp  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!
gp  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.
gp  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.
gp  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«).
  

JavaScript

jQuery

Einstieg in JavaScript

Responsive Webdesign

Suchmaschi-
nen-Optimie-
rung




Copyright © Rheinwerk Verlag GmbH 2001 - 2002
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken und speichern. Ansonsten unterliegt das <openbook> denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
Die Veröffentlichung der Inhalte oder Teilen davon bedarf der ausdrücklichen schriftlichen Genehmigung der Rheinwerk Verlag GmbH. Falls Sie Interesse daran haben sollten, die Inhalte auf Ihrer Website oder einer CD anzubieten, melden Sie sich bitte bei: >> Zum Feedback-Formular


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, fon: 0228.42150.0, fax 0228.42150.77, service@rheinwerk-verlag.de