HTML - Das Audioelement

Grundlegende Syntax

Das HTML <audio>-Tag wird verwendet, um Audioinhalte zu einer Webseite hinzuzufügen. Es ist eine einfache Möglichkeit, Audiodateien zu Ihrer Website hinzuzufügen. Das <audio>-Tag benötigt ein src-Attribut, das auf die abzuspielende Audiodatei verweist. Zu den unterstützten Audioformaten gehören MP3, WAV und OGG.

<audio src="pfad/zur/audiodatei.mp3"></audio>

Das src-Attribut teilt dem Browser mit, wo die Audiodatei zu finden ist. Sie können einen relativen Pfad verwenden, wenn die Audiodatei auf demselben Server wie die Webseite gehostet wird, oder eine absolute URL, wenn die Audiodatei auf einem anderen Server gehostet wird.

Sie können auch das type-Attribut verwenden, um dem Browser den MIME-Typ der Audiodatei mitzuteilen. Dies hilft dem Browser zu erkennen, ob er die Audiodatei abspielen kann, bevor er sie herunterlädt.

<audio src="pfad/zur/audiodatei.mp3" type="audio/mpeg"></audio>

Nicht alle Browser unterstützen die gleichen Audioformate. Um sicherzustellen, dass Ihr Audio auf möglichst vielen Geräten funktioniert, können Sie mehrere Audioquellen mit dem <source>-Tag innerhalb des <audio>-Elements bereitstellen.

<audio>
  <source src="pfad/zur/audiodatei.mp3" type="audio/mpeg">
  <source src="pfad/zur/audiodatei.ogg" type="audio/ogg">
  Ihr Browser unterstützt das Audio-Element nicht.
</audio>

In diesem Beispiel versucht der Browser, die erste Quelle (MP3) abzuspielen, und wenn diese nicht unterstützt wird, versucht er die nächste Quelle (OGG). Wenn keines der Audioformate funktioniert, zeigt der Browser den Text "Ihr Browser unterstützt das Audio-Element nicht" an.

Fallback-Inhalte sind wichtig für ältere Browser, die das <audio>-Tag nicht unterstützen. Durch die Bereitstellung alternativer Inhalte können Sie sicherstellen, dass alle Nutzer auf die Informationen Ihrer Webseite zugreifen können, auch wenn sie das Audio nicht hören können.

Attribute

Das HTML <audio>-Tag hat verschiedene Attribute, mit denen Sie steuern können, wie die Audiodatei abgespielt und auf Ihrer Webseite angezeigt wird.

Das controls-Attribut wird verwendet, um Audiosteuerelemente wie Wiedergabe-, Pause- und Lautstärke-Tasten anzuzeigen. Ohne dieses Attribut hat der Audio-Player keine Steuerelemente und Sie können die Audiowiedergabe nicht starten oder stoppen.

<audio src="path/to/audio/file.mp3" controls></audio>

Das autoplay-Attribut lässt die Audiodatei automatisch abspielen, sobald die Webseite geladen ist. Dies kann störend sein, daher sollten Sie dieses Attribut mit Bedacht einsetzen.

<audio src="path/to/audio/file.mp3" autoplay></audio>

Das loop-Attribut lässt die Audiodatei kontinuierlich wiederholen, bis Sie sie stoppen. Dies ist nützlich für Hintergrundmusik oder Soundeffekte.

<audio src="path/to/audio/file.mp3" loop></audio>

Das muted-Attribut legt den anfänglichen Stummschaltungszustand des Audio-Players fest. Das bedeutet, dass die Audiodatei standardmäßig stumm geschaltet ist, wenn die Webseite geladen wird.

<audio src="path/to/audio/file.mp3" muted></audio>

Das preload-Attribut steuert, wie der Browser die Audiodatei laden soll. Es kann einen von drei Werten haben:

<audio src="path/to/audio/file.mp3" preload="auto"></audio>

Mehrere Quellen

Das HTML <audio>-Tag ermöglicht die Angabe mehrerer Audioquellen mithilfe des <source>-Elements. Dies hilft, verschiedene Audioformate bereitzustellen, um sicherzustellen, dass Ihr Audio auf vielen Browsern und Geräten funktioniert.

