HTML – Verwendung <audio> Elemente effizient? </audio>

Dec 26 2022

Möchten Sie, dass eine Aufnahme oder ein Musikstück auf Ihren Seiten abgespielt wird? In diesem Artikel werden wir durchgehen, wie man die HTML-<audio>-Tags effizient verwendet. Um diesen Artikel auf Chinesisch zu lesen, besuchen Sie bitte mein Zhihu.

Möchten Sie, dass eine Aufnahme oder ein Musikstück auf Ihren Seiten abgespielt wird? In diesem Artikel werden wir durchgehen, wie man die HTML <audio>-Tags effizient verwendet.

Um diesen Artikel auf Chinesisch zu lesen, besuchen Sie bitte mein Zhihu . 文章的中文版请戳我的知乎。

1. Grundlagen von `<audio>`Tags

1.1 Attribute von `<audio>`Tags

Schauen wir uns die allgemeinen Attribute von <audio>Tags an:

src: Der Wert des srcAttributs gibt die URL des einzubettenden Audios an.
controls: Wenn das controlsAttribut vorhanden ist, bietet der Browser Steuerelemente an, mit denen der Benutzer die Audiowiedergabe steuern kann, einschließlich Lautstärke, Suchen und Anhalten/Fortsetzen der Wiedergabe.
autoplay: Wenn das autoplayAttribut vorhanden ist, beginnt die Audiowiedergabe automatisch, sobald dies möglich ist, ohne zu warten, bis der Download der gesamten Audiodatei abgeschlossen ist.
loop: Wenn das loopAttribut vorhanden ist, sucht der Audioplayer automatisch zum Anfang zurück, wenn er das Ende des Audios erreicht.
muted: Wenn das mutedAttribut vorhanden ist, wird der Ton zunächst stummgeschaltet.
preload: Der Wert des preloadAttributs gibt dem Browser einen Hinweis darauf, was nach Meinung des Autors zur besten Benutzererfahrung führt. Sein Wert könnte sein none(das Audio sollte nicht vorab geladen werden), meta(nur Audio-Metadaten wie Länge, Dateigröße usw. werden abgerufen) oder auto(die gesamte Audiodatei wird heruntergeladen). Wenn das autoplayAttribut jedoch gesetzt ist, wird das preloadAttribut ignoriert.
disableRemotePlayback: Wenn das disableRemotePlaybackAttribut vorhanden ist, deaktiviert der Browser die Funktion der Remote-Wiedergabe auf Geräten, die mit kabelgebundenen und drahtlosen Technologien verbunden sind.

<!-- An audio player with controls, that is initially muted and will automatically begin playback. Once it reaches the end of the audio, the audio player will automatically seek back to the start. -->
<audio
 src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
 controls
 autoplay
 loop
 muted
>
  The browser doesn't support audio playing.
</audio>

1.2 Wie lade ich Audiodateien vor?

Müssen wir Audiodateien vorab laden? Nun, es hängt vom Zweck dieses Audios ab. In Teil 1.1 haben wir besprochen, dass das preloadAttribut der audioTags 3 mögliche Werte hat: none, metaund auto. Mal sehen, wann welcher Wert verwendet wird:

1. none: Der noneWert gibt an, dass das Audio nicht vorab geladen werden soll, wodurch der Netzwerkverkehr optimiert wird. Ein typisches Szenario für die Verwendung des noneWerts ist Podcast. Wenn Benutzer eine Liste von Episoden durchsuchen, möchten wir nicht, dass alle Audiodateien bereit sind, nur wenn Sie auf die Schaltfläche „Play“ für eine bestimmte Episode klicken, fordern wir die spezifische Audiodatei an.

Spotify-Podcast

2. meta: Der metaWert ruft nur die Audio-Metadaten wie Audiolänge und Dateigröße ab. Ein typisches Szenario für die Verwendung des metaWerts ist, wenn Sie einen Audioplayer auf Ihrer Seite haben, aber das Audio möglicherweise nicht sofort wiedergeben möchten, wenn Sie die Seite erreichen. Wenn Sie beispielsweise zu Spotify gehen und auf der Startseite angekommen sind, zeigt der Audioplayer die Episode/Musik an, die Sie zuletzt gespielt haben, aber er spielt den Ton nicht automatisch ab, da Sie vielleicht anderen Ton abspielen möchten.

Spotify-Homepage

3. auto: Der autoWert lädt die Audiodatei nach dem Laden der Seite herunter. Ein typisches Szenario für die Verwendung des autoWerts sind Videospiele. Wenn das Spiel geladen wird, müssen wir auch die Audiodateien laden, da wir diese Dateien benötigen, um den Soundeffekt abzuspielen, während Benutzer spielen.

