Heim > Artikel > Web-Frontend > Detaillierte Analyse von Audio in HTML5

Detaillierte Analyse von Audio in HTML5

寻∝梦Original: 2018-08-13 18:21:082066Durchsuche

Es gibt viele neue Dinge in HTML5, die sich etwas von der alten Version unterscheiden. Dieser Artikel gibt eine detaillierte Analyse der neuen Audioelemente in HTML5

HTML5 Audio (Audio)

Letzte Änderung am 1. August 2017

HTML5 bietet einen Standard zum Abspielen von Audiodateien.

Audio im Internet

Bisher gab es keinen Standard für die Audiowiedergabe auf Webseiten.

Heutzutage werden die meisten Audiodaten über Plug-Ins (z. B. Flash) abgespielt. Allerdings verfügen nicht alle Browser über die gleichen Plugins.

HTML5 spezifiziert einen Standard zum Einbetten von Audioelementen auf Webseiten unter Verwendung des b97864c2e0ef2353a16c4d64c7734e92-Elements.

Browser-Unterstützung

Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen alle das b97864c2e0ef2353a16c4d64c7734e92-Element.

Hinweis: Internet Explorer 8 und früher Die IE-Version unterstützt das b97864c2e0ef2353a16c4d64c7734e92-Element nicht.

HTML5-Audio – So funktioniert es

Um Audio in HTML5 abzuspielen, müssen Sie den folgenden Code verwenden:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>PHP中文网</title> 
</head>
<body>
<audio controls>
  <source src="/statics/demosource/horse.ogg" type="audio/ogg">
  <source src="/statics/demosource/horse.mp3" type="audio/mpeg">

Ihr Browser unterstützt das Audioelement nicht.

81d2bc32cafa2076a27f10cdd878d0ab

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

Steuerungsattribut wird zum Hinzufügen von Wiedergabe, Pause und Lautstärke verwendet Kontrollen.

Zwischen b97864c2e0ef2353a16c4d64c7734e92 müssen Sie den Eingabeaufforderungstext des b97864c2e0ef2353a16c4d64c7734e92 einfügen. Das

b97864c2e0ef2353a16c4d64c7734e92-Element ermöglicht die Verwendung mehrerer e02da388656c3265154666b7c71a8ddc-Elemente, und der Browser verwendet die erste unterstützte Audiodatei

Audioformate und Browserunterstützung

Derzeit unterstützt das b97864c2e0ef2353a16c4d64c7734e92-Element drei Audioformatdateien: MP3, Wav und Ogg;

MIME-Typen von Audioformaten: MP3, Ogg, Wav ;

HTML5Audio-Tag:

b97864c2e0ef2353a16c4d64c7734e92 definiert den Soundinhalt

e02da388656c3265154666b7c71a8ddc gibt Multimedia-Ressourcen in 39000f942b2545a5315c57fa3276f220 an das

b97864c2e0ef2353a16c4d64c7734e92-Tag, das im b97864c2e0ef2353a16c4d64c7734e92-Tag verwendet wird:

autoplay: Wenn dieses Attribut erscheint, wird das Audio abgespielt, sobald es fertig ist.

Steuerelemente: Wenn dieses Attribut erscheint, werden dem Benutzer Steuerelemente angezeigt, beispielsweise eine Wiedergabeschaltfläche.

Schleife: Wenn dieses Attribut vorhanden ist, wird die Wiedergabe jedes Mal neu gestartet, wenn das Audio endet.

Preload: Wenn dieses Attribut erscheint, wird das Audio beim Laden der Seite geladen und für die Wiedergabe vorbereitet. Bei Verwendung von „Autoplay“ wird dieses Attribut ignoriert.

src: URL des abzuspielenden Audios.

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

Das obige Beispiel verwendet eine Ogg-Datei und ist für die Browser Firefox, Opera und Chrome geeignet.

Um sicherzustellen, dass es mit Safari funktioniert, muss die Audiodatei vom Typ MP3 oder WAV sein. Das

Audio-Element ermöglicht mehrere Quellelemente. Das Quellelement kann verschiedene Audiodateien verknüpfen. Der Browser verwendet das erste erkannte Format:

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

[Verwandte Empfehlungen]

Grundelemente von HTML, sodass Sie HTML von Grund auf lernen können

Parsen in HTML5

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse von Audio in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 firefox chrome safari html

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Der Weg zum Erlernen von HTML5Nächster Artikel：Der Weg zum Erlernen von HTML5

In Verbindung stehende Artikel

Mehr sehen