Audio-Medien

So wird ein HTML <audio>-Element angezeigt. Die interaktiven Elemente werden vom Browser automatisch eingefügt:

Hier wird die einfache Audio-Datei hz440.mp3 verwendet, die den Standard Kammerton (Frequenz 440Hz) eine Sekunde lang abspielt.



Das HTML <audio>-Element


Die weiteren Kapitel dieser Seite zeigen, dass ein Audio-Objekt noch weit mehr Möglichkeiten bietet, wenn man den Aufwand zur Programmierung (in der Programmiersprache → Javascript) in Kauf nimmt.


Mit dem Attribut controls werden die Bedienungs-Elemente auf der Webseite angezeigt. Wenn man es weglässt, ist der AudioPlayer (mit ↓ Javascript-Programmen) verwendbar, wird jedoch in der Webseite nicht angezeigt.

Im <source>-Element ist der Pfad zur Audio-Datei (hier hz440.mp3) sowie der MIME-Typ (hier audio/mpeg) angegeben. Wenn die angegebene Datei nicht existiert, wird meist weder das Element noch ein Hinweis angezeigt.

Der eingebettete Text (Ihr Browser...) sollte angezeigt werden, wenn ein Browser das <audio>-Element nicht unterstützt. In der Praxis wird in diesem Fall leider weder das Element noch der Text angezeigt.


Typische Werte der Standard-Eigenschaften: Nach dem Laden kann man die Eigenschaften sowohl manuell als auch mit ↓ Javascript-Programmen beliebig ändern.


Beachten sie das Urheber-Recht auf alle verwendeten Medien !
Es gibt Anwalts-Unternehmen, die sich auf das Abzocken spezialisiert haben. Oft werden dazu besonders attraktive Medien als Köder ausgelegt...

Audio-Steuerung mit Javascript


Audio-Element

Steuerung

Sichtbar
Lautstärke: 100%


Mit dem Button Play wird die Funktion audio_play() gestartet. Damit wird das Audio-Objekt 1mal abgespielt.

Mit dem Button Loop wird die Funktion audio_loop() gestartet. Damit wird das Audio-Objekt in einer 'unendlichen' Schleife abgespielt.

Mit dem Button Stop wird die Funktion audio_stop() gestartet. Damit wird das Abspielen abgebrochen.



Audio-Element:<br/>
<audio id="a2" controls="controls">
<source src="ceg.mp3" type="audio/mpeg"/>
</audio>

Steuerung:<br/>
<form name="f2" method="get" action="javascript:do_f2()" onchange="do_f2()">
<input type="checkbox" name="f2cb1" value="1"/>
Sichtbar<br/>
<input name="f2r1" type="range"/>
Lautst&auml;rke: <span id="a2v">100%</span>
</form>

<button onclick="audio_info('a2')"> Info </button>
<button onclick="audio_play('a2')"> Play </button>
<button onclick="audio_loop('a2')"> Loop </button>
<button onclick="audio_stop('a2')"> Stop </button>



Der Javascript Quelltext muss sich in einem <script>-Element befinden:
function audio_info(id) {
var txt = "Information:";
var n = document.getElementById(id);
txt += "\ncontrols = " + n.controls;
txt += "\ncurrentSource = " + n.currentSource;
txt += "\ncurrentTime = " + n.currentTime;
txt += "\nduration = " + n.duration;
txt += "\nloop = " + n.loop;
txt += "\nmuted = " + n.muted;
txt += "\npaused = " + n.paused;
txt += "\nsrc = " + n.src;
txt += "\nvolume = " + n.volume;
alert(txt);
}
Details zur → Anwendung von Javascript Funktionen.



function audio_play(id) {
var n = document.getElementById(id);
n.loop = false;
n.currentTime = 0;
n.play();
}
Im Absatz ↑  HTML dieses Kapitels wird gezeigt, wie man die hier vorgestellten Funktionen anwenden kann: Sie werden durch onclick-Ereignisse (Events) auf HTML <button>-Elemente gestartet.


function audio_loop(id) {
var n = document.getElementById(id);
n.loop = true;
n.currentTime = 0;
n.play();
}
Gängige Browser-Programme fügen zwischen den Wiederholungen eine zwangsweise kurze Pause ein. Das ist für manche Anwendungen (wie in diesem Beispiel) unerwünscht, aber schwierig zu umgehen.



