Einführung in relevante Beispiele für HTML5-Audio

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 Element

html5b97864c2e0ef2353a16c4d64c7734e92, das Sounds wie Musik oder andere Audiostreams definiert.

HTML 5 4218491fec31d29458f32c3ffee1002b-Tag

HTML5-Audio feiert ein Comeback der Musik

HTML5 Verwenden Sie das Aduio-Tag, um einen Musikplayer zu erstellen

Sie kann beginnen. Platzieren Sie Textinhalte zwischen dem Tag und dem schließenden Tag, sodass ältere Browser eine Meldung anzeigen können, dass das Tag nicht unterstützt wird.

 <audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
            src="http://demo.mimvp.com/html5/take_you_fly.mp3">
      你的浏览器不支持audio标签
</audio>

Vorspannung Wenn dieses Attribut angezeigt wird, wird das Audio beim Laden der Seite geladen und kann abgespielt werden. url

Attribute	Wert	Beschreibung
Autoplay	Autoplay	Wenn dieses Attribut vorhanden ist, wird das Audio sofort abgespielt, nachdem es fertig ist.
Steuerelemente	Steuerelemente	Wenn dieses Attribut angezeigt wird, zeigen Sie dem Benutzer das -Steuerelement an , z. B. die Wiedergabeschaltfläche .
Schleife	Schleife	Wenn dieses Attribut erscheint, beginnt die Schleife jedes Mal erneut, wenn die Audiowiedergabe endet.
Vorspannung		Dieses Attribut wird ignoriert, wenn „Autoplay“ verwendet wird.
src		Die URL des abzuspielenden Audios. Audio kann auch mit dem Tag e02da388656c3265154666b7c71a8ddc eingestellt werden.

HTML5-Audio-Tag kann WAV, MP3, OGG, Acc, WebM und andere Formate unterstützen, aber es gibt ein sehr wichtiges Musikdateiformat Midi (Erweiterung Mid), das in den wichtigsten Browsern keine integrierte Unterstützung bietet. Nicht alle Browser unterstützen MP3OGG und dergleichen und die von jedem Browser unterstützten Formate sind unterschiedlich.

Browser- und Audiokompatibilität

Nicht alle Browserhersteller sind sich über die Verwendung bestimmter Audiodateiformate einig. Bei Bildern werden Dateien im PNG-, JPEG- oder GIF-Format in jedem Browser auf Ihre Seite geladen. Bei Audiodateien ist dies leider nicht der Fall. Tabelle 1 zeigt die Audiodateiformate, die in Webseiten verwendet werden können, aber nicht alle Formate sind in allen Browsern verfügbar. Beispielsweise unterstützen die Browser Chrome, Internet Explorer 9 (IE9) und Safari keine WAV-Dateien, einen rückläufigen Standard, der ein unkomprimiertes Format verwendet.

HTML5-Browser und Audioformat-Kompatibilität

Audioformat	Chrome	Firefox	IE9	Oper	Safari
OGG	Unterstützung	Unterstützung	Unterstützt	Nicht unterstützt	Nicht unterstützt
MP3	Unterstützt	Nicht unterstützt	Unterstützt	Nicht unterstützt	Unterstützt
WAV	Nicht unterstützt	Unterstützt	不支持	支持	不支持

没有一种通用的文件格式让每个浏览器都使用单个文件格式意味着至少有 2/5 的浏览器无法播放某些声音。这不是无法在单一音频标准中达成一致的浏览器制造商不妥协的问题，而是涉及专利权和特许权使用费的法律和财务问题。不受软件专利限制的 OGG 格式旨在一劳永逸地解决这个问题。然而，在撰写本文时，Opera 和 Safari 都不支持 OGG。与 OGG 格式的文件相比，可用的 WAV 和 MP3 文件数量要更多，因此毫无疑问，浏览器制造商考虑到了这一点。MP3 作为事实的标准是个很好的解决方案。

解决方案：使用三种文件类型和b97864c2e0ef2353a16c4d64c7734e92标签

鉴于目前的状况，您可能认为目前还不是在 HTML5 页面上使用音频的黄金时刻。在某些方面可能的确如此，但是 HTML5 提供了一个解决方案，使您喜欢的浏览器能够找到一种兼容的格式。

与 b97864c2e0ef2353a16c4d64c7734e92 标签结合使用时，e02da388656c3265154666b7c71a8ddc 标签可以嵌套在 b97864c2e0ef2353a16c4d64c7734e92 容器内。假设您是一个瓦格纳迷，想在 HTML5 网页上听他的歌剧Ride of the Valkyries（《女武神》）。首先，您需要获得三种文件类型的音乐，即 OGG、MP3 和 WAV。将这些音乐文件与 HTML5 文件放在同一个文件夹内。然后，将每个文件名放在单独的 e02da388656c3265154666b7c71a8ddc 标签里，并且音频容器中的所有源标签都由b97864c2e0ef2353a16c4d64c7734e9281d2bc32cafa2076a27f10cdd878d0ab 构成，如下所示。

<audio controls>
    <source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.mp3″ />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.wav” />
</audio>

无论访问者使用什么浏览器，它都将自动选择所读取的第一个文件类型，并为您播放声音。

浏览器音频控件：没有两个是完全相同的

一旦您决定要在网站上提供音频，将面临一个有趣的设计选择。每个浏览器都有与众不同的外观，看起来像是有意识地故意使其与众不同。下面的图 1 展示了这些浏览器控件的外观。

图1：不同浏览器上的音频控件

除了 Chrome 浏览器外，所有浏览器都有开始/暂停控件、进度条、滑块、播放秒数、音量/静音控件，还显示声音文件的总秒数。使用HTML5 标准和浏览器支持，开发人员可以相信用户将拥有与 HTML5 音频类似的体验，因为浏览器控件是类似的。您还可以使用 Flash 和 Silverlight 等插件创建控件，但是对于不同的用户，体验可能会有所不同。

某些浏览器（如 IE9）甚至有自己的声音控制条，在浏览器本身之外运行。用户打开有声音的任何网站时，他们可以从 Windows 任务栏控制声音，并能够预览当前正在播放的声音。

html代码(隐藏播放控件)

 <audio autoplay="autoplay">
<source src="demo.mimvp.com/html5/take_you_fly.mp3" type="audio/mpeg">
</audio>

代码演示(隐藏播放控件)

 <audio autoplay="autoplay" controls="controls">
<source src="demo.mimvp.com/html5/take_you_fly.mp3" type="audio/mpeg">
</audio>

Das obige ist der detaillierte Inhalt vonEinführung in relevante Beispiele für HTML5-Audio. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!