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

  • 音频格式兼容性

音频格式 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

h5audio标签的更多相关文章

  1. 一个基于H5audio标签的vue音乐播放器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. h5-audio/video标签

    音频/视频 基础用法 属性 事件 audio元素和video元素 <audio id="audio" src="./成都.mp3"></aud ...

  3. 干掉H5audio音频标签的下载按钮

    audio::-internal-media-controls-download-button {display:none;}audio::-webkit-media-controls {overfl ...

  4. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  5. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  6. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  7. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  8. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  9. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

随机推荐

  1. Mysql自动填充测试数据

    前言 最近写了两个小脚本,一个应用于Mysql的自动填充测试数据,另外一个是bash写的定期删除日志文件,两个脚本如何使用,在GitHub上面都有所说明,这里不再赘述,这里主要是想聊一下Mysql的存 ...

  2. ABP+AdminLTE+Bootstrap Table权限管理系统第三节--abp分层体系及实体相关

    说了这么久,还没有详细说到abp框架,abp其实基于DDD(领域驱动设计)原则的细看分层如下: 再看我们项目解决方案如下: JCmsErp.Application,应用层:进行展现层与领域层之间的协调 ...

  3. 笨办法用js屏蔽被http劫持的浮动广告

    最近发现网站经常在右下角弹出一个浮动广告,开始的时候以为只是浏览器的广告. 后来越来越多同事反映在家里不同浏览器也会出现广告.然后深入检查了下,发现网站竟然被劫持了. 然后百度了一大堆资料,什么htt ...

  4. 将SpringMVC中的HttpMessageConverter替换为Gson

    读者们看到这个标题也许会感到奇怪,SpringMVC中默认的HttpMessageConverter不是Jackson吗,但是我在使用的过程中发现Jackson并不好用,如果有一些复杂的嵌套类型,当然 ...

  5. （转载）Stackoverflow评选的C++推荐书单

    C++必读书籍推荐 (原链接:http://bestcbooks.com/recommended-cpp-books 2013-10-07) 本文内容来自国外著名编程问答网站Stackoverflow ...

  6. 58. Length of Last Word【leetcode】

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...

  7. CentOS7.3利用kubeadm安装kubernetes1.7.3完整版(官方文档填坑篇)

    安装前记: 近来容器对企业来说已经不是什么陌生的概念,Kubernetes作为Google开源的容器运行平台,受到了大家的热捧.搭建一套完整的kubernetes平台,也成为试用这套平台必须迈过的坎儿 ...

  8. python编程基础知识—列表（一）

    1 列表 用[]来表示列表,并用逗号分隔其中的元素.如: B=['trek','cannondale','redline','specialized'] print(B) ['trek', 'cann ...

  9. table之thead兼容

    今天遇到一个小bug,是关于table中thead,tbody,tfoot的兼容问题: 在开发的时候为了方便写样式,我就把表格的标题部分关于th的内容放在了thead中,当然了,我也没有写tbody和 ...

  10. Qt将窗体变为顶层窗体

    //重载resizeEvent和moveEvent两个函数,以保证窗体大小和位置改变后能时刻记住其位置 QRect curGemRect = mpWindow->geometry(); //激活 ...