Introduction to relevant examples of html5 audio

HTML5 provides a standard for playing audio files.

Audio on the Internet

Until now, there was no standard for playing audio on web pages.

Today, most audio is played through plug-ins (such as Flash). However, not all browsers have the same plugins.

HTML5 specifies a standard for embedding audio elements on web pages, using the b97864c2e0ef2353a16c4d64c7734e92 element.

Browser support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari all support the b97864c2e0ef2353a16c4d64c7734e92 element.

Note: Internet Explorer 8 and earlier The IE version does not support the b97864c2e0ef2353a16c4d64c7734e92 element.

html5b97864c2e0ef2353a16c4d64c7734e92 is a new tag in HTML 5 that defines sounds, such as music or other audio streams.

HTML 5 b97864c2e0ef2353a16c4d64c7734e92 tag

HTML5 audio makes music comeback

HTML5 Use the aduio tag to create a music player

You can start Place text content between the tag and the closing tag so that older browsers can display a message that the tag is not supported.

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

##autoplayIf this attribute appears, the audio will be played controlsurl

##Attributes	Value	##Description
autoplay		as soon as it is ready.
controls	If this attribute appears, display controls to the user, such as the play button .
loop	##loop	If this attribute appears, the loopstarts again whenever the audio ends Play.
##preload	preload	#If this attribute appears, the audio is loaded when the page is loaded and is ready to be played. If "autoplay" is used, this attribute is ignored.
##src		The URL of the audio to play. Audio can also be set using the e02da388656c3265154666b7c71a8ddc tag.

HTML5 Audio tag can support wav, mp3, ogg, acc, webm and other formats, but there is a very important music file format midi (extension mid) that does not have built-in support in major browsers. Not all browsers support MP3OGG and the like, and the formats supported by each browser are different.

Browser and audio compatibility

Not all browser manufacturers agree on the use of a certain audio file format. For images, files in PNG, JPEG, or GIF format will load into your page on any browser. Unfortunately, this is not the case with audio files. Table 1 shows the audio file formats that can be used in web pages, but not all formats are available in all browsers. For example, Chrome, Internet Explorer 9 (IE9), and Safari browsers do not support WAV files, a declining standard that uses an uncompressed format.

HTML5 browser and audio format compatibility

##OGG

##Audio format	Chrome	##Firefox	IE9	##Opera	Safari
support		Supported	Not supported	Not supported
##MP3	Supported	Not supported	Supported	Not supported	Supported
WAV	Not supported	Supported	不支持	支持	不支持

没有一种通用的文件格式让每个浏览器都使用单个文件格式意味着至少有 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>

The above is the detailed content of Introduction to relevant examples of html5 audio. For more information, please follow other related articles on the PHP Chinese website!