音频格式 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. spring3: helloword

    借助:eclipse,mavn,spring-tool-sitedchapter2.helloworld 项目搭建好了,让我们来开发接口,此处我们只需实现打印“Hello World!”,所以我们定义 ...

  2. 【Demo】CSS图像拼合技术

    图像拼合 图像拼合 - 简单实例 <style> img.home { width: 46px; height: 44px; background: url(/images/img_nav ...

  3. [java插件]myeclipse添加插件

    在C:\Program Files\MyEclipse 6.0\eclipse\links里建立一个svn.link. svn.link文件内容: path=C:/Program Files/MyEc ...

  4. python基础8之类的实例化过程剖析

    一.概述 之前我们说关于python中的类,都一脸懵逼,都想说,类这么牛逼到底是什么,什么才是类?下面我们就来讲讲,什么是类?它具有哪些特性. 二.类的语法 2.1 语法 class dog(obje ...

  5. HDU 3452 Bonsai（树形dp）

    Bonsai Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submis ...

  6. ./startup.sh: /bin/sh^M: bad interpreter: 没有那个文件或目录 解决办法

    这是因为Linux上 的catalina.sh文件格式给修改了,看不出来,这样就必须通过vim编辑下,变为正常的格式,在catalina.sh的命令模式下输入  ( :set ff=unix ),接着 ...

  7. Android Issue分析方法（用anr来说明）

    Log的产生大家都知道 , 大家也都知道通过DDMS来看log , 但什么时候会产生log文件呢 ?一般在如下几种情况会产生log文件 . 1,程序异常退出 , uncaused exception ...

  8. 使用vscode书写博客

    很早就开始使用过vscode了,不过在已经成熟的sublime的碾压下,vscode一直没有成为我的首选,今天为了更好的博客书写体验,我直接放弃了sublime,因为 sublime对中文支持不好,而 ...

  9. Cisco DHCP 配置要点

    实验拓扑图:IOU5/6/7模拟主机 IOU1为DHCP服务器 IOU2为DHCP中继器 IOU3/4为局域网内的交换机 在IOU1中配置DHCP配置 IOU2作为DHCP中继,在E0/0.10和E0 ...

  10. （二）canvas边框问题

    lineWidth 设置边框的大小 fillStyle 设置div的颜色 strokeStyle 设置边框的颜色 注: 边框在不设置的情况下默认为1px 黑色,但是x,y轴的距离是以图形的正中心为原始 ...