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对象的更多相关文章

  1. H5 <audio> 音频标签自定义样式修改以及添加播放控制事件

    H5 <audio> 音频标签自定义样式修改以及添加播放控制事件 Dandelion_drq 关注 2017.08.28 14:48* 字数 331 阅读 2902评论 3喜欢 3 说明: ...

  2. H5中的语义化标签

    H5中的语义化标签也就是之前的id = “header”演变而来的 只不过之前是id 现在变成了标签而已 什么是语义化: 根据内容结构化(内容语义化) 选择合适的标签(代码语义化) 便于开发者阅读和写 ...

  3. HTML5之Audio音频标签学习

    HTML5中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. autoplay:设置音频是否自动播放. loop:设置音频是否要循环播放. control ...

  4. react中如何获取onclick事件调用元素的dom对象

    今天终于有时间写博客了, 前几天项目有个需求,我感觉用dom操作兄弟元素实现比较方便,但是前端用的react框架不能用jquery的$(this)获取当前元素,查了好多资料和尝试后写下总结: 在HTM ...

  5. H5中被废弃的标签

    <br>换行,已经被<p>标签进行替换 <hr>画线 <font> <b>,<u>,<i>,<s>:加粗 ...

  6. <audio>音频标签

    <audio ref="audio" @canplay="ready" @error="error"  @timeupdate=&qu ...

  7. HTML5视音频标签参考

    本文将介绍HTML5中的视音频标签和对应的DOM对象.是相关资料的中文化版本,可以作为编写相关应用的简易中文参考手册. 一些约定 所有浏览器:指支持HTML5的常见桌面浏览器,包括IE9+.Firef ...

  8. 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

    查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...

  9. H5 音频标签自定义样式修改以及添加播放控制事件

    说明: 需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的. 最终效果如下: 具体实现 思路: H5 的 <audio> 标签是由浏览器负责实现默认样式的.所以不同 ...

随机推荐

  1. java高并发系列 - 第3天:有关并行的两个重要定律

    有关为什么要使用并行程序的问题前面已经进行了简单的探讨.总的来说,最重要的应该是处于两个目的. 第一,为了获得更好的性能: 第二,由于业务模型的需要,确实需要多个执行实体. 在这里,我将更加关注第一种 ...

  2. JavaFx出现错误Caused by: java.lang.NullPointerException: Location is required的解决方法

    问题截图: "C:\Program Files\Java\jdk1.8.0_131\bin\java.exe" "-javaagent:I:\IntelliJ IDEA ...

  3. String与StringBuilder性能比对

    //String与StringBuilder性能比对package seday01;/** * String修改字符串带来的性能开销 * @author xingsir * */public clas ...

  4. 1.springMVC Controller配置方式

    一.手动配置方式 1.web.xml中DispatcherServlet控制器的的配置 SpringMVC也是一种基于请求驱动的WEB框架,并且使用了前端控制器的设计模式.前端控制器就是Dispatc ...

  5. JVM中优化指南

    JVM中优化指南 如何将新对象预留在年轻代 如何让大对象进入年老代 如何设置对象进入年老代的年龄 稳定的 Java 堆 VS 动荡的 Java 堆 增大吞吐量提升系统性能 尝试使用大的内存分页 使用非 ...

  6. 完整版的CAD技巧!3天轻松玩转CAD,零基础也能学会

    最近有很多小伙伴反应,CAD图纸学起来有点小困难,也许你还没能掌握技巧,CAD大神带你3天轻松玩转CAD,零基础也能快速学会. 一.看懂图纸是关键 CAD制图首先得让自己知道要绘制什么,如果心中对图纸 ...

  7. Threads(异步和多线程)

    Task是.NET Framework4.5出现的,线程是基于线程池的,然后提供丰富的api,Thread方法很多很强大,但是太过强大,没有限制. DoSomethingLong方法如下: /// & ...

  8. RPA之AA

    RoboticProcessAutomation(即机器人流程自动化),RPA机器人能够模仿大多数人类用户的行为, 比如可以登录应用程序,移动文件和文件夹,复制和粘贴数据,填写表单,从文档中提取结构化 ...

  9. 在 sql server 中批量删除表

    通过查询系统表,可以批量获得 drop 语句,执行即可... select 'drop table '+name+';' from sys.tables

  10. 如果下载老版本的Xcode

    打开:https://developer.apple.com/download/more/,选择符合自己的Xcode版本即可.