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

  • 音频格式兼容性

音频格式 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. Java curator操作zookeeper获取kafka

    Java curator操作zookeeper获取kafka Curator是Netflix公司开源的一个Zookeeper客户端,与Zookeeper提供的原生客户端相比,Curator的抽象层次更 ...

  2. 再起航，我的学习笔记之JavaScript设计模式03

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 上一 ...

  3. 解读 Vue 之 Reactive

    本文同步发表在 https://github.com/whxaxes/blog/issues/7 前言 在一篇文章中简单讲了 vue 是如何把模板解析成 render function 的,这一篇文章 ...

  4. python_装饰器_语法糖

    什么是高阶函数? -- 把函数名当做参数传给另外一个函数,在另外一个函数中通过参数调用执行 #!/usr/bin/python3 __author__ = 'beimenchuixue' __blog ...

  5. 一个普通的 Zepto 源码分析（三） - event 模块

    一个普通的 Zepto 源码分析(三) - event 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块, ...

  6. 分页工具类 BaseAction

    package com.xxxxxxx.bos.web.action.common; import java.io.IOException; import java.lang.reflect.Para ...

  7. python伪装浏览器爬虫

    待完善 import urllib2,urllib,cookielib urllib.getproxies_registry=lambda:{} request=urllib2.Request(&qu ...

  8. MySQL写压力性能监控与调优

    写压力调优:数据库的写.写压力性能监控.写压力调优参数 一.关于DB的写 1.数据库是一个写频繁的系统 2.后台写.写缓存 3.commit需要写入 4.写缓存失效或者写满-->写压力陡增--& ...

  9. SQL 四种连接查询（内连接、左连接、右连接、全连接）

    下面列出了您可以使用的 JOIN 类型,以及它们之间的差异. (1)     JOIN: 如果表中有至少一个匹配,则返回行(inner join) (2)     LEFT JOIN: 即使右表中没有 ...

  10. 用node写一个皖水公寓自动刷房源脚本

    因为住的地方离公司太远,每天上下班都要坐很久的班车,所以最近想搬到公司旁边的皖水公寓住.去问了一下公寓的客服,客服说房源现在没有了,只能等到别人退房,才能在网站上申请到. 如果纯靠手动F5刷新浏览器, ...