kphp框架学习之html5的audio音频标签学习总结
标签:html5,audio标签,音频 点击6119次 时间:2015-12-03
html5知识学习之audio标签学习课程,audio为音频标签,与video标签的属性几乎相等,今天我将在kphp框架中给大家详细讲解一下这audio标签的属性及用法。

audio标签是属于闭合性标签由<audio>开始</audio>结束
标签属性写在 开始的<audio>标签中,在闭合标签内部可以写备注,当访问者的浏览器如果不支持audio标签将显示其备注的信息。
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式。
例子:
<audio controls="controls">
  <source src="http://www.kphp.org/html5/kphp_audio.ogg" type="audio/ogg">
  <source src="http://www.kphp.org/html5/kphp_audio.mp3" type="audio/mpeg">
kphp框架提醒您:您的浏览器不支持 audio 标签。
</audio>
上面的例子使用Ogg文件,适用于Firefox、Opera以及Chrome 浏览器。
使用mp3文件,适用于 Safari 浏览器,Safari浏览器音频文件必须是 MP3 或 Wav 类型。
下面来介绍一下html5中audio标签的一些属性:

1.controls属性

如果出现该属性,则向用户显示控件,比如播放按钮。
语法:
<audio controls>
属性值:controls
controls属性事例
<audio controls="controls" >
  <source src="http://www.kphp.org/html5/kphp_audio.ogg" type="audio/ogg">
  <source src="http://www.kphp.org/html5/kphp_audio.mp3" type="audio/mpeg">
kphp框架提醒您:您的浏览器不支持 audio 标签。
</audio>
controls属性事例测试

2.autoplay属性

如果出现该属性,则音频在就绪后马上播放。
语法:
<audio autoplay="autoplay">
属性值:autoplay
autoplay属性事例
<audio controls="controls" autoplay="autoplay">
  <source src="http://www.kphp.org/html5/kphp_audio.ogg" type="audio/ogg">
  <source src="http://www.kphp.org/html5/kphp_audio.mp3" type="audio/mpeg">
kphp框架提醒您:您的浏览器不支持 audio 标签。
</audio>
autoplay属性事例测试

3.loop属性

如果出现该属性,则每当音频结束时重新开始播放;如果设置该属性,则音频将循环播放。
语法:
<audio loop="loop">
属性值:loop
loop属性事例
<audio controls="controls" loop="loop">
  <source src="http://www.kphp.org/html5/kphp_audio.ogg" type="audio/ogg">
  <source src="http://www.kphp.org/html5/kphp_audio.mp3" type="audio/mpeg">
kphp框架提醒您:您的浏览器不支持 audio 标签。
</audio>
<audio controls muted>
loop属性事例测试

4.muted属性

muted 属性属于逻辑属性,如被设置,则规定视频输出应该被静音。
语法:
<audio muted>
属性值:muted
muted属性事例
<audio controls  muted>
  <source src="http://www.kphp.org/html5/kphp_audio.ogg" type="audio/ogg">
  <source src="http://www.kphp.org/html5/kphp_audio.mp3" type="audio/mpeg">
kphp框架提醒您:您的浏览器不支持 audio 标签。
</audio>
muted属性事例测试

5.preload属性

如果出现该属性,则音频在页面加载时进行加载,并预备播放;如果使用 "autoplay",则忽略该属性。
语法:
<audio preload="load" />
属性值:
load可能的值:
auto - 当页面加载后载入整个音频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入音频
preload属性事例
<audio controls  muted preload="meta">
  <source src="http://www.kphp.org/html5/kphp_audio.ogg" type="audio/ogg">
  <source src="http://www.kphp.org/html5/kphp_audio.mp3" type="audio/mpeg">
kphp框架提醒您:您的浏览器不支持 audio 标签。
</audio>
preload属性事例测试

6.src属性

src 属性规定要播放的音频的URL,也可以使用 <source> 标签 来设置音频。
语法:
<audio src="URL">
属性值:音频文件的url地址
可能的值:
绝对 URL - 指向另一个站点(比如 href="http://www.kphp.org/html5/kphp_audio.ogg")
相对 URL - 指向网站内的文件(比如 href="kphp_audio.ogg")
src属性事例
<audio src="http://www.kphp.org/html5/kphp_audio.mp3" controls  muted >
kphp框架提醒您:您的浏览器不支持 audio 标签。
</audio>
src属性事例测试

以上是今天通过kphp框架网站给大家分享的audio标签属性讲解,对于通过html5播放音频进行音频设置很有帮助,希望大家可以通过讲解更好的运用audio标签的属性,实现通过html5的audio标签属性对音频进行设置。

最新动态

学习指南:

知识总结: