音频格式 Chrome Firefox IE9 Opera Safari
OGG 支持 支持 支持 支持 不支持
MP3 支持 不支持 支持 不支持 支持
WAV 不支持 支持 不支持 支持 不支持

一般提供ogg和mp3格式，就可以支持所有主流浏览器了。

<!DOCTYPE HTML>

<html>

<head>

		<title>测试各种浏览器支持的音乐格式</title>

</head>

<body>

<br />

<br />

<br />

 播放《庄心妍-一万个舍不得》：

<br />

<br />

<br />

		<audio controls="controls">

			<source src="song.ogg" type="audio/ogg">

			<source src="song.m4a" type="audio/mpeg">

			<source src="song.mp3" type="audio/mpeg">

				你的浏览器不支持html5的audio标签

		</audio>

<br />

<br />

<br />

播放《曲婉婷-我的歌声里》

<br />

<br />

<br />

		<audio controls="controls">

			<source src="song2.ogg" type="audio/ogg">

			<source src="song2.mp3" type="audio/mpeg">

				你的浏览器不支持html5的audio标签

		</audio>

<br />

<br />

<br />

</body>

</html>

有朋友说苹果safari支持m4a格式，在iphone上测试不支持，支持播放mp3格式的.

进过测试，PC浏览器可以同时播放两个音乐，平板和手机只能播放一个。

音频格式知识普及：

Ogg：全称应该是OGGVobis(oggVorbis)是一种新的音频压缩格式，类似于MP3等的音乐格式。Ogg是完全免费、开放和没有专利限制的。OggVorbis文件的扩展名是.OGG。Ogg文件格式可以不断地进行大小和音质的改良，而不影响旧有的编码器或播放器。

MP3：是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3。它被设计用来大幅度地降低音频数据量。利用 MPEG Audio Layer 3 的技术，将音乐以1:10 甚至 1:12 的压缩率，压缩成容量较小的文件，而对于大多数用户来说重放的音质与最初的不压缩音频相比没有明显的下降。

WAV：为微软公司(Microsoft)开发的一种声音文件格式，它符合RIFF(Resource Interchange File Format)文件规范，用于保存Windows平台的音频信息资源，被Windows平台及其应用程序所广泛支持，该格式也支持MSADPCM，CCITT A LAW等多种压缩运算法，支持多种音频数字，取样频率和声道，标准格式化的WAV文件和CD格式一样，也是44.1K的取样频率，16位量化数字，因此在声音文件质量和CD相差无几！

各种关联：wav格式音质最好，但是文件体积较大。mp3压缩率较高，普及率高，音质相比wav要差。ogg与mp3在相同位速率(Bit Rate)编码的情况下，ogg体积更小，并且ogg是免费的不用交专利费（这点国人很中意）。

不同浏览器对于html5 audio标签和音频格式的兼容性的更多相关文章

  1. CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

    CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件   原因略.   解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...

  2. HTML5 <Audio/>标签Api整理（二）

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  3. HTML5 <Audio>标签API整理(一)

    简单实例: <audio id="myAudio"></audio> <script> var myAudio = document.getEl ...

  4. HTML5 <Audio>标签API整理(三)

    一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...

  5. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  6. HTML5 Audio标签方法和函数API介绍

    问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...

  7. ios加载html5 audio标签用js无法自动播放

    html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...

  8. 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题

    https://www.cnblogs.com/yangjie-space/p/4816279.html html5shiv.js和respond.min.js 做页面常用的东西,写这里用的时候省点去 ...

  9. 如何让旧浏览器支持HTML5新标签

    HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...

随机推荐

  1. @ResponseBody与@RestController的作用与区别

    在使用springmvc框架的时候,在处理json的时候需要用到spring框架特有的注解@ResponseBody或者@RestController注解,这两个注解都会处理返回的数据格式,使用了该类 ...

  2. Sqlite/ FMDB

    Sqlite 1. Sqlite数据库 > 数据库? 按数据结构来组织,存储和管理数据的仓库. > 关系型数据库:使用二维表及其之间的联系组织成一个数据组织. 关系:可以理解为一张二维表, ...

  3. vue仿京东画线验证码，前端手指位置数据获取

    需求是这样的,京东H5移动端登录,有个安照箭头方向,画线登录的验证,看看是怎么实现的: 直接上代码了: <template> <div v-if="visible" ...

  4. 数据库基础 非关系型数据库 MongoDB 和 redis

    数据库基础 非关系型数据库 MongoDB 和 redis 1 NoSQL简介 访问量增加,频繁的读写 直接访问(硬盘)物理级别的数据,会很慢 ,关系型数据库的压力会很大 所以,需要内存级的读写操作, ...

  5. I.MX6 AR8031 寄存器操作

    /*************************************************************************** * I.MX6 AR8031 寄存器操作 * ...

  6. HihoCoder 1044 01-string 贪心

    1144 : 01串 时间限制:7000ms 单点时限:1000ms 内存限制:256MB 描述 给定两个整数n和m,求是否存在恰好包含n个0和m个1的01串S,使得S中不存在子串"001& ...

  7. rhel7+apache+c cgi+动态域名实现web访问

    1. 申请动态域名/安装no-ip客户端 https://blog.csdn.net/lee244868149/article/details/44095835 2. yum安装httpd 两种方法安 ...

  8. c#和c++互操作（平台调用相关）

    [DllImport("ScreenCaptureLib.dll", CallingConvention = CallingConvention.Cdecl)] public st ...

  9. LA4728 Squares

    题意 PDF 分析 就是求凸包点集的直径. 当然选择旋转卡壳. 然后是实现上的技巧: 当Area(p[u], p[u+1], p[v+1]) <= Area(p[u], p[u+1], p[v] ...

  10. 解决Maven报Plugin execution not covered by lifecycle configuration问题

    问题: 在eclipse neon 中引入maven项目时,弹出两个错误,一个是jacco-maven-plugin,一个是项目中的插件ota-schema-plugin 如果忽略这两个错误,点击fi ...