html5中audio支持音频格式的解决方法


Posted in HTML / CSS onAugust 24, 2018

HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持。不是所有的浏览器都支持MP3 OGG之类的,每个浏览器因为版权的问题支持的格式都是不一样的。

浏览器和音频兼容性

浏览器制造商并非都同意使用某种音频文件格式。对于图像,PNG、JPEG 或 GIF 格式的文件在任何浏览器上都能加载到您的网页里。遗憾的是,音频文件并非如此。表 1 展示了网页中可以使用的音频文件格式,但是并非所有格式都能用于所有浏览器。例如,Chrome、Internet Explorer 9 (IE9) 和 Safari 浏览器不支持 WAV 文件,这是一种使用非压缩格式且正在衰败的标准。

HTML5浏览器和音频格式兼容性

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

没有一种通用的文件格式让每个浏览器都使用单个文件格式意味着至少有 2/5 的浏览器无法播放某些声音。这不是无法在单一音频标准中达成一致的浏览器制造商不妥协的问题,而是涉及专利权和特许权使用费的法律和财务问题。不受软件专利限制的 OGG 格式旨在一劳永逸地解决这个问题。然而,在撰写本文时,Opera 和 Safari 都不支持 OGG。与 OGG 格式的文件相比,可用的 WAV 和 MP3 文件数量要更多,因此毫无疑问,浏览器制造商考虑到了这一点。MP3 作为事实的标准是个很好的解决方案。

解决方案:使用三种文件类型和<audio>标签

鉴于目前的状况,您可能认为目前还不是在 HTML5 页面上使用音频的黄金时刻。在某些方面可能的确如此,但是 HTML5 提供了一个解决方案,使您喜欢的浏览器能够找到一种兼容的格式。

与 <audio> 标签结合使用时,<source> 标签可以嵌套在 <audio> 容器内。假设您是一个瓦格纳迷,想在 HTML5 网页上听他的歌剧 Ride of the Valkyries(《女武神》)。首先,您需要获得三种文件类型的音乐,即 OGG、MP3 和 WAV。将这些音乐文件与 HTML5 文件放在同一个文件夹内。然后,将每个文件名放在单独的 <source> 标签里,并且音频容器中的所有源标签都由<audio></audio> 构成,如下所示。

<audio controls>
    <source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.mp3″ />
    <source src=”http://demo.mimvp.com/html5/take_you_fly.wav” />
</audio>

无论访问者使用什么浏览器,它都将自动选择所读取的第一个文件类型,并为您播放声音。

总结

以上所述是小编给大家介绍的html5中audio支持音频格式的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 #HTML / CSS
canvas学习和滤镜实现代码
Aug 22 #HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 #HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 #HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 #HTML / CSS
详解WebSocket跨域问题解决
Aug 06 #HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 #HTML / CSS
You might like
PHP setTime 设置当前时间的代码
2012/08/27 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
php+highchats生成动态统计图
2014/05/21 PHP
php中curl使用指南
2015/02/05 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
Python中itertools模块用法详解
2014/09/25 Python
Python利用IPython提高开发效率
2016/08/10 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
Django日志及中间件模块应用案例
2020/09/10 Python
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
学生学习总结的自我评价
2013/10/22 职场文书
思想政治教育专业个人求职信范文
2013/12/20 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
Java详细解析==和equals的区别
2022/04/07 Java/Android