浏览器虽然发展很快，但是浏览器中的标准还是不完善，在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。
Java学习交流群142979499
Android学习交流群311273384

小强的HTML5移动开发之路（15）——HTML5中的音频的更多相关文章

  1. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  2. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  8. 小强的HTML5移动开发之路（7）——坦克大战游戏1

    来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...

  9. 小强的HTML5移动开发之路（6）——Canvas图形绘制基础

    来自:http://blog.csdn.net/dawanganban/article/details/17686039 在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用 ...

随机推荐

  1. Vue使用Promise自定义confirm确认框组件

    使用Promise模拟浏览器确认框,可自定义标题,内容,按钮文字和类型 参数名 类型 说明 title String 标题 content String 内容 yesBtnText String 确认 ...

  2. 5. Node基础编程

      基于Chrome V8引擎 单线程 使用JavaScript开发后端代码 非阻塞的IO common规范 common一定是通过module.exports={}输出 创建Http Server ...

  3. P2P平台项目建设几点注意事项

    种选择 a.资金池,接入第三方支付,财付通,宝付等,比如一起好 b.第三方资金托管,易宝支付.汇付天下等 c.银行存管,资金放在银行 资金池政策风险,不得不考虑. 每一种模式,技术实现都有变化,需要考 ...

  4. 国内计算机类期刊 SCI收录：

    国内计算机类期刊 SCI收录: JOURNAL OF COMPUTER SCIENCE AND TECHNOLOGY,计算机科学与技术,英文,双月刊, SCIE 国内计算机类期刊 EI收录: 核心类 ...

  5. 【2017 Multi-University Training Contest - Team 7 && hdu 6121】Build a tree

    [链接]点击打开链接 [题意] 询问n个点的完全k叉树,所有子树节点个数的异或总和为多少. [题解] 考虑如下的一棵k=3叉树,假设这棵树恰好有n个节点. 因为满的k叉树,第i层的节点个数为k^(i- ...

  6. Android实践 -- 监听应用程序的安装、卸载

    监听应用程序的安装.卸载 在AndroidManifest.xml中注册一个静态广播,监听安装的广播 android.intent.action.PACKAGE_ADDED 监听程序卸载的广播 and ...

  7. 使用mingw制作dll文件

    使用mingw制作dll文件 安装mingw 准备math.c文件 //math.c #include<stdio.h> int add(int a,int b){ return a+b; ...

  8. 【转】排列组合 "n个球放入m个盒子m"问题 总结

    出处:https://blog.csdn.net/qwb492859377/article/details/50654627 球,盒子都可以分成是否不能区分,和能区分,还能分成是否能有空箱子,所以一共 ...

  9. Spring Boot Shiro 权限管理

    Spring Boot Shiro 权限管理 标签: springshiro 2016-01-14 23:44 94587人阅读 评论(60) 收藏 举报 .embody{ padding:10px ...

  10. 去哪网实习总结：用到的easyui组件总结（JavaWeb）

    本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发... 只是还是比較认真的做了三个月,老师非常认同我的工作态度和成果.. . 实习立即就要结束了,总结一下几点之前没有注意过的变成习惯和问题,分享 ...