Um mehrere Quellen zu verwenden, fügen Sie ein oder mehrere <source>-Elemente innerhalb des <audio>-Tags hinzu. Jedes <source>-Element sollte ein src-Attribut haben, das auf die Audiodatei verweist, und ein type-Attribut, das den MIME-Typ des Audioformats angibt.

<audio>
  <source src="path/to/audio/file.mp3" type="audio/mpeg">
  <source src="path/to/audio/file.ogg" type="audio/ogg">
  <source src="path/to/audio/file.wav" type="audio/wav">
  Ihr Browser unterstützt das Audio-Element nicht.
</audio>

In diesem Beispiel versucht der Browser, die erste Quelle (MP3) abzuspielen. Wenn diese nicht unterstützt wird, geht er zur nächsten Quelle (OGG) über und so weiter. Wenn keines der angegebenen Audioformate unterstützt wird, zeigt der Browser den Fallback-Text "Ihr Browser unterstützt das Audio-Element nicht."

Verschiedene Browser unterstützen unterschiedliche Audioformate. Daher ist es wichtig, mehrere Quellen anzugeben, um eine breite Palette von Browsern und Geräten abzudecken. Die gängigsten Audioformate sind:

Beim Angeben mehrerer Quellen sollten Sie diese nach Ihrem bevorzugten Format ordnen. Browser verwenden das erste unterstützte Format, das sie finden. Führen Sie also Ihr bevorzugtes Format zuerst auf.

Stellen Sie auch Fallback-Inhalte für Browser bereit, die das <audio>-Tag überhaupt nicht unterstützen. Fügen Sie Text oder andere HTML-Elemente innerhalb des <audio>-Tags nach den <source>-Elementen hinzu. Dieser Fallback-Inhalt wird nur angezeigt, wenn keine der angegebenen Audioquellen abgespielt werden kann.

Die Verwendung mehrerer <source>-Elemente und die Bereitstellung von Fallback-Inhalten helfen sicherzustellen, dass Ihr Audio auf vielen Browsern und Geräten funktioniert und allen Ihren Besuchern eine gute Benutzererfahrung bietet.

Styling mit CSS

Sie können das Aussehen des HTML <audio>-Elements und seiner Steuerelemente mit CSS ändern. Dies ermöglicht es Ihnen, den Audio-Player an den Stil Ihrer Webseite anzupassen.

Um die Audio-Steuerelemente zu gestalten, können Sie das Pseudo-Element ::-webkit-media-controls verwenden. Dieses Pseudo-Element zielt auf die Standard-Audio-Steuerelemente ab, die vom Browser angezeigt werden.

audio::-webkit-media-controls {
  background-color: #f1f1f1;
  color: #333;
  border-radius: 5px;
  padding: 5px;
}

Die Audio-Steuerelemente erhalten eine hellgraue Hintergrundfarbe, dunkelgraue Textfarbe, abgerundete Ecken und etwas Abstand.

Sie können auch bestimmte Teile der Audio-Steuerelemente gestalten, wie den Wiedergabe-Button, die Fortschrittsleiste und den Lautstärkeregler, indem Sie andere Pseudo-Elemente wie ::-webkit-media-controls-play-button, ::-webkit-media-controls-progress-bar und ::-webkit-media-controls-volume-slider verwenden.

Um das <audio>-Element selbst zu gestalten, können Sie CSS-Eigenschaften wie width, height, background, border und margin verwenden.

audio {
  width: 300px;
  height: 40px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px auto;
}

Das Audio-Element erhält eine feste Breite und Höhe, eine hellgraue Hintergrundfarbe, einen Rahmen, abgerundete Ecken und wird mit der margin-Eigenschaft auf der Seite zentriert.

JavaScript-Interaktion

Das HTML <audio>-Element kann mit JavaScript gesteuert werden. Dies ermöglicht die Erstellung benutzerdefinierter Audio-Player und das Hinzufügen interaktiver Funktionen zu Ihren Webseiten.

Um ein Audio-Element mit JavaScript abzuspielen oder zu pausieren, können Sie die Methoden play() und pause() verwenden. Wählen Sie zuerst das Audio-Element mit einer Methode wie document.querySelector() aus und rufen Sie dann die Methode auf.

<audio id="myAudio" src="path/to/audio/file.mp3"></audio>

<button onclick="playAudio()">Abspielen</button>
<button onclick="pauseAudio()">Pausieren</button>