function audio_stop(id) {
var n = document.getElementById(id);
n.pause();
n.loop = false;
n.currentTime = 0;
}


Links:
W3Schools: HTML5-Audio, DOM-Referenz (Eigenschaften, Methoden, Ereignisse), <audio>-Element, <source>-Element
SelfHTML: MultiMedia


Flash

In der Vergangenheit war es wesentlich schwieriger, Audio- und Video-Medien in Webseiten einzubetten. Dazu wurde oft Adobe Flash verwendet.

Diese Technologie verwendet eigene Zusatz-Programme (PlugIns) und erfordert wegen der notorischen Sicherheits-Probleme häufige Updates. Sie wird durch die seit → HTML-Version 5 verfügbaren Medien-Elemente vollständig ersetzt.

Audio-Typen


Test-Beispiele:

audio/x-aiff
audio/mpeg
audio/ogg
audio/wav


In manchen Versionen des Firefox Browsers wurde die schon lange funktionierende Unterstützung für MP3 Audio-Dateien wieder entfernt. Das ist besonders unangenehm, weil davon viele sauber programmierte und bereits getestete Webseiten betroffen sind.
Im Internet werden dagegen verschiedene Maßnahmen vorgeschlagen. Eine meistens aktuelle Liste der MP3-Unterstützung bietet Can I Use.


HTML-Quelltext dieses Beispiels:
<audio controls="controls" class="ct">
<source src="hz440.aiff" type="audio/x-aiff"/>
<source src="hz440.mp3" type="audio/mpeg"/>
<source src="hz440.ogg" type="audio/ogg"/>
<source src="hz440.wav" type="audio/wav"/>
Ihr Browser kann keine Audio-Datei abspielen.
</audio>


Der Aufwand ist allerdings hoch: Man muss das Medium in mehrere Audio-Formate umwandeln und alle Audio-Dateien auf den Webserver laden.
Man kann in den einzelnen Dateien auch unterschiedliche Medien anbieten, wenn man das als sinnvoll erachtet.

Inline-Audio


Moderne Programmiersprachen (Java, Perl, PHP, Python, ...) bieten in spezialisierten Modulen Funktionen zur Audio-Codierung an.

Damit kann man am Server-PC Audio-Daten 'nach Bedarf' herstellen. Das kommt jedoch höchstens für das eigene IntraNet mit wenigen AnwenderInnen in Frage, keinesfalls für das Internet.

Nur solche Programme, die am Client-(Arbeits)-PC ausgeführt werden, sind für die interaktive Herstellung von Inline-Audio-Daten geeignet. Auf Webseiten kann man (nur) → Javascript verwenden, in alleinstehenden Programmen (Apps) z.B. C/C++ oder Java.


Nachteil

Mit einfachen Mitteln kann man nur Daten des Typs → WAV herstellen.

Die benötigte Daten-Menge ist mit ca. 86kiB / Sekunde relativ groß. Die Methode ist daher nur für sehr kurze Medien verwendbar.

Man muss die Daten nicht nur Live berechnen sondern auch nach dem Base64-Verfahren codieren. Javascript bietet dazu derzeit keine brauchbaren Standard-Funktionen, und auch im Internet findet man kaum brauchbare Beispiele.

Beim Abspielen von 'endlosen' Schleifen fügen gängige Browser unerwünschte Pausen ein. Man muss besondere Tricks anwenden, um ein kurzes Audio-Medium einigermaßen sauber mehrmals hintereinander abzuspielen.



Mit Server-Programmen (z.B. in den Programmiersprachen → Perl oder → PHP) kann man Webseiten mit Inline-Audio-Daten herstellen.
Der Aufwand für Rechenzeit und Daten-Transport ist jedoch für das allgemeine Internet viel zu groß.

Wenn man die Inline-Daten mit der Programmiersprache → Javascript erzeugt, dann enthält das <source>-Element anfangs keine Daten. Diese werden erst interaktiv (nach Angaben der AnwenderInnen) erzeugt und mit DOM-Methoden in das Element eingetragen.

Man kann auch andere Binär-Dateien Inline einbetten, z.B. → Pixel-Grafik.