Die Möglichkeiten Sound in ein Html Seit einzubauen
Sound bei onClick mit dem Explorer: erste Möglichkeit
Sound bei onClick mit dem Explorer: zweite Möglichkeit
Sound bei onmouseover: Cross browser compatibel für Explorer und Netscape 7.X
Sound bei onClick mit dem Netscape Navigator 4.X

Die Möglichkeiten Sound in ein Html Seit einzubauen

nach oben

Die einfachste Möglichkeit, Sound in eine Html Datei einzubinden ist über den embed Tag. Das Grundprinzip ist denkbar einfach. Wenn man hier clickt erlebt man einen Sound als Hintergrundgeduddel. Niemand hätte nun natürlich ernsthaft zu hoffen gewagt, dass beide Browser für diesen tag diesselben Attribute haben und tatsächlich ist dem natürlich auch nicht so. Bevor wir die Attribute systematisch durchgehen, diskutieren wir noch ein praxisrelevantes Beispiel. Man kann sich wünschen, dass ein bestimmter Sound nur gespielt wird, wenn der User auf einen Hyperlink clickt und die Anwendung, die den Sound abspielt, nicht aufgeblendet wird. Dafür wiederum findet man im Internet Explorer leicht drei Möglichkeiten. Dies cross Browser compatibel zu programmieren ist schwierig, da der Netscape 7 keine Funktionen mehr unterstützt, die das Netscape spezifische RealAudio Plug in ansteuern. Bei Netscape 4.X war dies alles kein Problem, da es bei Netscape 4.X noch möglich war, via embed tag und via spezifische Funktionen (play(), stop() etc.) das Plug in Netscape LiveAudio anzusprechen. Mit dem Netscape 7 wird diese Plug in aber nicht mehr standardmässig ausgeliefert. Das heisst, man kann es zwar nachträglich einbauen und dann auch sounds abspielen, aber man kann diese Sounds nicht mehr über JavaScript steuern. Wir werden unten eine Lösung vorstellen, die sowohl für den Explorer als auch für Netscape 7 funktionniert. Kurz werden wir auch noch auf Netscape 4.X eingehen, obwohl dem wohl nur noch eine geringe praktische Relevanz zukommt.

Sound bei onClick mit dem Explorer: erste Möglichkeit

nach oben

Ein Effekt, den man sich häufig wünschen kann, z.B. wenn man online Sprachkurse entwickelt oder Musikbeispiele zeigen will, ist das Ansteuern einer Sound Datei über einen Hyperlink.

Giovanni Sonatore Andrea interpretiert Carmen
den Barden stoppen ! sofort !!!

Das Programm, mit dem dieser Effekt erzielt wurde, sieht so aus.

<object id="sound" width="0" height="0" classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<param name="FileName" value="carmen.wav">
<param name="PlayCount" value="1">
<param name="AutoStart" value="0">
<param name="ShowControls" value="1">
<param name="ShowDisplay" value="0">
</object>

<script language="javascript">
function ton1()
{
document.getElementById("sound").Run();
}
function ton2()
{
document.getElementById("sound").Stop();
}

</script>
<A href="#" onClick=ton1()>Giovanni Sonatore Andrea interpretiert Carmen</a><br>
<A href="#" onClick=ton2()>den Barden stoppen ! sofort !!!</a><br>

Wie deutlich zu sehen, wurde nicht der embed tag verwendet sondern object. object erlaubt über eine classid als Attribut das Einbinden von ActiveXControls. Die Nummer CLSID:05589FA1-C356-11CE-BF01-00AA0055595A zeigt hierbei auf das ActiveMovie control. Mit width und height kann man angeben, ob der Player gezeigt werden soll oder nicht. Mit den Parametern lassen sich dann am Player verschiedene Einstellungen vornehmen. Beispielhaft einige Einstellungen, die das Aussehen des Players betreffen.

Die anderen Parameter sind eigentlich selbserklärend. Mit

<param name="FileName" value="carmen.wav">

binden wir die dazugehörige Sound Datei ein. Mit

<param name="PlayCount" value="1">

Legen wir fest, wie oft die Datei gespielt werden soll. Mit

<param name="AutoStart" value="0">

bestimmen wir, ob die Datei beim Laden der Seite ohne weiteres Zutun des Users gespielt werden soll (1) oder ob sie erst gespielt werden soll, wenn der User dies über eine Funktion anstößt (0).

Sound bei onClick mit dem Explorer: zweite Möglichkeit

nach oben

Zumindest für den Internet Explorer gibt es noch eine sehr viel simplere Lösung.

anchora più bello ! noch schöner !
Stoppt den Barden

Dieses Programm macht zwar das gleiche wie die Variante oben, ist aber wesentlich simpler.

<SCRIPT language="JavaScript">
function abspielen()
{
if (document.all)
{
document.all.sound.src = "carmen.wav";
}
}
function stoppen2()
{
document.all.sound.src="";
}
</SCRIPT>
<bgsound id="sound">
<A HREF="#" onClick="abspielen()">anchora più bello ! noch schöner !</A> <br>
<A HREF="#" onClick="stoppen2()">Stoppt den Barden</A> <br>

