不同浏览器对于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是免费的不用交专利费(这点国人很中意)。
相关文章
- AngularJS中使用HTML5摄像头拍照
- HTML5 FileReader实现图片上传前预览
- Safari支不支持HTML5录音? 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API。
- php +html5 websocket 聊天室
- 2013年19个最棒的HTML5网站模板免费下载
- 在cocos2d-x jsb/html5中设置触摸代理的方法
- Vue开发的仿美团外卖Html5前端页面
- HTML5大战原生开发应用 谁赢谁输?
- HTML5开发移动web应用—JQuery Mobile(1)
- 强大的HTML5幻灯片系统:H5Slides
- 浏览器碎片化问题严重 71%的HTML5开发者担忧
- html5 video.js 使用及兼容所有浏览器
- HTML5的文档结构
- Ionic - 先进的 HTML5 移动开发框架和 SDK
- Breach - HTML5 时代,基于 JS 编写的浏览器
- Skytte:一款令人印象深刻的 HTML5 射击游戏
- HTML5学习笔记简明版(8):新增的全局属性
- Cross-Browser HTML5 Placeholder Text
- 基于html5制作3D拳击游戏源码下载
- 基于HTML5实现的中国象棋游戏
- 一款由html5 canvas实现五彩小圆圈背景特效
- HTML5原生拖放实例分析
- [cocos2dx-html5]手把手,快速搭建 Cocos2d-HTML5 开发调试环境