音频格式 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. ffmpeg的centos、msys2、msvc编译

    msys2 和 centos https://ffmpeg.org/download.html https://ffmpeg.zeranoe.com/builds/ Windows MSYS2准备 1 ...

  2. 使用Spring实现MySQL读写分离

    1. 为什么要进行读写分离 大量的JavaWeb应用做的是IO密集型任务, 数据库的压力较大, 需要分流 大量的应用场景, 是读多写少, 数据库读取的压力更大 一个很自然的思路是使用一主多从的数据库集 ...

  3. C#学习历程(一)[基础概念]

    #小摘要 >> boolean和bool差不多是一个东西,但是bool是一个基本值的类型,boolean则是对象(java与javascript中有用). Bool是Boolean的别名. ...

  4. UI-自定义TabBar

    MyCustomTabBar.h文件 #import <UIKit/UIKit.h> @interface MyCustomTabBar : UITabBarController @end ...

  5. .net学习路线(转)

    入门篇1.         学习面向对象(OOP)的编程思想 许多高级语言都是面向对象的编程,.NET也不例外.如果您第一次接触面向对象的编程,就必须理解类.对象.字段.属性.方法和事件.封装.继承和 ...

  6. 简要谈谈javascript bind 方法

    最近去参加了场面试,跟面试官聊了很多JS基础上的东西,其中有个问题是谈谈对apply.call.bind的理解和区别.顿时一愣,apply.call我知道,经常用的东西,bind是什么鬼!!!好像见过 ...

  7. lzugis—搭建属于自己的小型的版本控制SVN

    对于不了解SVN的同志们可以参考下"mh942408056"的这篇博文,SVN简介,链接地址为:http://blog.csdn.net/mh942408056/article/d ...

  8. Tinker爬坑之路

    目的 热修复去年年底出的时候,变成了今年最火的技术之一.依旧记得去年面试的时候统一的MVP,然而今年却变成了RN,热修复.这不得不导致我们需要随时掌握最新的技术.不然可能随时会被淘汰.记得刚进公司,技 ...

  9. markdown 语法汇总

    Markdown是什么? Markdown是一种轻量级标记语言,它以纯文本形式(_易读.易写.易更改_)编写文档,并最终以HTML格式发布. Markdown也可以理解为将以MARKDOWN语言编写的 ...

  10. 火狐下的GreaseMonkey和Chrome下的tampermonkey使用手记

    说明:GreaseMonkey的作用是让我们浏览器运行我们自己写的脚本,而且是在后台一直不断的运行,听着就让人兴奋. [ps:他们当然可以创建名单对哪些网站作用或者排除哪些站点]: 开始了:Greas ...