Audio einfügen: <audio>

3.1 Grundlagen des <audio>-Tags

Der <audio>-Tag in HTML5 wird verwendet, um Audiodateien in eine Webseite einzufügen. Dieses Element unterstützt verschiedene Audioformate und bietet dem Benutzer integrierte Steuerungselemente für Wiedergabe, Pause und Lautstärkeregelung.

Einfachstes Beispiel

Der <audio>-Tag wird mit dem Attribut src verwendet, das den Pfad zur Audiodatei angibt. Es können auch Attribute wie controls hinzugefügt werden, um standardmäßige Steuerungselemente wie Play-, Pause- und Lautstärkeregler anzuzeigen.

    
      <audio src="audiofile.mp3" controls></audio>
    
  

Beispiel mit mehreren Quellen

Um Unterstützung für verschiedene Browser zu gewährleisten, können mehrere Audioquellen mit dem <source>-Tag angegeben werden. Dies ermöglicht es dem Browser, ein unterstütztes Audioformat auszuwählen.

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        Your browser does not support the audio element.
      </audio>
    
  

Attribute des <audio>-Tags

• src: Gibt den Pfad zur Audiodatei an.
• controls: Zeigt Wiedergabesteuerungselemente an
• autoplay: Spielt das Audio automatisch beim Laden der Seite ab
• loop: Wiederholt die Audiowiedergabe nach Abschluss
• muted: Stummschaltet das Audio beim Laden
• preload: Gibt an, wie der Browser das Audio laden soll. Mögliche Werte: none, metadata, auto

3.2 Beispiele für die Nutzung von Attributen

Attribut controls

Das controls-Attribut fügt standardmäßige Steuerungselemente für die Audiowiedergabe hinzu, wie die Schaltflächen "Play", "Pause" und einen Lautstärkeregler. Dieses Attribut macht das Audio-Element interaktiver und benutzerfreundlicher.

Beispiel:

    
      <audio src="audiofile.mp3" controls></audio>
    
  

Attribut autoplay

Das autoplay-Attribut sorgt dafür, dass die Audiodatei automatisch startet, sobald die Seite geladen wird. Dieses Attribut sollte vorsichtig verwendet werden, da unerwartete Audiowiedergabe für Benutzer störend sein kann.

Beispiel:

    
      <audio src="audiofile.mp3" autoplay></audio>
    
  

Attribut loop

Das loop-Attribut gibt an, dass die Audiodatei in einer Endlosschleife abgespielt wird. Dies ist nützlich für Hintergrundmusik oder Soundeffekte, die sich wiederholen sollen.

Beispiel:

    
      <audio src="audiofile.mp3" autoplay loop></audio>
    
  

Attribut muted

Das muted-Attribut schaltet den Ton der Audiodatei beim Laden stumm. Dies kann nützlich sein, wenn du willst, dass Audio standardmäßig ohne Ton abgespielt wird und der Benutzer den Ton bei Bedarf einschalten kann.

    
      <audio src="audiofile.mp3" muted></audio>
    
  

Attribut preload

Das Attribut preload gibt dem Browser an, wie er die Audiodatei beim Laden der Seite laden soll. Es kann einen von drei Werten annehmen:

• none: Der Browser soll das Audio nicht vorab laden
• metadata: Der Browser soll nur Metadaten (Dauer, Größe usw.) laden
• auto: Der Browser soll das Audio vollständig laden, wenn die Seite geladen wird

    
      <audio src="audiofile.mp3" preload="auto"></audio>
    
  

3.3 Unterstützte Audioformate

Um Cross-Browser-Kompatibilität zu gewährleisten, wird empfohlen, mehrere Audioformate zu verwenden. Die gängigsten Formate sind MP3, OGG und WAV. Schauen wir uns diese näher an.

MP3-Format

MP3 (MPEG-1 Audio Layer III) ist eines der populärsten Audioformate. Es wird von den meisten Browsern und Geräten unterstützt. MP3 verwendet verlustbehaftete Komprimierung, was die Dateigröße reduziert und trotzdem eine ziemlich hohe Klangqualität bewahrt.

Beispiel:

    
      <audio src="audiofile.mp3" type="audio/mpeg"></audio>
    
  

OGG-Format

OGG (Ogg Vorbis) ist ein offenes verlustbehaftetes Audio-Komprimierungsformat, das von den meisten modernen Browsern unterstützt wird. Dieses Format bietet gute Klangqualität und wird oft als Alternative zu MP3 verwendet.

Beispiel:

    
      <audio src="audiofile.ogg" type="audio/ogg"></audio>
    
  

WAV-Format

WAV (Waveform Audio File Format) ist ein unkomprimiertes Audioformat, das hohe Klangqualität bietet. Allerdings haben WAV-Dateien eine größere Dateigröße im Vergleich zu MP3 und OGG, weshalb sie im Web weniger verbreitet sind.

Beispiel:

    
      <audio src="audiofile.wav" type="audio/wav"></audio>
    
  

3.4 Formatkompatibilität

Nicht alle Browser unterstützen dieselben Audioformate. Um Cross-Browser-Kompatibilität zu gewährleisten, wird empfohlen, mehrere Audioformate wie MP3, OGG und WAV zu verwenden.

Beispiel mit Unterstützung für mehrere Formate:

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        <source src="audiofile.wav" type="audio/wav">
        Your browser does not support the audio element.
      </audio>
    
  

Barrierefreiheit

Um Barrierefreiheit zu gewährleisten, sollte eine Textalternative bereitgestellt werden, falls der Browser das <audio>-Element oder die Audiodateien nicht unterstützt. Dies kann durch Text zwischen dem öffnenden und schließenden <audio>-Tag erreicht werden.

Beispiel für Barrierefreiheit:

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        <source src="audiofile.wav" type="audio/wav">
        Your browser does not support the audio element.
        You can download the audio file <a href="audiofile.mp3">here</a>.
      </audio>
    
  

Das Verständnis der Möglichkeiten des <audio>-Tags und seiner API hilft dabei, interaktivere und zugänglichere Webseiten zu erstellen.