<script>
  var audio = document.querySelector('#myAudio');

  function playAudio() {
    audio.play();
  }

  function pauseAudio() {
    audio.pause();
  }
</script>

Ein Klick auf den "Abspielen"-Button ruft die Funktion playAudio() auf, die das Audio-Element anhand seiner ID auswählt und die play()-Methode aufruft. Ebenso ruft ein Klick auf den "Pausieren"-Button die Funktion pauseAudio() auf, um das Audio zu pausieren.

Sie können auch die Lautstärke anpassen und zu einer bestimmten Stelle im Audio springen. Die volume-Eigenschaft steuert die Audio-Lautstärke mit Werten von 0 (stumm) bis 1 (maximale Lautstärke). Die currentTime-Eigenschaft setzt oder gibt die aktuelle Wiedergabeposition in Sekunden zurück.

<audio id="myAudio" src="path/to/audio/file.mp3"></audio>

<button onclick="setHalfVolume()">Halbe Lautstärke</button>
<button onclick="seekTo30Seconds()">Zu 30 Sekunden springen</button>

<script>
  var audio = document.querySelector('#myAudio');

  function setHalfVolume() {
    audio.volume = 0.5;
  }

  function seekTo30Seconds() {
    audio.currentTime = 30;
  }
</script>

Ein Klick auf den "Halbe Lautstärke"-Button ruft die Funktion setHalfVolume() auf, die die volume-Eigenschaft des Audio-Elements auf 0,5 (halbe Lautstärke) setzt. Ein Klick auf den "Zu 30 Sekunden springen"-Button ruft die Funktion seekTo30Seconds() auf, die die currentTime-Eigenschaft auf 30 setzt und somit zur 30-Sekunden-Marke im Audio springt.

JavaScript kann auch auf Audio-Ereignisse hören, wie zum Beispiel wenn das Audio startet, pausiert oder endet. Sie können diese Ereignisse nutzen, um Funktionen auszulösen oder die Benutzeroberfläche zu aktualisieren.

<audio id="myAudio" src="path/to/audio/file.mp3"></audio>
<button onclick="playAudio()">Abspielen</button>
<p id="audioStatus"></p>

<script>
  var audio = document.querySelector('#myAudio');
  var status = document.querySelector('#audioStatus');

  function playAudio() {
    audio.play();
  }

  audio.onplay = function() {
    status.textContent = 'Audio wird abgespielt';
  };

  audio.onpause = function() {
    status.textContent = 'Audio ist pausiert';
  };

  audio.onended = function() {
    status.textContent = 'Audio ist beendet';
  };
</script>

Die Ereignis-Listener onplay, onpause und onended werden verwendet, um den Textinhalt des <p>-Elements mit der ID "audioStatus" basierend auf dem aktuellen Zustand des Audios zu aktualisieren. Wenn das Audio startet, ändert sich der Text zu "Audio wird abgespielt". Bei Pause wird "Audio ist pausiert" angezeigt, und wenn das Audio endet, wird "Audio ist beendet" angezeigt.

Durch die Kombination dieser JavaScript-Methoden und -Ereignisse können Sie benutzerdefinierte Audio-Player mit Funktionen wie Abspielen/Pause-Buttons, Lautstärkereglern, Fortschrittsbalken und mehr erstellen. JavaScript bietet Kontrolle über das <audio>-Element und ermöglicht es Ihnen, ansprechende und interaktive Audio-Erlebnisse auf Ihren Webseiten zu gestalten.

Barrierefreiheitsüberlegungen

Beim Hinzufügen von Audioinhalten zu Ihren Webseiten ist es wichtig, an die Barrierefreiheit für alle Nutzer zu denken, einschließlich derjenigen mit Hörbeeinträchtigungen oder Behinderungen. Hier sind einige Möglichkeiten, um Ihre Audioinhalte barrierefreier zu gestalten:

Das Bereitstellen von Transkripten für Ihre Audioinhalte ist eine Möglichkeit, sie für Nutzer zugänglich zu machen, die gehörlos oder schwerhörig sind. Ein Transkript ist eine Textversion des gesprochenen Inhalts in Ihrem Audio. Sie können ein Transkript auf derselben Seite wie Ihren Audio-Player anbieten oder auf eine separate Seite mit dem vollständigen Transkript verlinken.

<audio src="path/to/audio/file.mp3" controls></audio>

