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

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. 		<title>测试各种浏览器支持的音乐格式</title>
  5. </head>
  6. <body>
  7. <br />
  8. <br />
  9. <br />
  10.  播放《庄心妍-一万个舍不得》：
  11. <br />
  12. <br />
  13. <br />
  14. 		<audio controls="controls">
  15. 			<source src="song.ogg" type="audio/ogg">
  16. 			<source src="song.m4a" type="audio/mpeg">
  17. 			<source src="song.mp3" type="audio/mpeg">
  18. 				你的浏览器不支持html5的audio标签
  19. 		</audio>
  20.  
  21. <br />
  22. <br />
  23. <br />
  24. 播放《曲婉婷-我的歌声里》
  25. <br />
  26. <br />
  27. <br />
  28. 		<audio controls="controls">
  29. 			<source src="song2.ogg" type="audio/ogg">
  30. 			<source src="song2.mp3" type="audio/mpeg">
  31. 				你的浏览器不支持html5的audio标签
  32. 		</audio>
  33.  
  34. <br />
  35. <br />
  36. <br />
  37. </body>
  38. </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. 不合法的请求字符，不能包含\uxxxx格式的字符

    不合法的请求字符,不能包含\uxxxx格式的字符 ,不支持数组转json_encode()格式, 需要直接将数组,拼合成 json格式 ** * 微信api不支持中文转义的json结构 * @para ...

  2. 玩转maven

    Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个依赖管理系统(Depen ...

  3. Nginx优化思路

    对于高性能网站 ,请求量大,如何支撑? 1方面,要减少请求 对于开发人员----合并css, 背景图片, 减少mysql查询等. 2: 对于运维 nginx的expires ,利用浏览器缓存等,减少查 ...

  4. while for if ---语句和编写计划任务

    关于while循环: while do done 例如 1.关于内存的实时操作: (1).vim a.sh (2).输入以下while循环 (3)../a.sh执行脚本 2.自加一的操作: (1).v ...

  5. 31-THREE.JS 正方体

    <!DOCTYPE html> <html> <head> <title>Example 05.04 - Basic 2D geometries - C ...

  6. 原创：Scala学习笔记（不断更新）

    Scala是一种函数式语言和面向对象语言结合的新语言,本笔记中就零散记下学习scala的一些心得,主要侧重函数式编程方面. 1. 以递归为核心控制结构. 实现循环处理的方式有三种:goto,for/w ...

  7. windows ubuntu Android studio安装好启动没反应解决方法

     参考:http://blog.csdn.net/qq305013720/article/details/8934152 目前有三种解决方案,都是针对执行studio.bat出现错误导致andro ...

  8. matlab将矩阵写入文件

    % %% date: 5/5/2017 % %% Author: Congbo Ma, Hu Wang % % write matrix to file function wrt_mat_to_fil ...

  9. Unity3d command line arguments

    Options Many of these relate to Unity3d command line arguments Batch Mode - should be left enabled u ...

  10. 小程序连续点击bug解决

    问题描述: 1)wxml片段 <view bindtap="loadMulti"> <text>连续点击,加载多次</text> </vi ...