Einige mobile Geräte unterstützen das Attribut sogar nicht preload, um damit umzugehen, könnten wir die load()Methode verwenden, um die Elemente aufzurufen <audio>, um ihre Medienressourcen zu laden.

<audio
 id="audio-player"
 src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
 preload="auto"
 controls
>
  The browser doesn't support audio playing.
</audio>
window.addEventListener('load', () => {
  document.queryselector('#audio-player').load();
});

HTML unterstützt 3 Audiodateiformate: OGG, MP3 und WAV.

OGG: OGG-Audiodateien sind unkomprimiert, was bedeutet, dass die Qualität die beste der 3 Medientypen ist, aber die Dateigröße die größte ist.
MP3: MP3-Audiodateien sind komprimiert, was bedeutet, dass die Dateigröße kleiner ist, aber die Qualität etwas geringer ist als die Qualität von OGG-Dateien. Außerdem werden MP3-Dateien am häufigsten verwendet.
WAV: WAV-Audiodateien werden ebenfalls komprimiert, wobei die Dateigröße die kleinste, aber die Qualität die schlechteste der 3 Medientypen ist.

<audio controls>
  <!-- OGG file -->
  <source src="music.ogg" type="audio/ogg" />

  <!-- MP3 file -->
  <source src="music.mp3" type="audio/mpeg" />

  <!-- WAV file -->
  <source src="music.wav" type="audio/wav" />
</audio>

https://blog.csdn.net/babybk/article/details/51325493

https://www.cnblogs.com/rubyxie/articles/10154521.html

https://www.w3schools.com/html/html5_audio.asp

https://stackoverflow.com/questions/8859321/smallest-audio-file-mp3-ogg-or-wav

2. `<audio>`Elemente manipulieren

2.1 Die `HTMLAudioElement`Schnittstelle

Die HTMLAudioElementSchnittstelle bietet Zugriff auf die Eigenschaften von <audio>Elementen sowie Methoden zu deren Bearbeitung.

Die häufigsten Eigenschaften der <audio>Elemente, die wir verwenden werden, sind:

src: Die srcEigenschaft gibt den Wert des srcAttributs des <audio>-Elements an, das die URL der im Element zu verwendenden Audioressource angibt.
currentTime: Die currentTimeEigenschaft gibt die aktuelle Wiedergabezeit in Sekunden an.
duration: Die durationEigenschaft gibt die Länge der <audio>Medien des Elements in Sekunden an.
paused: Die pausedEigenschaft gibt an, ob das <audio>Element angehalten ist.
playbackRate: Die playbackRateEigenschaft gibt die Rate an, mit der das Audio wiedergegeben wird.
muted: Die mutedEigenschaft gibt an, ob das <audio>Element stummgeschaltet ist.
volume: Die volumeEigenschaft gibt die Lautstärke an, mit der das Audio abgespielt wird, und ihr Wert liegt zwischen 0 und 1 einschließlich.

load(): Die load()Methode setzt das <audio>Element in seinen Anfangszustand zurück und beginnt mit dem Prozess der Auswahl einer Audioquelle und dem Laden des Audios in Vorbereitung auf den Beginn der Wiedergabe am Anfang.
▶️ play(): Die play()Methode versucht, die Audiowiedergabe zu starten.
⏸ pause(): Die pause()Methode pausiert die Audiowiedergabe.

2.2 Ereignisse von `<audio>`Tags

Die <audio>Tags unterstützen viele Ereignisse, die uns helfen könnten, die Details des Lade-/Wiedergabeprozesses von Audio zu erfahren. Die häufigsten Ereignisse, die wir verwenden werden, sind:

loadedmetadata: Die Metadaten wurden geladen.
canplay: Der Browser kann das Audio wiedergeben, schätzt aber, dass nicht genügend Daten geladen wurden, um die Medien bis zum Ende abzuspielen, ohne dass der Inhalt für eine weitere Pufferung angehalten werden muss.
canplaythrough: Der Browser geht davon aus, dass er das Audio bis zu seinem Ende wiedergeben kann, ohne für die Inhaltspufferung anzuhalten.
stalled: Der Benutzeragent versucht, Audiodaten abzurufen, aber es werden unerwarteterweise keine Daten bereitgestellt.
suspend: Das Laden von Audiodaten wurde ausgesetzt.
play: Die Wiedergabe hat begonnen.
pause: Die Wiedergabe wurde angehalten.
waiting: Die Wiedergabe wurde aufgrund eines vorübergehenden Datenmangels angehalten.
playing: Die Wiedergabe ist startbereit, nachdem sie aufgrund fehlender Daten angehalten oder verzögert wurde.
seeking: Eine Suchoperation hat begonnen.
seeked: Eine Seed-Operation abgeschlossen.
ratechange: Die Wiedergabegeschwindigkeit hat sich geändert.
timeupdate: Die von der HTMLAudioElement.currentTimeEigenschaft angegebene Zeit wurde aktualisiert. Wenn das Audio abgespielt wird, wird der timeupdateEreignishandler unendlich aufgerufen, da currentTimesich das ständig ändert.
volumechange: Die Lautstärke hat sich geändert.
ended: Die Wiedergabe wurde gestoppt, weil das Ende des Tons erreicht wurde.