<p>
  <a href="transcript.html">Transkript lesen</a>
</p>

Die Verwendung von ARIA-Attributen (Accessible Rich Internet Applications) kann auch die Barrierefreiheit Ihres Audio-Players verbessern. ARIA-Attribute liefern zusätzliche Informationen über die Elemente auf Ihrer Seite an assistive Technologien wie Screenreader.

<audio id="myAudio" src="path/to/audio/file.mp3" controls>
  <p>Ihr Browser unterstützt das Audio-Element nicht.</p>
</audio>

<button onclick="playAudio()" aria-controls="myAudio">
  Audio abspielen
</button>

Das Attribut aria-controls wird dem Abspielen-Button hinzugefügt und zeigt an, dass er das Audio-Element mit der ID "myAudio" steuert. Dies hilft Screenreadern, die Beziehung zwischen dem Button und dem Audio-Player zu verstehen.

Hier sind einige bewährte Praktiken für die Erstellung barrierefreier Audio-Player:

<div class="audio-player">
  <audio id="myAudio" src="path/to/audio/file.mp3">
    <p>Ihr Browser unterstützt das Audio-Element nicht.</p>
  </audio>

  <div class="controls">
    <button id="playPause" onclick="togglePlayPause()" aria-controls="myAudio">
      Abspielen/Pause
    </button>
    <input id="volumeSlider" type="range" min="0" max="1" step="0.1" value="1" onchange="adjustVolume()" aria-controls="myAudio">
  </div>

  <div class="transcript">
    <a href="transcript.html">Transkript lesen</a>
  </div>
</div>

Dieses Beispiel zeigt einen Audio-Player mit barrierefreien Funktionen:

• Das <audio>-Element enthält eine Fallback-Nachricht für Browser, die es nicht unterstützen.
• Der Abspielen/Pause-Button und der Lautstärkeregler haben klare Bezeichnungen und aria-controls-Attribute, um sie mit dem Audio-Element zu verknüpfen.
• Der Lautstärkeregler kann mit den Pfeiltasten der Tastatur angepasst werden.
• Ein Link zum Transkript wird unterhalb des Audio-Players bereitgestellt.

Browser-Unterstützung und Fallback-Lösungen

Das HTML <audio>-Element wird von den meisten modernen Webbrowsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge. Ältere Browser unterstützen das <audio>-Tag möglicherweise nicht oder haben nur begrenzte Unterstützung für bestimmte Audioformate.

Um zu überprüfen, ob ein Browser das <audio>-Element unterstützt, können Sie JavaScript verwenden, um die Präsenz des HTMLAudioElement-Objekts zu testen:

if (typeof HTMLAudioElement !== 'undefined') {
  // Browser unterstützt das Audio-Element
} else {
  // Browser unterstützt das Audio-Element nicht
}

Wenn der Browser das <audio>-Element nicht unterstützt, können Sie Fallback-Inhalte innerhalb des <audio>-Tags bereitstellen. Dieser Fallback-Inhalt wird nur angezeigt, wenn der Browser das Audio nicht abspielen kann.

<audio src="pfad/zur/audiodatei.mp3" controls>
  <p>Ihr Browser unterstützt das Audio-Element nicht.</p>
  <a href="pfad/zur/audiodatei.mp3">Audiodatei herunterladen</a>
</audio>

Ein anderer Fallback-Ansatz ist die Verwendung der Elemente <object> oder <embed>, um ein Audio-Player-Plugin wie Flash oder QuickTime einzubetten. Diese Plugins werden jedoch immer seltener und werden von mobilen Geräten nicht unterstützt.

<audio src="pfad/zur/audiodatei.mp3" controls>
  <object type="application/x-shockwave-flash" data="pfad/zum/player.swf?audio=pfad/zur/audiodatei.mp3">
    <param name="movie" value="pfad/zum/player.swf?audio=pfad/zur/audiodatei.mp3">
    <p>Ihr Browser unterstützt weder das Audio-Element noch Flash.</p>
  </object>
</audio>

Um die browserübergreifende Kompatibilität einfacher zu handhaben, können Sie HTML5-Audio-Bibliotheken verwenden, die eine konsistente Audio-Player-Schnittstelle für verschiedene Browser bieten. Einige beliebte Audio-Bibliotheken sind:

