HTML5 教程学习 - 新元素标签 - <audio>
2010-08-04 22:19
眼下,在页面中播放音频仍然需要浏览器安装使用Flash或其他插件控件;虽然使用 Flash播放器的方式并不坏,但多数开发者和设计师仍希望不依赖于这样额外的插件来实现播放功能。
所以HTML5中的新元素标签<audio>是被大家等待已久的,它有原生支持音频播放的功能,而不需要浏览器安装额外的扩展;目前支持<audio>元素的浏览器主要有Safari 4,Firefox 3.5和Chrome 3。
我们来看看<audio>元素标签的一些常用属性:
- src:音频文件路径。
- autobuffer:设置是否在页面加载时自动缓冲音频。
- autoplay:设置音频是否自动播放。
- loop:设置音频是否要循环播放。
- controls:设置是否显示播放控制面板。
可以看到这些属性和<video>元素标签的属性很类似。下面我们来看一个代码范例:
这段代码可以在Firefox 3.5和Chrome 3中正常工作,对于Safari 4来说要使用ogg格式的音频文件替换掉mp3文件。不过,鉴于W3C的HTML5定义规范并没有最终完成,这些格式限制也许在将来会有所变化。
根据定义规范,以下几种API方法是可以使用的:
- play():播放音频
- pause():暂停播放
- canPlayType():命令浏览器判断当前音频文件是否可以被播放
- buffered():设定文件需要缓冲部分的开始与结束时间点。
另外,我们可以使用<source>元素标签来配合<audio>;<source>用来指定多个音频文件,如果当前浏览器不支持第一个文件,那么<audio>会自动尝试播放下面一个<source>中指定的文件;我们还可以在它们后面加上目前常规的<embed>代码来加载Flash播放器,作为后备方案;范例如下:
评论:
最新文章
-
Adobe收购HTML5框架PhoneGap开发商
-
目标多平台:Rovio推HTML5版愤怒的小鸟
-
Facebook将在iPhone 5发布会推出基于HTML5的iPad应用
-
Pandora推出基于HTML5的音乐播放器
-
斯巴达计划:Facebook通过社交占领移动平台
-
HTML5基础实战 - 第一部分:初试锋芒(5) 构建页面
-
HTML5基础实战 - 第一部分:初试锋芒(4) Aside和Footer
-
HTML5基础实战 - 第一部分:初试锋芒(3) Article和Section
-
HTML5对SEO的辅助作用
-
HTML5基础实战 - 第一部分:初试锋芒(2) 规划页面的header与nav
发表评论