1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > audio插入背景音乐_HTML5 标签audio添加网页背景音乐代码

audio插入背景音乐_HTML5 标签audio添加网页背景音乐代码

时间:2021-08-14 19:55:17

相关推荐

audio插入背景音乐_HTML5 标签audio添加网页背景音乐代码

html5是 HTML 5 的新标签,定义声音,好比音乐或其余音频流。html

能够在开始标签和结束标签之间放置文本内容,这样老的浏览器就能够显示出不支持该标签的信息。ide

HTML5 Audio标签可以支持wav, mp3, ogg, acc, webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持(详见此处)。不是全部的浏览器都支持MP3OGG之类的,每一个浏览器由于版权的问题支持的格式都是不同的。ui

浏览器和音频兼容性url

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

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 文件放在同一个文件夹内。而后,将每一个文件名放在单独的 标签里,而且音频容器中的全部源标签都由 构成,以下所示。

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

浏览器音频控件:没有两个是彻底相同的

一旦您决定要在网站上提供音频,将面临一个有趣的设计选择。每一个浏览器都有不同凡响的外观,看起来像是有意识地故意使其不同凡响。下面的图 1 展现了这些浏览器控件的外观。

图1:不一样浏览器上的音频控件

除了 Chrome 浏览器外,全部浏览器都有开始/暂停控件、进度条、滑块、播放秒数、音量/静音控件,还显示声音文件的总秒数。使用HTML5 标准和浏览器支持,开发人员能够相信用户将拥有与 HTML5 音频相似的体验,由于浏览器控件是相似的。您还能够使用 Flash 和 Silverlight 等插件建立控件,可是对于不一样的用户,体验可能会有所不一样。

某些浏览器(如 IE9)甚至有本身的声音控制条,在浏览器自己以外运行。用户打开有声音的任何网站时,他们能够从 Windows 任务栏控制声音,并可以预览当前正在播放的声音。

html代码(隐藏播放控件)

代码演示(隐藏播放控件)

演示实例:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。