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

Browser support

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

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

html5

HTML 5

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>

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

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

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!