html5 支持音频格式,html5中audio支持音频格式

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 作为事实的标准是个很好的解决方案。

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

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

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

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

更多专业前端知识,请上

【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/408782.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu 8.04 Linux系统下面编译更新内核版本

在 VirtualBox 虚拟机上面测试的,ubuntu 8.04系统。1. 下载内核源代码http://www.kernel.org/ 下载The latest stable version of the Linux kernel is: 2.6.25.7 ,点后面的“F” 按钮下载http://www.kernel.org/pub/linux/kernel/v2.6/linux-2.6.25.…

Python-100 | 练习题 01 列表推导式

最近打算好好练习下 python,因此找到一个练习题网站,打算每周练习 3-5 题吧。http://www.runoob.com/python/python-100-examples.html另外,这个网站其实也还有 Python 的教程,从基础到高级的知识都有。Example-1 三位数组合题目&…

html5qq邮箱代码,使用qq邮箱批量发送邮件 实例源码(支持富文本)

资源下载此资源下载价格为3D币,请先登录资源文件列表MailSending/MailSending/App.config , 184MailSending/MailSending/Form1.Designer.cs , 15243MailSending/MailSending/Form1.cs , 10655MailSending/MailSending/Form1.resx , 438794MailSending/MailSending/…

Python-100 练习题 01 列表推导式

最近打算好好练习下 python,因此找到一个练习题网站,打算每周练习 3-5 题吧。 http://www.runoob.com/python/python-100-examples.html 另外,这个网站其实也还有 Python 的教程,从基础到高级的知识都有。 Example-1 三位数组合…

Python dict 调试技巧 —— 利用YAML存储dict内容

我们经常跑一些程序时dict生成会比较久或比较大,这时候我们可以中途将其保存在临时调试文件。一般可考虑保存成如json,xml或yaml。 我这里用一个比较简单的实现,利用PyYAML。 1 $ sudo pip install pyyaml 保存dict的时候利用dump函数 1 import yaml 2 …

nginx html解析插件,nginx配置信息的解析流程

nginx配置信息的解析流程2011年9月9日 1,744 次浏览请关注最新修正合订:这一系列的文章还是在09年写的,存在电脑里很久了,现在贴出来。顺序也不记得了,看到那个就发那个吧,最近都会发上来。欢迎转载,但请保…

机器学习数据集的获取和测试集的构建方法

这是机器学习入门系列(2)–如何构建一个完整的机器学习项目的第二篇 上一篇机器学习入门系列(2)–如何构建一个完整的机器学习项目(一)介绍了开始一个机器学习项目需要明确的问题,比如当前任务属于有监督还是无监督学习问题,然后…

SQL日期格式化

Sql Server 中一个非常强大的日期格式化函数 Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AM Select CONVERT(varchar(100), GETDATE(), 1): 05/16/06 Select CONVERT(varchar(100), GETDATE(), 2): 06.05.16 Select CONVERT(varchar(100), GETDATE(), 3…

[资源推荐] 必须收藏的两个查找论文和代码实现的网站!

2019年第 13 篇文章,总第 37 篇文章无论是研究方向是 AI 方面的学生,或者是做机器学习方面的算法工程师,在掌握基础的机器学习相关知识后,都必须掌握搜索论文的技能,特别是研究或者工作领域方向的最新论文,…

dw html怎么导入视频,如何在dw中将视频插入

如何在dw中将视频插入电脑版Dreamweaver工具被很多人使用,用来编辑视频等,有的用户在使用该软件时,想要插入需要编辑的视频,但是却不知道如何插入,那么小编就来为大家介绍一下吧。具体如下:1. 第一步&#…

editplus注释快捷键

Tools->Preferences Tools-Keyboard-Edit-LineComment Line Uncomment为取消注释 转载于:https://www.cnblogs.com/yiwd/archive/2013/06/06/3121689.html

Python-100 练习题 02

2019年第 10 篇文章,总第 34 篇文章 练习题2 的网址: http://www.runoob.com/python/python-exercise-example2.html Example-2 企业发放奖金 题目:企业发放的奖金根据利润提成。利润(I)低于或等于10万元时,奖金可提10%&#xff…

html input file 置空,清空 HTML File Input

因为浏览器安全限制,通常的方法,如把value设为null或空字符串,是无法清空HTML file input的。大多数浏览器中,给file input的value设置null值,要么无效,要么产生错误。解决办法是,复制老元素的属…

oseicq介绍

介绍Oseicq是目前中国最好的可进行2次开发的即时通讯软件,Oseicq是专为需要进行互联网应用或企业系统集成而设计即时通讯产品,使用oseicq源码可以让用户拥有即时沟通,更高效率,突破空间约束,缩短管理距离等行业优势。 …