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中的音频文件,用户不再为浏览 ...
随机推荐
- java keytool详解
Keytool 是一个Java 数据证书的管理工具 ,Keytool 将密钥(key)和证书(certificates)存在一个称为keystore的文件中. 在keystore里,包含两种数据:(1 ...
- 如何合理命名CSS文件——摘自网友
有经验的网页制作者都明白,对于有多个栏目的大型网站而言,使用单一的CSS文件是不可能的.但CSS文件名如何命名对于新手来说是件容易出乱子的事.如何才能将CSS的命名做得井井有条? 坚持使用统一的CSS ...
- MessageFormat格式化数字
使用MessageFormat格式化数字,有一个很隐蔽的技巧点: public static void main(String[] args) { MessageFormat mf = new Mes ...
- 开源软件架构总结之——Asterisk(DSL、组件、多线程)
Asterisk 1是基于GPLv2协议发布的一款开源电话应用平台.简单地说,这是一个服务端程序,用于处理电话的拨出.接入以及自定义流程. 一个人使用电话A呼叫另一个使用电话B的人.在此场景下,连接到 ...
- elasticsearch配置详解
一.说明 使用的是新版本5.1,直接从官网下载rpm包进行安装,https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5 ...
- SQL基础日期函数
--dateadd 将制定的数值添加到指定的日期部分后的日期 select dateadd(mm,4,'01/01/99') -- 返回:以当前的日期格式返回05/01/99 --datediff 二 ...
- 浅谈Obejct.assign
Object.assign属于浅拷贝 Object.assign只能拷贝:可被枚举的属性,自有属性,string或者Symbol类型是可以被直接分配的 var ab={ name:"没有被覆 ...
- Java——IO类,转换流简化写法
body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...
- Python 编程核心知识体系-模块|面向对象编程(三)
模块 面向对象编程
- C++基础:什么是命名空间
命名空间是类的逻辑分组,它组织成一个层次结构——逻辑树.这个树的根是System.名字空间是为了防止名字污染在标准C++中引入的.它可以将其中定义的名字隐藏起来,不同的名字空间中可以有相同的名字而互不 ...