h5中的audio音频标签与对应的dom对象
HTML5中提供了一个<audio>标签,同时也提供了一个Audio对象给JavaScript去操作,这个对象属于HTML的DOM对象。
H5中的<audio>标签
此标签是HTML5的新标签(双标签),用于定义声音,比如音乐或其他音频流。
实例
<audio src="someaudio.wav">
<span>你的浏览器不支持audio标签,傻瓜。</span>
</audio>
同时此标签提供<source>子标签(单标签)来链接不同的音频文件。
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
<span>你的浏览器不支持audio标签,呆子。</span>
</audio>
属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
muted | muted | 规定视频输出应该被静音。 |
preload | preload |
如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用属性autoplay属性,则忽略该属性。 |
src | url | 要播放的音频的URL。 |
此标签支持HTML中的全局属性与事件属性。
浏览器支持与兼容性提示
Internet Explorer 9+、Firefox、Opera、Chrome以及Safari浏览器支持此标签。
Internet Explorer 8以及更早的版本不支持此标签。
目前,<audio> 元素支持的3种文件格式:MP3、Wav、Ogg。
浏览器 | MP3 | Wav | Ogg |
---|---|---|---|
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | YES | NO |
Opera | YES | YES | YES |
另外,可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。比如在上面的实例中,不支持这个标签的浏览器就会显示<span>标签中的文本内容。
H5中的HTML DOM Audio对象
Audio对象是HTML5中的新对象,表示HTML中的<audio>标签元素。
访问Audio对象
可以用getElementsByTag()方法。
var audio = document.getElementsByTag(audio")[0];
也可以用getElementById()方法。
var audio = document.getElementById("myAudio");
创建Audio对象
可以用createElement方法。
var audio = document.createElement("audio");
也可以用new Audio()方法。
var audio = new Audio();
Audio对象的属性
属性 | 描述 |
---|---|
audioTracks | 返回表示可用音频轨道的AudioTrackList对象。 |
autoplay | 设置或返回是否在就绪(加载完成)后随即播放音频。 |
buffered | 返回表示音频已缓冲部分的TimeRanges对象。 |
controller | 返回表示音频当前媒体控制器的MediaController对象。 |
controls | 设置或返回音频是否应该显示控件(比如播放/暂停等)。 |
crossOrigin | 设置或返回音频的CORS设置。 |
currentSrc | 返回当前音频的 URL。 |
currentTime | 设置或返回音频中的当前播放位置(以秒计)。 |
defaultMuted | 设置或返回音频默认是否静音。 |
defaultPlaybackRate | 设置或返回音频的默认播放速度。 |
duration | 返回音频的长度(以秒计)。 |
ended | 返回音频的播放是否已结束。 |
error | 返回表示音频错误状态的MediaError对象。 |
loop | 设置或返回音频是否应在结束时再次播放。 |
mediaGroup | 设置或返回音频所属媒介组合的名称。 |
muted | 设置或返回是否关闭声音。 |
networkState | 返回音频的当前网络状态。 |
paused | 设置或返回音频是否暂停。 |
playbackRate | 设置或返回音频播放的速度。 |
played | 返回表示音频已播放部分的TimeRanges对象。 |
preload | 设置或返回音频的preload属性的值。 |
readyState | 返回音频当前的就绪状态。 |
seekable | 返回表示音频可寻址部分的TimeRanges对象。 |
seeking | 返回用户当前是否正在音频中进行查找。 |
src | 设置或返回音频的src属性的值。 |
textTracks | 返回表示可用文本轨道的TextTrackList对象。 |
volume | 设置或返回音频的音量,默认为1,即最大音量。 |
Audio对象的方法
方法 | 描述 |
---|---|
addTextTrack() | 向音频添加新的文本轨道。 |
canPlayType() | 检查浏览器是否能够播放指定的音频类型。 |
fastSeek() | 在音频播放器中指定播放时间。 |
getStartDate() | 返回新的Date对象,表示当前时间线偏移量。 |
load() | 重新加载音频元素。 |
play() | 开始播放音频。 |
pause() | 暂停当前播放的音频。 |
Audio对象支持标准的属性和事件。
Audo对象的事件监听
还可以给Audio对象添加一些状态改变的监听事件。
audio.addEventListener('timeupdate', function() { // 播放时间变化就会触发
// 做点坏事
});
audio.addEventListener('ended', function() { // 播放结束就会触发
// 做点好事
});
"生活很难,你一定要哄着自己过完。"
h5中的audio音频标签与对应的dom对象的更多相关文章
- H5 <audio> 音频标签自定义样式修改以及添加播放控制事件
H5 <audio> 音频标签自定义样式修改以及添加播放控制事件 Dandelion_drq 关注 2017.08.28 14:48* 字数 331 阅读 2902评论 3喜欢 3 说明: ...
- H5中的语义化标签
H5中的语义化标签也就是之前的id = “header”演变而来的 只不过之前是id 现在变成了标签而已 什么是语义化: 根据内容结构化(内容语义化) 选择合适的标签(代码语义化) 便于开发者阅读和写 ...
- HTML5之Audio音频标签学习
HTML5中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. autoplay:设置音频是否自动播放. loop:设置音频是否要循环播放. control ...
- react中如何获取onclick事件调用元素的dom对象
今天终于有时间写博客了, 前几天项目有个需求,我感觉用dom操作兄弟元素实现比较方便,但是前端用的react框架不能用jquery的$(this)获取当前元素,查了好多资料和尝试后写下总结: 在HTM ...
- H5中被废弃的标签
<br>换行,已经被<p>标签进行替换 <hr>画线 <font> <b>,<u>,<i>,<s>:加粗 ...
- <audio>音频标签
<audio ref="audio" @canplay="ready" @error="error" @timeupdate=&qu ...
- HTML5视音频标签参考
本文将介绍HTML5中的视音频标签和对应的DOM对象.是相关资料的中文化版本,可以作为编写相关应用的简易中文参考手册. 一些约定 所有浏览器:指支持HTML5的常见桌面浏览器,包括IE9+.Firef ...
- 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...
- H5 音频标签自定义样式修改以及添加播放控制事件
说明: 需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的. 最终效果如下: 具体实现 思路: H5 的 <audio> 标签是由浏览器负责实现默认样式的.所以不同 ...
随机推荐
- java高并发系列 - 第3天:有关并行的两个重要定律
有关为什么要使用并行程序的问题前面已经进行了简单的探讨.总的来说,最重要的应该是处于两个目的. 第一,为了获得更好的性能: 第二,由于业务模型的需要,确实需要多个执行实体. 在这里,我将更加关注第一种 ...
- JavaFx出现错误Caused by: java.lang.NullPointerException: Location is required的解决方法
问题截图: "C:\Program Files\Java\jdk1.8.0_131\bin\java.exe" "-javaagent:I:\IntelliJ IDEA ...
- String与StringBuilder性能比对
//String与StringBuilder性能比对package seday01;/** * String修改字符串带来的性能开销 * @author xingsir * */public clas ...
- 1.springMVC Controller配置方式
一.手动配置方式 1.web.xml中DispatcherServlet控制器的的配置 SpringMVC也是一种基于请求驱动的WEB框架,并且使用了前端控制器的设计模式.前端控制器就是Dispatc ...
- JVM中优化指南
JVM中优化指南 如何将新对象预留在年轻代 如何让大对象进入年老代 如何设置对象进入年老代的年龄 稳定的 Java 堆 VS 动荡的 Java 堆 增大吞吐量提升系统性能 尝试使用大的内存分页 使用非 ...
- 完整版的CAD技巧!3天轻松玩转CAD,零基础也能学会
最近有很多小伙伴反应,CAD图纸学起来有点小困难,也许你还没能掌握技巧,CAD大神带你3天轻松玩转CAD,零基础也能快速学会. 一.看懂图纸是关键 CAD制图首先得让自己知道要绘制什么,如果心中对图纸 ...
- Threads(异步和多线程)
Task是.NET Framework4.5出现的,线程是基于线程池的,然后提供丰富的api,Thread方法很多很强大,但是太过强大,没有限制. DoSomethingLong方法如下: /// & ...
- RPA之AA
RoboticProcessAutomation(即机器人流程自动化),RPA机器人能够模仿大多数人类用户的行为, 比如可以登录应用程序,移动文件和文件夹,复制和粘贴数据,填写表单,从文档中提取结构化 ...
- 在 sql server 中批量删除表
通过查询系统表,可以批量获得 drop 语句,执行即可... select 'drop table '+name+';' from sys.tables
- 如果下载老版本的Xcode
打开:https://developer.apple.com/download/more/,选择符合自己的Xcode版本即可.