音频格式 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. yii2: oracle汉字占用字节长度

    OCIStmtExecute: ORA-12899: value too large for column "WSG"."WX_ENTER_TASTE".&qu ...

  2. 转:Hive性能优化之ORC索引–Row Group Index vs Bloom Filter Index

    之前的文章<更高的压缩比,更好的性能–使用ORC文件格式优化Hive>中介绍了Hive的ORC文件格式,它不但有着很高的压缩比,节省存储和计算资源之外,还通过一个内置的轻量级索引,提升查询 ...

  3. mysql-in关键字，分组查询，分页查询

    1. in关键字,组查询 # 使用or来查询的化,不方便而且参数一多比较傻 select * from users where id=1 or id=2 or id=4; select * from ...

  4. SpringBoot_11_将springboot项目部署到外部tomcat上

    一.前言 二. 三.参考资料 如何将Spring Boot项目打包部署到外部Tomcat 2.SpringBoot 项目如何在tomcat容器中运行

  5. JavaScript高级程序设计读后感（一）

    一.什么是JavaScript? 本质? 历史? 表单验证发展成为一门语言 局限性?

  6. Android studio 导入ApiDemo

    1.import 项目,sdk目录:sdk\samples\android-21\legacy\ApiDemos,import时一直下一步就ok了. 2.Error:Error: The file n ...

  7. Intellij IDEA基于Springboot的远程调试

    简介 本篇博客介绍一下在Intellij IDEA下对Springboot类型的项目的远程调试功能.所谓的远程调试就是服务端程序运行在一台远程服务器上,我们可以在本地服务端的代码(前提是本地的代码必须 ...

  8. findContours()的使用崩溃问题

    之前用的好好的,不知咱弄得就突然崩溃.然后网上搜了半天. 各种试,不行. 有一种改变代码方式的做法,可行,但是心里用着很是不爽.vector<vector<Point>>con ...

  9. IDEA导出想要的sql供H2数据库使用

    通过Database连接远程oracle数据库. 选择对应的数据库 双击该数据库需要查询的表,进行自动查询,展示结果. 在查询结果中选择某条数据,右键,选择Data Executer,选择对应的方式. ...

  10. window如何分区

    WD官方技术支持电话:800热线800-820-6682(请于周一至周五工作日期间使用固定电话拨打,不支持手机用户)手机用户请拨打400-627 6682. 链接:https://kuyusm.tma ...