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

  • 音频格式兼容性

音频格式 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. HDU1002——大整数加法

    题目: I have a very simple problem for you. Given two integers A and B, your job is to calculate the S ...

  2. LoadRunner性能测试-LoadRunner工具安装

    Loadrunner11安装 1,在网上下载loadrunner11安装包 (百度可以下载安装包) 2,打开安装文件,点击setup.exe进行安装: 3,win10系统可能会出现如下问题: 提示管理 ...

  3. 木棍分割[HAOI2008]

    题目描述 有n根木棍, 第i根木棍的长度为Li,n根木棍依次连结了一起, 总共有n-1个连接处. 现在允许你最多砍断m个连接处, 砍完后n根木棍被分成了很多段,要求满足总长度最大的一段长度最小, 并且 ...

  4. NET中解决KafKa多线程发送多主题的问题

    一般在KafKa消费程序中消费可以设置多个主题,那在同一程序中需要向KafKa发送不同主题的消息,如异常需要发到异常主题,正常的发送到正常的主题,这时候就需要实例化多个主题,然后逐个发送. 在NET中 ...

  5. swift UITapGestureRecognizer获取点击事件点击的位置point

    func picTap(sender: UITapGestureRecognizer) { let point = sender.location(in: sender.view) } 其中获取的po ...

  6. LindAgile~大叔新宠~一个无所不能框架

    关于她 LindAgile是大叔在这两年里的新宠儿,它主推模块化,插件化,敏捷化,主要于LindAgile基础项目,LindAgile.Http项目,LindAgile.Modules项目和几个扩展模 ...

  7. 【学习OpenCV】——2.4对图像进行平滑处理

    作者基于WIN10+VS2015+OpenCV3.0.0 (本人在学习的时候参考了xiahouzuoxin 的有关文章,在此感谢 ) 图像平滑与图像模糊是同一概念,主要用于图像的去噪.平滑要使用滤波器 ...

  8. 白帽子之路首章：Footprinting, TARGET ACQUISITION

    *Disclaimer: All materials provided on this blog are for educational purposes only. The author and o ...

  9. HTML5 — Wed SQL 本地数据库示例

    1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF- ...

  10. 【Java学习笔记之二十五】初步认知Java内部类

    可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 第一次见面 内部类我们从外面 ...