html5 audio标签,html audio标签

  html5 audio标签,html audio标签

  在HTML5标准网页中,我们可以使用音频标签来调用和播放声音。以下是HTML5中常用的三种基本格式:

  1.最小代码副本代码如下:

  音频src=song.ogg 控件=控件/音频

  2.带有不兼容提醒的代码复制代码如下:

  音频src=song.ogg 控件=控件

  您的浏览器不支持音频标签。

  /音频

  3.尽量兼容浏览器的编写。复制代码代码,如下所示:

  音频控制=控制

  source src= song . ogg type= audio/ogg

  source src= song . MP3 type= audio/mpeg

  您的浏览器不支持音频标签。

  /音频

  浏览器和音频兼容性

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

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

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

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

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

  当与音频标签一起使用时,源标签可以嵌套在音频容器中。假设你是瓦格纳迷,想在HTML5网页上听他的歌剧《女武神之骑》(《女武神》)。首先,你需要获得三种文件类型的音乐,即OGG,MP3和WAV。把这些音乐文件和HTML5文件放在同一个文件夹里。然后,将每个文件名放入单独的源标签中,音频容器中的所有源标签都由audio/audio组成,如下所示。复制代码如下:

  音频控制

  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"/

  /音频

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

  浏览器音频控制:没有两个是相同的。

  一旦你决定要在网站上提供音频,你将面临一个有趣的设计选择。每个浏览器都有一个与众不同的外观,看起来像是有意识地故意做得不一样。

  除了Chrome浏览器,所有浏览器都有开始/暂停控件、进度条、滑块、播放秒数、音量/静音控件,还会显示声音文件的总秒数。使用HTML5标准和浏览器支持,开发人员可以相信用户将获得与HTML5音频相似的体验,因为浏览器控件是相似的。也可以使用Flash、Silverlight等插件创建控件,但不同用户的体验可能会有所不同。

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

  Html代码(隐藏回放控件)复制代码代码如下:

  音频自动播放=自动播放

  source src= http://演示。mimvp。com/html 5/take _ you _ fly。“MP3”类型=“音频/mpeg”

  /音频代码演示(隐藏播放控件)复制代码代码如下:

  音频自动播放=自动播放控件=控件

  source src= http://演示。mimvp。com/html 5/take _ you _ fly。“MP3”类型=“音频/mpeg”

  /音频

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: