• 因为音频格式有版权,各浏览器使用不同的音频格式。

  • 音频格式兼容性

音频格式 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 标签知识点的更多相关文章

  1. H5之audio标签放音兼容所有浏览器方法

    前端交流群,群文件提供大量文档.书籍和资料.期待你的加入!群号:127768464 由于项目需要,最近刚做了一个网页放音的功能,使用到了H5新标签<audio></audio> ...

  2. 微信h5页面audio标签在ios下不能自动播放

    背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...

  3. H5页面实现一个Audio标签加载多个音频文件,并进行播放和展示音频长度

    最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下: 1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件 ...

  4. H5 audio标签

    37-audio标签 注意点: audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样 只不过有3个属性不能用, heig ...

  5. html5 audio标签相关知识点总结

    1.audio指JS原生对象,假如用jquery获取到audio标签后,需要dom[0]转为原生JS对象 if(audio.paused){ //如果音频暂停,就播放 audio.play(); }e ...

  6. <video>和<audio>标签,对视频和音频的支持

    H5新增了<video>和<audio>标签,提供对视频和音频的支持 <audio>的属性与<video>属性相同 <video> vide ...

  7. html5 -----audio标签

    在现在的公司上班需要做一个html5页面,上下可以滑动的,在页面上需要音乐,默认开始音乐播放,点击音乐标签后音乐停止.后来在项目开发中,遇到性能优化的问题,所以我建议大家以后在使用时不要直接在页面中使 ...

  8. 用<audio>标签打造一个属于自己的HTML5音乐播放器

    上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...

  9. HTML5的Audio标签打造WEB音频播放器

    目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...

随机推荐

  1. java keytool详解

    Keytool 是一个Java 数据证书的管理工具 ,Keytool 将密钥(key)和证书(certificates)存在一个称为keystore的文件中. 在keystore里,包含两种数据:(1 ...

  2. 如何合理命名CSS文件——摘自网友

    有经验的网页制作者都明白,对于有多个栏目的大型网站而言,使用单一的CSS文件是不可能的.但CSS文件名如何命名对于新手来说是件容易出乱子的事.如何才能将CSS的命名做得井井有条? 坚持使用统一的CSS ...

  3. MessageFormat格式化数字

    使用MessageFormat格式化数字,有一个很隐蔽的技巧点: public static void main(String[] args) { MessageFormat mf = new Mes ...

  4. 开源软件架构总结之——Asterisk(DSL、组件、多线程)

    Asterisk 1是基于GPLv2协议发布的一款开源电话应用平台.简单地说,这是一个服务端程序,用于处理电话的拨出.接入以及自定义流程. 一个人使用电话A呼叫另一个使用电话B的人.在此场景下,连接到 ...

  5. elasticsearch配置详解

    一.说明 使用的是新版本5.1,直接从官网下载rpm包进行安装,https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5 ...

  6. SQL基础日期函数

    --dateadd 将制定的数值添加到指定的日期部分后的日期 select dateadd(mm,4,'01/01/99') -- 返回:以当前的日期格式返回05/01/99 --datediff 二 ...

  7. 浅谈Obejct.assign

    Object.assign属于浅拷贝 Object.assign只能拷贝:可被枚举的属性,自有属性,string或者Symbol类型是可以被直接分配的 var ab={ name:"没有被覆 ...

  8. Java——IO类,转换流简化写法

    body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...

  9. Python 编程核心知识体系-模块|面向对象编程(三)

    模块 面向对象编程

  10. C++基础:什么是命名空间

    命名空间是类的逻辑分组,它组织成一个层次结构——逻辑树.这个树的根是System.名字空间是为了防止名字污染在标准C++中引入的.它可以将其中定义的名字隐藏起来,不同的名字空间中可以有相同的名字而互不 ...