Beispiel 1: Noten abspielen

Dieses kleine Notenblatt zeigt den Anfang der Melodie des Kinderliedes
»Hänschen Klein«. Sie können sich die Töne einzeln anhören:

• Zeigen Sie mit der Maus auf die Note im Notenblatt, die Sie hören möchten.

Beispiel 2: Ein kleines Computer-Spiel mit Sound-Ereignissen

SCHIFFE VERSENKEN

 

Wer kennt ihn nicht, den Klassiker aus der Schulzeit?
Ihr Computer ist ein geduldiger und fairer Gegner.

Die Javascript-Funktion

Wir benötigen nur eine einfache Javascript-Funktion, die zwei Kernelemente enthält:

• einen HTML-String, der die Sound-Datei lädt und ausführt
• eine Javascript-Anweisung, die den HTML-String dynamisch in die HTML-Seite an den gewünschten Ort einbindet.

 
function show_SoundMessage() {
  var soundfile = "path/soundfile.mp3";
  var sound_id = "soundbox";
  var sound_message = "<";
  sound_message += 'embed src="' + soundfile + '" autostart="true" 
 loop="false" hidden="true" height="0" width="0"';
  sound_message += ">";
  document.getElementById(sound_id).innerHTML = sound_message;
}
 

Erläuterung:

• Der Variablen soundfile weisen wir zunächst den richtigen Dateinamen zu. In der Variablen sound_id wird der id-Wert des HTML-Elements gespeichert, das den dynamischen Inhalt bekommen soll.
• Der HTML-String in sound_message bindet die Datei ein (embeded), startet sie automatisch (autostart), spielt sie nur einmal ab (loop), zeigt keine Player-Steuerung an (hidden) und reserviert keinen Anzeigeplatz in der Ausgabe (height, width).
  
  Anmerkung: Die Wertzuweisung für sound_message kann selbstverständlich in einer einzigen Anweisung erfolgen. Sie musste in diesem Beispiel-Code nur deshalb in drei Schritten vorgenommen wer­den, weil ansonsten der Windows Explorer 8 den Text während der Ausführung tatsächlich als embeded Code interpretiert, was zu einem Fehler führen würde.

• Schließlich wird der HTML-String mit document.getElementById(sound_id).innerHTML in den Inhaltsbereich des Tags geschrieben, der mit sound_id bezeichnet ist.
  Vorsicht: Die Funktion überschreibt den Inhaltsbereich des Tags vollständig!

Die Funktion in HTML einbinden

Die Javascript-Funktion kann im head-Bereich
der HTML-Seite gespeichert wer­den:

 
<script type="text/javascript" ><!--
// Hier die Funktion einkopieren!
--></script>
  

Sie können die Funktion auch in einer gesonderten Datei mit der Endung .js speichern und über den Dateinamen im head-Bereich Ihrer HTML-Seite einbinden:

 
<script src="meine_sound_funktion.js" type="text/javascript"></script>
 

Der HTML-Code für den Funktionsaufruf

Nun müssen wir die Funktion im HTML-Code aufrufen.
Dazu brauchen wir

• ein HTML-Element mit dem Attribut id="..."
• und ein auslösendes Ereignis, in diesem Fall ein Maus-Ereignis

Das geht beispielsweise so:

 
<!-- Beispiel 1 -->
<img src="pic.png" alt="" width="32" height="32" 
onmouseover="show_SoundMessage()">
<div id="soundbox"></div>

 
<!-- Beispiel 2 -->
<a href="javascript:show_SoundMessage()">Klick mich!</a>
<td id="soundbox"></td>
 

Damit sind wir auch schon fertig!

Das auslösende Ereignis

Das auslösende Ereignis ist hier jeweils ein Maus-Ereignis. Selbstverständlich kann es auch das Ergebnis einer Berechnung, eines Zählerstandes oder eines Dateiinhalts usw. sein. Das allerdings muss jeweils anwendungsspezifisch programmiert wer­den.

Unser Notenblatt-Beispiel ist nur geringfügig aufwendiger: Es enthält im Grunde nur diese Funktion, aber sie ist leicht erweitert und arbeitet mit zwei getrennten Ausgaben.

Ein Ausgabebereich (zugewiesen über id) nimmt den Sound auf wie oben beschrieben, ein zweiter bekommt gleichzeitig eine Textnachricht. Wird ein Notenbild (png) mit der Maus überfahren (onmouseover) wird abhängig vom Bild eine bestimmte Sound-Datei geladen und es wird eine Nachricht erzeugt. Verlässt die Maus das Bild, wird eine zweite Funktion gerufen, die den Textausgabebereich löscht. Dazu wird ein leerer String an die document-Funktion für den Textbereich – nicht jedoch für den Sound-Bereich! – übergeben.

Zusammenfassung

Sound-Dateien können sehr einfach in HTML-Dateien dynamisch eingebunden wer­den. Der Weg dahin ist einfach. Dafür sind nur wenige Voraussetzungen nötig:

• ein definiertes, auslösendes Ereignis
• eine kleine Javascript-Funktion, die aufgerufen wird, wenn das Ereignis eintritt, und den HTML-Code in die HTML-Seite schreibt
• ein HTML-Element, das mit dem Parameter id eindeutig gekennzeichnet ist, und dessen Inhalt komplett durch den dynamischen Inhalt ersetzt wer­den kann

Wir haben als individuelle Erweiterungen in unseren Beispiel nur wenige Spezialitäten eingebaut:

• es wer­den mehrere unterschiedliche Sound-Dateien geladen und eingebunden
• es gibt einen zweiten Ausgabebereich, der die Textnachricht ausgibt, aber nach dem selben Muster arbeitet
• der Textbereich wird gelöscht, sobald ein zweites Ereignis (hier: onmouseout) eintritt.

Eigene Ideen

Die Grundlagen für viele Anwendungen sind damit geschaffen. Beispielsweise kann man sich von den alert-Boxen trennen, die sehr beliebt waren, um dem Benutzer einen Hinweis zu geben. Nun ist es sehr einfach möglich, nicht nur eine Nachricht an geeigneter Stelle in das Browser-Fenster zu schreiben; der Benutzer kann gleichzeitig mit einem Signalton darauf aufmerksam gemacht wer­den.

Allerdings: Zuviel erwarten darf man nicht! Komplexere Anwendungen – und unser Notenblatt-Beispiel gehört schon dazu! – sollte man nicht mit HTML auf diese Weise lösen. Der Browser benötigt zu viel Zeit, um die Informationen zu generieren, zu laden und auszuführen (Sie wer­den bemerkt haben, dass die Ausgabe der Töne ziemlich träge erscheint). Zudem unterscheiden sich die Browser darin, wie sie Sound-Dateien behandeln. Testen Sie einfach mal unsere Seite in verschiedenen Browsern.

Für die Entwicklung komplexer Anwendungen empfiehlt sich Adobe® Flash. Die SWF-Dateien können zur Laufzeit deutlich einfacher geladen wer­den und um die Wiedergabe kümmert sich der Flash-Player. Damit ist die zuverlässige Wiedergabe in hoher Qualität (was bei Tönen wichtig sein kann) in allen Browsern, die SWF-Dateien unterstützen, sichergestellt.

Viel Erfolg beim Umsetzen Ihrer eigenen Ideen!