小强的HTML5移动开发之路（15）——HTML5中的音频
浏览器虽然发展很快，但是浏览器中的标准还是不完善，在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中的音频的更多相关文章
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
- 小强的HTML5移动开发之路（7）——坦克大战游戏1
来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...
- 小强的HTML5移动开发之路（6）——Canvas图形绘制基础
来自:http://blog.csdn.net/dawanganban/article/details/17686039 在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用 ...
随机推荐
- QQ群功能设计与心理学
刚刚在一个Java技术交流群,发了个 "博客投票"的广告. 群主两眼一黑,瞬间就把我给干掉了. 看到QQ给出的系统消息,发现QQ群的一个功能做得很不错. 大家注意到,右边有个&qu ...
- amazeui学习笔记--css（常用组件7）--输入框组Input-group
amazeui学习笔记--css(常用组件7)--输入框组Input-group 一.总结 1.使用:Input group 基于 Form 组件和 Button 组件扩展,依赖这两个组件.在容器上添 ...
- html doctype作用
简单介绍下html页面中DOCTYPE声明的作用: <!doctype html>告诉浏览器是使用标准模式还是怪异模式渲染页面. 1.为html页面添加了doctype,则浏览器在stan ...
- vue项目在其他电脑运行报错
解决方法1.先删除node_modules文件夹2.$ cnpm cache clean 命令清除掉cache缓存3.cnpm install4.npm run dev
- 7.2 基础知识ArrayMap
1.android源码中维护有键值对,通过键可以找到值 Java中Object是所有类的父类,对于键值对的保存如果使用个ObjectArray数组,比如N个位置存放键,N+1的位置就存放值,那么如果键 ...
- hdu 3605 Escape 二分图的多重匹配（匈牙利算法）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3605 Escape Time Limit: 4000/2000 MS (Java/Others) ...
- [Angular2Fire] Firebase auth (Google, Github)
To do auth, first you need to go firebase.console.com to enable the auth methods, for example, enabl ...
- jquery-12 jquery中的工具方法有哪些
jquery-12 jquery中的工具方法有哪些 一.总结 一句话总结:四个较常用方法.1.isArray();2.isFunction();3.isEmptyObejct();4.trim(); ...
- 数据类型总结——Boolean类型（布尔类型）
相关文章 简书原文:https://www.jianshu.com/p/e5c75d4be636 数据类型总结——概述:https://www.cnblogs.com/shcrk/p/9266015. ...
- Multi-core compute cache coherency with a release consistency memory ordering model
A method includes storing, with a first programmable processor, shared variable data to cache lines ...