<audio
 id="audio-player"
 src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
 controls
>
  The browser doesn't support audio playing.
</audio>
const audio = document.querySelector('#audio-player');

// canplay
audio.addEventListener('canplay', () => {
  alert('You can play the audio now.');
});

// play
audio.addEventListener('play', () => {
  alert('The audio is playing now!');
});

// pause
audio.addEventListener('pause', () => {
  alert('The audio is paused to play.');
});

// seeked
audio.addEventListener('seeked', () => {
  alert(`You have changed the current playback time to ${Math.ceil(audio.currentTime)}s.`);
});

// timeupdate
audio.addEventListener('timeupdate', () => {
  if (Math.ceil(audio.currentTime) % 30 === 0) {
    alert(`The current playback time is ${Math.ceil(audio.currentTime / 60)}min(s).`);
  }
});

// ended
audio.addEventListener('ended', () => {
  alert('Audio finished playing.');
});

Bei der Verwendung <audio>von Tags werden wir viele Probleme bezüglich der Kompatibilität haben. Wir werden diese Probleme und ihre Lösungen sehen. Wir werden einige Beispiele sehen, wie man Tags manipuliert <audio>, um die Benutzererfahrung zu verbessern.

1. Wie überprüfe ich, ob das Audio das Ende erreicht hat?

Um zu überprüfen, ob ein <audio>Element sein Ende erreicht hat, ist es nicht genau, das endedEreignis abzuhören, aber wir könnten das timeupdateEreignis abhören, um zu sehen, ob currentTimegrößer oder gleich dem ist duration.

<audio
 id="audio-player"
 src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
 controls
>
  The browser doesn't support audio playing.
</audio>
const audio = document.querySelector('#audio-player');

audio.addEventListener('timeupdate', () => {
  if (audio.currentTime >= audio.duration) {
    alert('Audio finished playing');
  }
});

Um die Benutzererfahrung zu verbessern, können wir beim Laden der Audioressource einen Ladeeffekt hinzufügen. Wir können die Ereignisse loadstartund abhören loadeddata, um den Ladeeffekt sichtbar zu machen, und dann den Ladeeffekt entfernen, wenn das canplayEreignis aufgerufen wird.

<audio
 id="audio-player"
 src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
 controls
>
  The browser doesn't support audio playing.
</audio>
const audio = document.querySelector('#audio-player');
let isLoading = false;

audio.addEventListener('loadstart', () => {
  isLoading = true;
});

audio.addEventListener('loadeddata', () => {
  isLoading = true;
});

audio.addEventListener('canplay', () => {
  isLoading = false;
});

Einige mobile Geräte unterstützen das autoplayAttribut nicht, um damit umzugehen, könnten wir die play()Methode verwenden, um die <audio>Elemente aufzufordern, das Audio abzuspielen.

<audio
 id="audio-player"
 src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
 autoplay
 controls
>
  The browser doesn't support audio playing.
</audio>
window.addEventListener('canplay', () => {
  document.queryselector('#audio-player').play();
});

Eine Möglichkeit, Audioressourcen zu ändern, besteht darin, den Wert des srcAttributs zu ändern, nachdem das vorherige Audio das Ende erreicht hat.

<audio
 id="audio-player"
 src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
 controls
>
  The browser doesn't support audio playing.
</audio>
const audio = document.querySelector('#audio-player');
let songNum = 1;

audio.addEventListener('timeupdate', () => {
  if (audio.currentTime >= audio.duration) {
    songNum = songNum >= 17 ? 1 : songNum + 1;
    audio.src = `https://www.soundhelix.com/examples/mp3/SoundHelix-Song-${songNum}.mp3`;
  }
});

<audio
 id="audio-player1"
 src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
 controls
>
  The browser doesn't support audio playing.
</audio>

<audio
 id="audio-player2"
 style="display: none;"
 src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"
 controls
