掌握HTML5中的多媒体--音频(audio)

- 日理万妓 2022-06-06 09:40 250阅读 0赞

**使用音频标签<audio>**

音频标签的使用和视频是非常相似的：指定多个音频文件，浏览器会播放其中支持的第一个。

1.       <audio src="audio.ogg" controls>

2.       你的浏览器不支持<audio>标签.

3.       </audio>

**Figure 5**列出了所有<audio>可用的属性. 因为不需要像视频播放器那样显示整个控件，所以高、低和预览图(poster)都不再需要了。

**Figure 5 音频标签<audio>的属性**

<table style="background:white"> 
 <thead> 
 <tr> 
 <td> Attribute </td> 
 <td> Value </td> 
 <td> Description </td> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td> &nbsp;Autoplay </td> 
 <td> autoplay </td> 
 <td> 如果指定, 音频会在准备好后立即播放. </td> 
 </tr> 
 <tr> 
 <td> &nbsp;Controls </td> 
 <td> controls </td> 
 <td> 显示播放控制工具栏.. </td> 
 </tr> 
 <tr> 
 <td> &nbsp;Loop </td> 
 <td> loop </td> 
 <td> 如果指定，则循环播放. </td> 
 </tr> 
 <tr> 
 <td> &nbsp;Preload </td> 
 <td> preload </td> 
 <td> 如果指定，音频会在加页面加载过程中被加载。当Autoplay被指定时，会被忽略。 </td> 
 </tr> 
 <tr> 
 <td> &nbsp;Src </td> 
 <td> url </td> 
 <td> 目标音频的URL. </td> 
 </tr> 
 </tbody> 
</table>

和视频<video>标签一样，你可以指定多个文件，浏览器会播放其中支持的第一个文件。你也可以指定一个回退(fallback)信息以供浏览器不支持<audio>标签时显示。下面是一个简单的例子:

1.       <audio controls autoplay>

2.          <source src="audio1.ogg" type="audio/ogg" />

3.          <source src="audio1.mp3" type="audio/mpeg" />

4.           你的浏览器不支持<audio>标签.

5.       </audio>

**总结**

当前在HTML5多媒体方面最大的问题是你必须为不同的浏览器提供不同格式的文件，不过它的应用也是大势所趋。以下是一些很棒的参考内容:

*  [http://www.w3.org/TR/html5/video.html][http_www.w3.org_TR_html5_video.html]
 *  [http://dev.w3.org/html5/spec/Overview.html][http_dev.w3.org_html5_spec_Overview.html]
 *  [http://w3schools.com/html5/default.asp][http_w3schools.com_html5_default.asp]
 *  [http://html5test.com/][http_html5test.com]
 *  [http://caniuse.com/][http_caniuse.com]

**参考:[掌握HTML5中的多媒体\--视频][HTML5_--](video)**

原文地址:[Working with Media in HTML5][]

作者:Jason Beres

转载请注明出处:[http://blog.csdn.net/horkychen][http_blog.csdn.net_horkychen]

[http_www.w3.org_TR_html5_video.html]: http://www.w3.org/TR/html5/video.html
[http_dev.w3.org_html5_spec_Overview.html]: http://dev.w3.org/html5/spec/Overview.html
[http_w3schools.com_html5_default.asp]: http://w3schools.com/html5/default.asp
[http_html5test.com]: http://html5test.com/
[http_caniuse.com]: http://caniuse.com/
[HTML5_--]: http://blog.csdn.net/horkychen/article/details/7833616
[Working with Media in HTML5]: http://www.codeproject.com/Articles/365860/Working-with-Media-in-HTML5
[http_blog.csdn.net_horkychen]: http://blog.csdn.net/horkychen