h5 的 audio 标签知识点
因为音频格式有版权,各浏览器使用不同的音频格式。
音频格式兼容性
| 音频格式 | Chrome | Firefox | IE9 | Opera | Safari |
|---|---|---|---|---|---|
| MP3 | 支持 | 不支持 | 支持 | 不支持 | 支持 |
| OGG | 支持 | 支持 | 支持 | 支持 | 不支持 |
| WAV | 不支持 | 支持 | 不支持 | 支持 | 不支持 |
一般提供ogg和mp3格式,就可以支持所有主流浏览器了。
音频格式比较:
wav格式音质最好,但是文件体积较大。
mp3压缩率较高,普及率高,音质相比wav要差。
ogg与mp3在相同位速率(Bit Rate)编码的情况下,ogg体积更小,并且ogg是免费的不用交专利费(这点国人很中意)。获取音频时长兼容
问题: H5 Audio标签的MP3播放长度duration,返回值为NaN?
解决:因为还没加载完音频,所以duration会返回NaN。当音频/视频处于加载过程中时,会依次发生以下事件:
loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough
h5 的 audio 标签知识点的更多相关文章
- H5之audio标签放音兼容所有浏览器方法
前端交流群,群文件提供大量文档.书籍和资料.期待你的加入!群号:127768464 由于项目需要,最近刚做了一个网页放音的功能,使用到了H5新标签<audio></audio> ...
- 微信h5页面audio标签在ios下不能自动播放
背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...
- H5页面实现一个Audio标签加载多个音频文件,并进行播放和展示音频长度
最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下: 1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件 ...
- H5 audio标签
37-audio标签 注意点: audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样 只不过有3个属性不能用, heig ...
- html5 audio标签相关知识点总结
1.audio指JS原生对象,假如用jquery获取到audio标签后,需要dom[0]转为原生JS对象 if(audio.paused){ //如果音频暂停,就播放 audio.play(); }e ...
- <video>和<audio>标签,对视频和音频的支持
H5新增了<video>和<audio>标签,提供对视频和音频的支持 <audio>的属性与<video>属性相同 <video> vide ...
- html5 -----audio标签
在现在的公司上班需要做一个html5页面,上下可以滑动的,在页面上需要音乐,默认开始音乐播放,点击音乐标签后音乐停止.后来在项目开发中,遇到性能优化的问题,所以我建议大家以后在使用时不要直接在页面中使 ...
- 用<audio>标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...
- HTML5的Audio标签打造WEB音频播放器
目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...
随机推荐
- iOS UI-界面传值(三种方法)
#import <Foundation/Foundation.h> @interface DataModel : NSObject @property (nonatomic, copy) ...
- shell 命令参数
$# 是传给脚本的参数个数$0 是脚本本身的名字$1 是传递给该shell脚本的第一个参数$2 是传递给该shell脚本的第二个参数$@ 是传给脚本的所有参数的列表$* 是以一个单字符串显示所有向脚本 ...
- Awk 从入门到放弃(3) —- 内置变量
转:http://www.zsythink.net/archives/1374 NF :当前行的字段个数 NR: 行号 FNR: 各文件分别计数的行号 RS: 输入行分隔符 ORS:输出行分隔符 内 ...
- bzoj3332
题解: 首先只有存在的路有可能有值 然后在存储矩阵的同时对于本来就有边的情况直接存下来这条边的值 然后跑一次最大生成树 在最大生成树的同时就可以求出矩阵的信息. 代码: #include<bit ...
- pyqt(二) 创建第一个程序(helloworld)解决object has no attribute 'setCentralWidget'
1.运行Qt Creator QtCreator主界面分为了6个模式:欢迎模式.编辑模式.设计模式.Debug调试模式.项目模式和帮助模式,分别由左侧的6个图标进行切换,对应的快捷键是Ctrl + 数 ...
- 1.3 C++引用(Reference)
参考:http://www.weixueyuan.net/view/6328.html 总结: 引用是变量的另外一个别名,不是指针,与原变量名同指相同的内存.可以原变量的值. 在函数中作为形参可以修改 ...
- SharePoint 元数据服务-PowerShell
1. 获取元数据服务应用程序标识 Get-SPServiceApplication 2. 获取指定的元数据服务应用程序实例 $metadataApp = Get-SPMetadataServiceAp ...
- ide fix pack for delph 10.2.3发布了
http://andy.jgknet.de/blog/ide-tools/ide-fix-pack/ IDE Fix Pack是RAD Studio IDE,Win32 / Win64 / Andoi ...
- HackPwn:TCL智能洗衣机破解细节分析
上周结束的Hackpwn上,黑客们脑洞大开,破解了比亚迪汽车.小米手环.乐小宝.长虹电视.TCL洗衣机和九阳豆浆机等一系列最新的智能硬件,据黑客介绍,TCL是一家把家门“砌死”的企业,由于得到了将要被 ...
- JSP--TOMCAT-MYSQL web页面查询
queryStudent.jsp代码如下 <%@ page language="java" contentType="text/html; charset=gb23 ...