Das Verfahren ist etwas eigenartig. Normalerweise definiert man mit dem bgsound tag eine Hintergrundmusik. Weist man aber keinen Wert zu, dann man nicht via scr Attribut einen Wert zu, dann gibt es naheliegenderweise auch keine Hintergrundmusik. Da das Element aber existiert, kann es angesprochen werden (mit document.all oder document.getElementById(), oder document,getElementByName()[] oder wie auch immer). Dieses Element hat auf jeden Fall die Eigenschaft src (source) und folglich können wir auch nachträglich einen Pfad zu einer Datei zuweisen, was wir in diesem Beispiel tun. Um das Abspielen der Musik zu stoppen, weissen wir anschliessend wieder eine Pfad zu, der allerdings ins nichts führt und nichts kann auch nicht abgespielt werden, so dass das Abspielen der Musik gestoppt wird.

Sound bei onmouseover: Cross browser compatibel für Explorer und Netscape 7.X

nach oben

Dieses Beispiel ist cross browser compatibel und funktionniert mit dem Explorer und mit Netscape 7.X.

spielen stoppen

Wer jetzt meint, dass dieser Skript ganz besonders kompliziert ist, der irrt. Es ist die einfachste Möglichkeit, überhaupt Sound abzuspielen und diese einfache Möglichkeit ist obendrein auch noch cross browser kompatibel. Der Skript, der das produziert sieht so aus.

<script language="javascript">
function stoppen()
{
document.getElementById("toene3").innerHTML="<embed src='nix.wav' loop=false autostart=true mastersound hidden=true><\/embed>";
}
function spielen()
{
document.getElementById("toene3").innerHTML="<embed src='carmen.wav' loop=false autostart=true mastersound hidden=true><\/embed>";
}
</script>
<span id="toene3"></span>
<span onclick=spielen() id="sound7">spielen</span>
<span onclick=stoppen() id="sound7">stoppen</span>

Wie deutlich zu erkennen, ist das die Methode "hau drauf und Ruh is". Wir kümmern uns nicht weiter um irgendwelche Funktionen, mit denen sich der Player steuern lässt. Wir schiessen einfach in den Bereich <span id="toene3"> den embed tag mit den gewünschten Attributen. Wollen wir die Datei abspielen, geben wir als Wert für das Attribut src die entspechende wav Datei an. Um das Abspielen der wav Datei dann zu beenden, geben wir als Wert für das src Attribut eine nichtexistente Datei an, was dann zur Konsequenz hat, dass es nichts zum Abspielen gibt. Das funktionniert mit beiden Browsern. Wie bereits erwähnt, ist Netscape 7.X zwar noch in der Lage, den embed tag zu interpretieren, aber er benötigt hierzu LiveAudio. Dieses wird aber nicht mehr standardmässig mitgeliefert. Das heisst, damit obiger Skript auch unter Netscape lauffähig ist, muss dieses Plug in installiert werden. Sie können dieses Plug in hier downloaden. Um es zu installieren, müssen Sie es dann entzippen und beide Dateien, sowohl die dll als auch die Zip Datei in das Verzeichnis Netscape/Program/Plugins Verzeichnis kopieren. Dann sollte es funktionnieren. Es gilt anzumerken, dass der embed tag kein offizieller Standard ist und vom W3C nie abgesegnet wurde, das heisst er kann sang und klanglos in der Versenkung verschwinden. Wir harren also der Dinge, die das kommen mögen.

Sound bei onClick mit dem Netscape Navigator 4.X

nach oben

Da der Verfasser dieser Seiten auch neuere und neueste Geschichte studiert hat und folglich ein Interesse an geschichtlichen Zusammenhängen hat, wird jetzt auch noch das Verfahren für den Netscape 4.X dargestellt.

spielen
Pause machen
stoppen

Der Unterschied zwischen Pause machen und stoppen besteht darin, dass die Musik bei "Pause machen" anschliessend da weiter spielt, wo sie aufgehört hat. Bei stoppen fängt es wieder von vorne an. Der Skript der das produziert und der nur mit Netscape 4.X funktionniert, sieht so aus.

<script language="JavaScript"> function spielenXX()
{
document.carmen.play();
} function pausieren()
{
document.carmen.pause();
}

function stoppenXX()
{
document.carmen.stop();
}
</script>
<a href="javascript:spielenXX()"> spielen</a><br>
<a href="javascript:pausieren()"> Pause machen </a><br>
<a href="javascript:stoppenXX()">stoppen </a><br>

<embed src="carmen.wav" hidden=true autostart=false loop=false mastersound name="carmen">

Bei Netscape 4.X konnte embed über LiveAudio angesprochen werden und man konnte die Funktionen von LiveAudio wie abspielen der Musik, unterbrechen des Abspielens, stoppen des Abspielens über spezielle JavaScript Funktionen ansteuern. Aus Gründen, die keiner so richtig nachvollziehen kann, wurde das alles im Netscape 7 gestrichen. Aber eigentlich war das gut, man hätte es einfach lassen können.

Fazit: Das Abspielen von Sound wird in den unterschiedlichen Browsern extrem unterschiedlich interpretiert. Weiter kann man sich des Eindrucks nicht erwehren, dass sich die Modelle in Zukunft auch noch ändern werden. Weiter ist das Schicksal des an sich praktischen embed tag ungewiss. Wer also größere Anwendungen schreibt, wie etwa Sprachkurse, der tut wohl gut daran, seine Programme so zu schreiben, dass das Programm, das den Sound abspielt, sich an veränderte Bedingungen anpassen kann.

vorhergehendes Kapitel	nach oben