Introduction à des exemples pertinents d'audio HTML5

HTML5 fournit un standard pour la lecture des fichiers audio.

L'audio sur Internet

Jusqu'à présent, il n'existait aucune norme pour la lecture audio sur les pages Web.

Aujourd'hui, la plupart des fichiers audio sont lus via des plug-ins (tels que Flash). Cependant, tous les navigateurs ne disposent pas des mêmes plugins.

HTML5 spécifie une norme pour l'intégration d'éléments audio dans des pages Web, à l'aide de l'élément

Prise en charge des navigateurs

Internet Explorer 9+, Firefox, Opera, Chrome et Safari prennent tous en charge l'élément

Remarque : Internet Explorer 8 et versions antérieures. La version IE ne prend pas en charge l'élément

html5

Tag HTML 5

L'audio HTML5 fait le retour de la musique

HTML5 Utilisez la balise aduio pour créer un lecteur de musique

Vous peut démarrer Placez le contenu du texte entre la balise et la balise de fermeture afin que les anciens navigateurs puissent afficher un message indiquant que la balise n'est pas prise en charge.

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

préchargement Si cet attribut apparaît, l'audio est chargé au chargement de la page et est prêt à être joué. url

Attributs	Valeur	Description
lecture automatique	lecture automatique	Si cet attribut est présent, l'audio sera joué immédiatement après qu'il soit prêt.
contrôles	contrôles	Si cet attribut apparaît, afficher le contrôle à l'utilisateur , comme le bouton play .
boucle	boucle	Si cet attribut apparaît, la boucle recommencera à la fin de la lecture audio.
préchargement		Cet attribut est ignoré si la "lecture automatique" est utilisée.
src		L'URL de l'audio à lire. L'audio peut également être défini à l'aide de la balise

La balise audio HTML5 peut prendre en charge les formats wav, mp3, ogg, acc, webm et autres, mais il existe un format de fichier musical très important midi (extension mid) qui n'a pas de prise en charge intégrée dans les principaux navigateurs. Tous les navigateurs ne prennent pas en charge MP3OGG et autres, et les formats pris en charge par chaque navigateur sont différents.

Compatibilité navigateur et audio

Tous les fabricants de navigateurs ne sont pas d'accord sur l'utilisation d'un certain format de fichier audio. Pour les images, les fichiers au format PNG, JPEG ou GIF seront chargés sur votre page sur n'importe quel navigateur. Malheureusement, ce n'est pas le cas des fichiers audio. Le tableau 1 présente les formats de fichiers audio pouvant être utilisés dans les pages Web, mais tous les formats ne sont pas disponibles dans tous les navigateurs. Par exemple, les navigateurs Chrome, Internet Explorer 9 (IE9) et Safari ne prennent pas en charge les fichiers WAV, une norme en déclin qui utilise un format non compressé.

Compatibilité du navigateur HTML5 et des formats audio

Format audio	Chrome	Firefox	IE9	Opéra	Safari
OGG	Assistance	Assistance	Supporté	Non pris en charge	Non pris en charge
MP3	Supporté	Non pris en charge	Supporté	Non pris en charge	Supporté
WAV	Non pris en charge	Supporté	不支持	支持	不支持

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

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

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

与

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!