• 售前

  • 售后

热门帖子
入门百科

简朴先容HTML5中audio标签的使用

[复制链接]
123457468 显示全部楼层 发表于 2021-10-26 13:05:27 |阅读模式 打印 上一主题 下一主题
在HTML5尺度网页内里,我们可以运用audio标签来完成我们对声音的调用及播放。以下是最经常见到的运用HTML5三种基本格式:
1.最少的代码

复制代码代码如下:
<audio src="song.ogg" controls="controls"></audio>
2.带有不兼容提醒的代码

复制代码代码如下:
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
3.尽量兼容欣赏器的写法

复制代码代码如下:
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
欣赏器和音频兼容性
欣赏器制造商并非都同意使用某种音频文件格式。对于图像,PNG、JPEG 或 GIF 格式的文件在任何欣赏器上都能加载到您的网页里。遗憾的是,音频文件并非云云。表 1 展示了网页中可以使用的音频文件格式,但是并非全部格式都能用于全部欣赏器。比方,Chrome、Internet Explorer 9 (IE9) 和 Safari 欣赏器不支持 WAV 文件,这是一种使用非压缩格式且正在衰败的尺度。
HTML5欣赏器和音频格式兼容性

没有一种通用的文件格式让每个欣赏器都使用单个文件格式意味着至少有 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>
无论访问者使用什么欣赏器,它都将自动选择所读取的第一个文件范例,并为您播放声音。
欣赏器音频控件:没有两个是完全相同的

一旦您决定要在网站上提供音频,将面临一个有趣的设计选择。每个欣赏器都有与众差别的外貌,看起来像是有意识地故意使其与众差别。
除了 Chrome 欣赏器外,全部欣赏器都有开始/暂停控件、进度条、滑块、播放秒数、音量/静音控件,还表现声音文件的总秒数。使用HTML5 尺度和欣赏器支持,开发职员可以相名誉户将拥有与 HTML5 音频雷同的体验,因为欣赏器控件是雷同的。您还可以使用 Flash 和 Silverlight 等插件创建控件,但是对于差别的用户,体验可能会有所差别。
某些欣赏器(如 IE9)甚至有自己的声音控制条,在欣赏器本身之外运行。用户打开有声音的任何网站时,他们可以从 Windows 任务栏控制声音,并能够预览当前正在播放的声音。
html代码 (埋伏播放控件)

复制代码代码如下:
<audio autoplay="autoplay">
<source src="http://demo.mimvp.com/html5/take_you_fly.mp3" type="audio/mpeg">
</audio>

代码演示 (埋伏播放控件)

复制代码代码如下:
<audio autoplay="autoplay" controls="controls">
<source src="http://demo.mimvp.com/html5/take_you_fly.mp3" type="audio/mpeg">
</audio>

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作