Diese Bibliotheken abstrahieren die Unterschiede zwischen Browsern und bieten eine einheitliche Möglichkeit, mit Audio auf Ihren Webseiten zu arbeiten.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js"></script>

<script>
  var sound = new Howl({
    src: ['pfad/zur/audiodatei.mp3', 'pfad/zur/audiodatei.ogg'],
    html5: true,
    onplay: function() {
      console.log('Audio hat begonnen zu spielen');
    },
    onend: function() {
      console.log('Audio wurde vollständig abgespielt');
    }
  });

  sound.play();
</script>

In diesem Beispiel wird die howler.js-Bibliothek in die Seite eingebunden und ein neues Howl-Objekt mit den Audioquellen und Optionen erstellt. Die Option html5 ist auf true gesetzt, um die HTML5-Audio-Wiedergabe zu priorisieren. Die Callbacks onplay und onend werden verwendet, um Meldungen zu protokollieren, wenn das Audio beginnt und endet. Schließlich wird die play()-Methode aufgerufen, um die Audiowiedergabe zu starten.

Beispiele und Anwendungsfälle

Das HTML <audio>-Element hat viele Einsatzmöglichkeiten, um Audio zu Webseiten hinzuzufügen. Hier einige Beispiele:

<h2>Neueste Podcast-Episode</h2>
<audio controls>
  <source src="path/to/podcast/episode.mp3" type="audio/mpeg">
  <p>Ihr Browser unterstützt das Audio-Element nicht.</p>
</audio>
<p>In dieser Episode besprechen wir die neuesten Trends in der Webentwicklung.</p>

<audio id="backgroundMusic" loop>
  <source src="path/to/background-music.mp3" type="audio/mpeg">
  <source src="path/to/background-music.ogg" type="audio/ogg">
</audio>

<script>
  var backgroundMusic = document.getElementById('backgroundMusic');
  backgroundMusic.volume = 0.5; // Lautstärke auf 50% setzen
  backgroundMusic.play(); // Hintergrundmusik abspielen
</script>

<div class="audio-player">
  <audio id="myAudio">
    <source src="path/to/audio/file.mp3" type="audio/mpeg">
    <source src="path/to/audio/file.ogg" type="audio/ogg">
    <p>Ihr Browser unterstützt das Audio-Element nicht.</p>
  </audio>
  <div class="controls">
    <button id="playPauseBtn" onclick="togglePlayPause()">Play/Pause</button>
    <input id="volumeSlider" type="range" min="0" max="1" step="0.1" value="1" onchange="adjustVolume()">
    <span id="currentTime">0:00</span> / <span id="duration">0:00</span>
  </div>
</div>

<script>
  var audio = document.getElementById('myAudio');
  var playPauseBtn = document.getElementById('playPauseBtn');
  var volumeSlider = document.getElementById('volumeSlider');
  var currentTimeDisplay = document.getElementById('currentTime');
  var durationDisplay = document.getElementById('duration');

  function togglePlayPause() {
    if (audio.paused) {
      audio.play();
      playPauseBtn.textContent = 'Pause';
    } else {
      audio.pause();
      playPauseBtn.textContent = 'Play';
    }
  }

  function adjustVolume() {
    audio.volume = volumeSlider.value;
  }

  audio.addEventListener('timeupdate', function() {
    currentTimeDisplay.textContent = formatTime(audio.currentTime);
  });

  audio.addEventListener('durationchange', function() {
    durationDisplay.textContent = formatTime(audio.duration);
  });

  function formatTime(time) {
    var minutes = Math.floor(time / 60);
    var seconds = Math.floor(time % 60);
    return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
  }
</script>

In diesem Beispiel hat der benutzerdefinierte Audio-Player einen Play/Pause-Button, einen Lautstärkeregler und zeigt die aktuelle Zeit und Länge des Audios an. Der JavaScript-Code steuert die Play/Pause-Funktion, die Lautstärkeanpassung und aktualisiert die Zeitanzeige während der Audiowiedergabe.

Dies sind nur einige Beispiele, wie Sie das HTML <audio>-Element verwenden können, um Audio zu Ihren Webseiten hinzuzufügen. Ob Sie Podcasts einbetten, Hintergrundmusik hinzufügen oder benutzerdefinierte Audio-Player erstellen - das <audio>-Element bietet Ihnen eine einfache Möglichkeit, in der Webentwicklung mit Audio zu arbeiten.