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 相关文章推荐
详解CSS3开启硬件加速的使用和坑
Aug 21 HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
详细解析Python当中的数据类型和变量
2015/04/25 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
python如何生成网页验证码
2018/07/28 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
python如何调用java类
2020/07/05 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
六十大寿答谢词
2014/01/12 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
分享3个非常实用的 Python 模块
2022/03/03 Python
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技