不同浏览器对于html5 audio标签和音频格式的兼容性
| 音频格式 | 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标签和音频格式的兼容性的更多相关文章
- CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件
CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件 原因略. 解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...
- HTML5 <Audio/>标签Api整理(二)
1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...
- HTML5 <Audio>标签API整理(一)
简单实例: <audio id="myAudio"></audio> <script> var myAudio = document.getEl ...
- HTML5 <Audio>标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
- 让ie浏览器支持html5新标签的解决方法(使用html5shiv)
没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...
- HTML5 Audio标签方法和函数API介绍
问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...
- ios加载html5 audio标签用js无法自动播放
html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...
- 解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题
https://www.cnblogs.com/yangjie-space/p/4816279.html html5shiv.js和respond.min.js 做页面常用的东西,写这里用的时候省点去 ...
- 如何让旧浏览器支持HTML5新标签
HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...
随机推荐
- phpexcel: 数据导出
// 设置列名最多40个 $cols = array( "A", "B", "C", "D", "E" ...
- 完全卸载gitlab
完全卸载删除gitlab 2017年5月29日 wuhao 暂无评论 4,089次浏览 完全卸载删除gitlab 1.停止gitlab 1 gitlab-ctl stop 2.卸载gitlab ...
- android多国语言使用
多国语言:在res目录下建立不同名称的values文件来调用不同的语言包 Values文件汇总如下: 中文(中国):values-zh-rCN 中文(台湾):values-zh-rTW 中文(香港): ...
- tomcat学习篇
要求: 为Apache HTTP Server服务器添加JSP网页支持. 能够访问Tomcat容器的Web管理界面,以便管理各种JSP.Servelet应用. u 知识提示 在各种企业级网站应用系统中 ...
- DOCKER实战案例
操作系统:[root@yz6205 ~]# docker search busyboxNAME DESCRIPTION STARS OFFICIAL AUTOMATEDbusybox Busybox ...
- static-静态类型
1.基本概念 好像没什么概念. 2.作用 主要是两个:隐藏和保持值 01.隐藏 当在一个文件中定义了一个static全局变量,则该变量对该文件是可见的,对其他的文件不可见,也就减少了变量冲突的问题. ...
- PowerDesigner 概念数据模型
(转自:http://www.cnblogs.com/yxonline/archive/2007/04/09/705479.html) 目标:本文主要介绍PowerDesigner中概念数据模型 CD ...
- LeetCode OJ:Product of Array Except Self(除己之外的元素乘积)
Given an array of n integers where n > 1, nums, return an array output such that output[i] is equ ...
- javascript: 代码优化
一.避免全局查找 在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些 function search() { //当我要使用当前页面地址和主机域 ...
- Visual Studio 2008常见问题
1.asp.net在什么软件上运行?学习asp往往需要测试asp程序,电脑不能直接测试,需要装IIS才能运行,但装IIS要么需要安装盘,要么需要安装包,而且设置也很复搜索杂.这里给大学推荐两个替代II ...