【HTML5】 web上的音频
<!--
audio通过属性的设置可以控制音频播放的行为：
表6-2 audio元素的属性
————————————————————————————————————————————————————————
属性 值 描述
autoplay autoplay 音频就绪后马上播放
controls controls 向用户显示控件，比如播放按钮
loop loop 音频播放结束后重新播放
preload preload 音频在页面加载并预备播放。如果使用“autoplay”，则忽略该属性
src url 要播放音频的url
———————————————————————————————————————————————————————— 表6-3 audio元素的方法
————————————————————————————————————————————————————————
方法 描述
addTextTrack() 向音频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频类型
load() 重新加载音频元素
play() 开始播放音频
pause() 暂停当前播放的音频
———————————————————————————————————————————————————————— 表6-4 audio元素的常用事件
————————————————————————————————————————————————————————
事件 描述
canplay 当前浏览器可以播放音频时
pause 当音频已暂停时
play 当音频已开始或不再暂停时
playing 当音频在因缓冲而暂停或停止后就就绪时
progress 当浏览器正在下载音频时
volumechange 当音量已更改时
timeupdate 当前的播放位置已更改时
———————————————————————————————————————————————————————— --> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio</title>
</head>
<body>
<br>
<audio src="E:\MUSIC\Diplo - revolution.mp3" controls="controls" autoplay="autoplay">
您的浏览器不支持audio标签
</audio>
</body>
</html> <!--
另外，audio元素可以设置多个source元素。source元素可以连接不同的音频文件，浏览器将使用第一个可识别的格式 <audio controls>
<source src=".../a.mp3" type="audio/mpeg"></audio>
<source src=".../b.mp3" type="audio/ogg"></audio>
--> 运行结果：
【HTML5】 web上的音频的更多相关文章
- html5页面怎么播放音频和视频
html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...
- html5中audio支持音频格式
HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持.不是所有的浏览器都支持MP ...
- 基于HT for Web矢量实现HTML5文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- HTML5学习总结-04 音频&视频播放
一 音频播放 1 Audio(音频) HTML5提供了播放音频文件的标准 2 control(控制器) control属性攻添加播放,暂停和音量空间. 3 标签定义声音 <audio> 例 ...
- 网页上播放音频、视频Mp3，Mp4
昨天在处理网页上播放音频mp3,视频mp4上用了一天的时间来比较各种方案,最终还是选择了HTML5的 标签,谷歌浏览器.IE浏览器对标签的支持都很好,火狐上需要安装quicktime插件,效果比较差. ...
- JavaScript多线程之HTML5 Web Worker
在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...
- HTML5的视频和音频
1.HTML5视频 HTML5 规定了一种通过 video 元素来包含视频的标准方法. <!DOCTYPE html> <html> <head> <meta ...
- 深入HTML5 Web Worker应用实践：多线程编程
HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...
- 四种途径将HTML5 web应用变成android应用
作为下一代的网页语言,HTML5拥有很多让人期待已久的新特性.HTML5的优势之一在于能够实现跨平台游戏编码移植,现在已经有很多公司在移动 设备上使用HTML5技术.随着HTML5跨平台支持的不断增强 ...
随机推荐
- ASCII码而已
题目: \u5927\u5bb6\u597d\uff0c\u6211\u662f\u0040\u65e0\u6240\u4e0d\u80fd\u7684\u9b42\u5927\u4eba\uff01 ...
- 《SQL必知必会》学习笔记(一)
这两天看了<SQL必知必会>第四版这本书,并照着书上做了不少实验,也对以前的概念有得新的认识,也发现以前自己有得地方理解错了.我采用的数据库是SQL Server2012.数据库中有一张比 ...
- JS，删除数据时候，多次确认后才删除。
function delfun(){ if(window.confirm("请仔细核对无误,删除本数据后不能恢复.")){ if(window.confirm("请再次确 ...
- JS 获取CSS属性值
obj: 元素对象 attribute: 属性 返回值:该对象这个属性的值 function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM, ...
- oracle 12c 加入系统服务
1修改oratab文件 vi /etc/oratab #把后台一行的N改为Y db01:/usr/oracle/app/product/11.2.0/dbhome_1:Y 2如果安装时.bash_pr ...
- 我的第一个wcf
vs2012中新建一个解决方案 新建WCF项目RestApi 添加实体类 [DataContract] public class Employee { private Guid id; private ...
- 第一章 Shiro简介——《跟我学Shiro》(转)
目录贴:跟我学Shiro目录贴 1.1 简介 Apache Shiro是Java的一个安全框架.目前,使用Apache Shiro的人越来越多,因为它相当简单,对比Spring Security,可 ...
- Tomcat部署web项目,如何直接通过域名访问,不加项目名称
问题:下面的问题是互联网上问得比较多的,但是显然都是同一个问题. JavaWeb项目部署到tomcat服务之后设置不需要输入项目名称即可访问? Tomcat部署web项目,如何直接通过域名访问,不加项 ...
- [整理]AngularJS移动端开发遇到的问题
最近在开发一个移动WebAPP的小项目,因为之前一直使用AngularJS, 对于这个项目,废话不多说,拿过来就用上了. 开发过程是一路通畅和舒服的,但是,却忽略了一个非常重要的问题,移动2G环境下的 ...
- centos7 cannot find a valid baseurl for repo base （转载）
centos7 cannot find a valid baseurl for repo base 今天在虚拟机下安装centosmini版本,安装后第一件事就是yum update 但是有错 ...