>
  The browser doesn't support audio playing.
</audio>

<audio
 id="audio-player3"
 style="display: none;"
 src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"
 controls
>
  The browser doesn't support audio playing.
</audio>
const audio1 = document.querySelector('#audio-player1');
const audio2 = document.querySelector('#audio-player2');
const audio3 = document.querySelector('#audio-player3');

audio1.addEventListener('timeupdate', () => {
  if (audio1.currentTime >= audio1.duration) {
    audio1.style.display = 'none';
    audio2.style.display = 'block';
    audio2.play();
  }
});

audio2.addEventListener('timeupdate', () => {
  if (audio2.currentTime >= audio2.duration) {
    audio2.style.display = 'none';
    audio3.style.display = 'block';
    audio3.play();
  }
});

audio3.addEventListener('timeupdate', () => {
  if (audio3.currentTime >= audio3.duration) {
    audio3.style.display = 'none';
    audio1.style.display = 'block';
    audio1.play();
  }
});

https://juejin.cn/post/6844903839825395719

https://www.cnblogs.com/rubyxie/articles/10154521.html

https://aaron-bird.github.io/2019/03/03/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AF%B9audio%E6%A0%87%E7%AD%BE%E7%9A%84%E9%99%90%E5%88%B6%E6%80%BB%E7%BB%93/

3. Gestalte einen Audioplayer

Sehen wir uns nun an, wie die <audio>Elemente mit formatiert werden controls.

Ein

Laut MDN ,

Sie können die Standardsteuerelemente mit Eigenschaften gestalten, die den Block als eine Einheit betreffen, also können Sie ihm zum Beispiel ein borderund border-radius, padding, marginusw. geben. Sie können jedoch nicht die einzelnen Komponenten innerhalb des Audioplayers gestalten (zB die Schaltflächengröße ändern oder Symbole, ändern Sie die Schriftart usw.), und die Steuerelemente sind in den verschiedenen Browsern unterschiedlich.

Wir werden zwei Ansätze finden, um einen Audioplayer zu gestalten.

3.1 Gestalte die `<audio>`Elemente mit CSS

Um die Steuerelemente der <audio>Elemente zu stylen, verwenden wir die Pseudo-Elemente der <audio>Elemente.

⚠️ Hinweis: Nur auf WebKit oder Blink basierende Anwendungen wie Safari und Chrome unterstützen diese WebKit-Pseudoelemente.

::-webkit-media-controls-panel: Es ist der Container aller Steuerelemente.
::-webkit-media-controls-mute-button: Dies ist die Stummschalttaste auf den Bedienelementen.
::-webkit-media-controls-play-button: Es ist die Play-Taste auf der Steuerung.
::-webkit-media-controls-current-time-display: Dies ist der Text, der die aktuelle Wiedergabezeit auf den Bedienelementen anzeigt.
::-webkit-media-controls-time-remaining-display: Dies ist der Text, der die verbleibende Wiedergabezeit auf den Bedienelementen anzeigt.
::-webkit-media-controls-timeline: Es ist die Wiedergabe-Timeline auf den Steuerelementen.
::-webkit-media-controls-volume-slider: Dies ist der Lautstärkeregler in den Steuerelementen, der in Chrome angezeigt wird, nachdem Sie die Stummschalttaste bewegt haben.

<audio
 id="audio-player"
 src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
 controls
>
  The browser doesn't support audio playing.
</audio>
#audio-player::-webkit-media-controls-panel {
  background: lightblue;
}

#audio-player::-webkit-media-controls-current-time-display {
  color: red;
  font-weight: bold;
}

#audio-player::-webkit-media-controls-time-remaining-display {
  color: gray;
}

3.2 Anpassen eines Audioplayers mit JavaScript und CSS

Wir können ein <audio>Element ohne das controlsAttribut erstellen und einige Elemente erstellen, um das Audio zu manipulieren. Durch Klicken auf ein Element werden die relevanten Eigenschaften des Audios geändert oder die relevanten Methoden aufgerufen, um die Manipulation abzuschließen. Außerdem können wir uns die Audioereignisse anhören und den Stil entsprechend ändern.

HTML – Verwendung <audio> Elemente effizient? </audio>

1. Grundlagen von <audio>Tags

1.1 Attribute von <audio>Tags

1.2 Wie lade ich Audiodateien vor?

2. <audio>Elemente manipulieren

2.1 Die HTMLAudioElementSchnittstelle

2.2 Ereignisse von <audio>Tags

3. Gestalte einen Audioplayer

3.1 Gestalte die <audio>Elemente mit CSS