浏览器虽然发展很快,但是浏览器中的标准还是不完善,在HTML4+CSS2+JS的前段开发中让很多程序员头疼的就是浏览器的兼容性问题,音频播放也一样,直到现在,仍然不存在一项网页上播放视频和音频的标准。现在,在大多数浏览器中,音频是通过插件(比如:flash插件)来播放的。然而,不是所有浏览器都具有这样的插件,所以对音频的播放造成了一定的麻烦。在HTML5的新标准中规定了一种通过audio元素来包含音频的标准方法,下面我们就来详细的了解一下该标签。
一、对音频格式的支持
目前,audio元素支持三种音频格式
IE 9
Firefox 3.5
Opera 10.5
Chrome 3.0
Safari 3.0
Ogg Vorbis |
|
√ |
√ |
√ |
|
MP3 |
√ |
|
|
√ |
√ |
Wav |
|
√ |
√ |
|
√ |
二、如何使用
<!DOCTYPE html>
<html>
<body>
<audio src="http://www2.shengda.edu.cn/ytw/gbzx/photo/bgmusic.mp3" controls="controls">
您的浏览器不支持该HTML5标签
</audio>
</body>
</html>
点击开始按钮,播放歌曲(用的是MP3格式,只适用于IE9以上及Chrome3.0以上浏览器)
control属性显示控制台
<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的
要运行其他浏览器也支持就要使用如下方式
<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>
三、audio标签的属性
属性
值
描述
autoplay |
autoplay |
如果出现该属性,则音频在就绪后马上播放。 |
controls |
controls |
如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop |
loop |
如果出现该属性,则每当音频结束时重新开始播放。 |
preload |
preload |
如果出现该属性,则音频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
|
src |
url |
要播放的音频的 URL。 |
分享到:
相关推荐
尤其是有洁癖的人更是如此,总是喜欢时不时的杀进程杀服务,可是由于android开源的特殊性,你会发现被干掉的服务又一次的重新复活了,总之生命力极其强悍,业界称之为——打不死的小强。这里是它怎么做的,哈哈
小强老师《零基础学习软件测试》系列视频之QTP使用指南——界面分析
小强的HTML5移动开发之路系列博客中的一个视频播放器的例子。
详细请看《 小强的HTML5移动开发之路(42)》:http://blog.csdn.net/column/details/dawanganban-html5.html
“小强一号”——实验机器人制作过程(图文.docx
小强老师《零基础学习软件测试》系列视频之QTP使用指南
小强老师《零基础学习软件测试》系列视频之QTP使用指南
HTML5+jQuery制作温馨浪漫爱心表白动画特效HTML5+jQuery制作温馨浪漫爱心表白动画特效HTML5+jQuery制作温馨浪漫爱心表白动画特效HTML5+jQuery制作温馨浪漫爱心表白动画特效HTML5+jQuery制作温馨浪漫爱心表白动画特效...
小强老师软件测试基础课程5-软件质量基础知识
里面有小强开发板程序,对初学者有很大帮助
小强PDF工具包中文免费版集PDF阅读_编辑_管理_创建等于一体
小强影音盒是一个在线电影和视频播放器,能播放网上的海量电影。如果想看最新版本到:http://www.5aie.com/xiaoqiangplayer/flvshuoming.htm 查看。
小强多个模版替换 小强多个模版替换 小强多个模版替换 小强多个模版替换 小强多个模版替换
小强多个模版替换 快速发布信息,让你的工作更有效率。
小强开发板原理图版本,在网上是很不好找到的 ,不过需要的人可能也不多
小强通话时间统计,显示归属地,统计指定号码通话时间
小强升职记 实现目标思维导图
ASP实例开发源码—一个非常小巧的自动更新asp新闻系统 小强修正版.zip ASP实例开发源码—一个非常小巧的自动更新asp新闻系统 小强修正版.zip ASP实例开发源码—一个非常小巧的自动更新asp新闻系统 小强修正版.zip
小强PDF工具包 PDF软件合集包 PDF阅读、编辑、页面管理、创建、密码破解、word转换六位一体 本软件集成的PDF软件如下: ...5、Advanced PDF Password Recovery中文破解版 6、e-PDF To Word Converter绿色版