HTML5音频标准-优快云博客

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109013449

1. html5提供了播放音频的标准。

2. Web上的音频

2.1. 直到现在, 仍然不存在一项旨在网页上播放音频的标准。

2.2. 今天, 大多数音频是通过插件(比如 Flash)来播放的。然而, 并非所有浏览器都拥有同样的插件。

2.3. html5规定了一种通过audio元素来包含音频的标准方法。

2.4. audio元素能够播放声音文件或者音频流。

3. 音频格式

3.1. 当前, audio元素支持三种音频格式:

4. <audio>标签的属性

5. 如何工作

5.1. 如需在html5中播放音频, 您所有需要的是:

<audio src="song.ogg" controls="controls"></audio>

5.2. control属性供添加播放、暂停和音量控件。

5.3. <audio>与</audio>之间插入的内容是供不支持audio元素的浏览器显示的:

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

5.4. 上面的例子使用一个Ogg文件, 适用于Firefox、Chrome浏览器。要确保适用于Safari浏览器, 音频文件必须是MP3或Wav类型。audio元素允许多个source元素。source元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:

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

6. 例子

6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html音频</title>
	</head>
	<body>
		<audio controls="controls">
	  		<source src="song.ogg" type="audio/ogg" />
	  		<source src="song.mp3" type="audio/mpeg" />
			Your browser does not support the audio element.
		</audio>
	</body>
</html>

6.2. 效果图