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

使用音频标签<audio>

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

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

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

3. </audio>

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

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

Attribute	Value	Description
Autoplay	autoplay	如果指定, 音频会在准备好后立即播放.
Controls	controls	显示播放控制工具栏..
Loop	loop	如果指定，则循环播放.
Preload	preload	如果指定，音频会在加页面加载过程中被加载。当Autoplay被指定时，会被忽略。
Src	url	目标音频的URL.

和视频<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://dev.w3.org/html5/spec/Overview.html
• http://w3schools.com/html5/default.asp
• http://html5test.com/
• http://caniuse.com/

参考:掌握HTML5中的多媒体--视频(video)

原文地址:Working with Media in HTML5

作者:Jason Beres

转载请注明出处:http://blog.youkuaiyun.com/horkychen