百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> html5音频的相干实例介绍-
分享文章到:

html5音频的相干实例介绍-

发布时间:08/01 来源:未知 浏览: 关键词:
html5<audio>是HTML5的新标签,定义声音,比方音乐或其他音频流。下面通过本文给大家分享html音频的根本见识,感乐趣的伴侣一起学习吧 HTML5 供给了播放音频文件的规范。

互联网上的音频

直到此刻,依然不存在一项旨在网页上播放音频的规范。

今天,大多数音频是通过插件(比方 Flash)来播放的。然而,并非所有阅读器都具有一样的插件。

HTML5 规定了在网页上嵌入音频元素的规范,即便用 元素。

阅读器支撑

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支撑 元素.

注意: Internet Explorer 8 及更早IE版本不支撑 元素.

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

HTML 5 标签

HTML5 audio让音乐卷土重来

HTML5 使用aduio标签打造音乐播放器

可以在开端标签和完毕标签之间放置文本内容,这样老的阅读器就可以显示出不支撑该标签的信息。


 
      你的阅读器不支撑audio标签

属性

描述

autoplay

autoplay

要是涌现该属性,则音频在就绪后即将播放

controls

controls

要是涌现该属性,则向会员显示控件,比方播放按钮。

loop

loop

要是涌现该属性,则每当音频完毕时从新轮回开端播放。

preload

preload

要是涌现该属性,则音频在页面加载时进行加载,并准备播放。

要是运用 “autoplay”,则忽略该属性。

src

url

要播放的音频的 URL。也可以运用标签来设定音频。

HTML5 Audio标签能够支撑wav, mp3, ogg, acc, webm等格局,但有个很重要的音乐文件格局midi(扩展名mid)却在各大阅读器中都没有内置的支撑。不是所有的阅读器都支撑MP3OGG之类的,每个阅读器支撑的格局都是不同的。

阅读器和音频兼容性

阅读器创造商并非都赞成运用某种音频文件格局。关于图像,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 文件放在统一个文件夹内。然后,将每个文件名放在独自的 标签里,而且音频容器中的所有源标签都由 形成,如下所示。


    
    
    

不管拜访者运用什么阅读器,它都将主动选中所读取的首先个文件类型,并为您播放声音。

阅读器音频控件:没有两个是完全雷同的

一旦您决议要在网站上供给音频,将面对一个有味的设计选中。每个阅读器都有异乎寻常的外不雅,看起来像是成心识地故意使其异乎寻常。下面的图 1 展现了这些阅读器控件的外不雅。

图1:不一样阅读器上的音频控件

除了 Chrome 阅读器外,所有阅读器都有开端/暂停控件、进度条、滑块、播放秒数、音量/静音控件,还显示声音文件的总秒数。运用HTML5 规范和阅读器支撑,开发人员可以信赖会员将具有与 HTML5 音频相似的体验,由于阅读器控件是相似的。您还可以运用 Flash 和 Silverlight 等插件新建控件,但是关于不一样的会员,体验可能会有所不一样。

某些阅读器(如 IE9)甚至有本人的声音控制条,在阅读器自身以外运转。会员打开有声音的任何网站时,他们可以从 Windows 任务栏控制声音,并能够预览目前正在播放的声音。

html代码(隐蔽播放控件)

 

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

 

以上就是html5音频的相干实例介绍的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板