Audio标签常用属性
前景过程：
在经历了一个星期的小项目，在做网易云音乐的时候，补充了新的知识点：audio的属性的使用。
audio标签概述：
用来定义声音。下面看看属性们。测试的时候手上没有音乐的话src可以用我的
https://tianyitimothy.github.io/resources/arcs.mp3
H5中操作
src属性
用来指定音乐的路径，但你会发现用了下面的代码，并不会显示。这是因为没有自定义界面，也没有加上controls属性。
<audio src="https://tianyitimothy.github.io/resources/arcs.mp3">
</audio>controls属性
给音乐添加控制功能按钮，这个控制面板是个默认的控制面板，当你打开音乐是可以直接点击播放的，并不是静音的。
<audio src="https://tianyitimothy.github.io/resources/arcs.mp3" controls>
</audio>muted属性
该属性只是让音频静音
<audio src="https://tianyitimothy.github.io/resources/arcs.mp3"
controls muted></audio>loop属性
改属性时可以使音频播放完还可以继续播放，即循环播放
<audio src="https://tianyitimothy.github.io/resources/arcs.mp3"
controls muted loop></audio>preload属性
设定音频的预加载方式。
=“auto”:自动加载，页面加载后载入整个音频
=“metadata”:自动加载，页面加载后只载入元数据
=“none”:不自动加载
<audio src="https://tianyitimothy.github.io/resources/arcs.mp3"
controls preload="auto"></audio>JS操作
首先拿到audio标签
var audio = document.getElementsByClassName(audio)[0]音频的当前播放时间currentTime
currentTime属性可读可写。返回当前播放时长，单位是秒。可以通过修改它来实现倒退or前进x秒，倒退5秒:可以使用计时器显示当前播放的时间。
setInterval(function(){console.log(audio.currentTime);},1000)音频总时长duration
duration属性是可读属性。返回音频总时长，单位是秒。要注意在load()方法之前，duration的值为NaN。用法伪代码:同样可以使用计时器把总时间打印出来。
setInterval(function(){console.log(audio.duration);},1000)播放play()
使用播放方法让暂停了的音频播放：
btn_play.onclick = function(){audio.play()}暂停pause（）
使用暂停方法让正在播放的音频暂停。
btn_pause.onclick = function(){audio.pause()}是否暂停paused
paused属性是可读属性，返回boolean值：若音频是暂停状态，返回true；反之返回false。通过paused实现播放/暂停:
btn.onclick = function(){console.log(12346);if(audio.paused == true){audio.play()}else{audio.pause()}}这些audio属性很好的解决了做网易云中结论控制音乐播放条来控制音乐的进程，通过设定的按钮控制音频的播放。
Audio标签常用属性相关推荐
- a标签常用属性——你是否都用过？
目录 内容介绍 一.target属性 二.href属性 1.跳转 2.假链接 3.群发短信.发送邮件.拨打电话等 4.锚点跳转 5.打开本地资源或目录 6.返回顶部 三.download属性 四.完整 ...
- Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架
第三天HTML中input标签常用属性.框架集.内嵌框架 一.input标签常用属性 表单数据提交特点: (一).文本框(text) (二).密码框(password) (三).单选按钮(radio) ...
- audio标签的属性
src属性 <!--用于告诉video标签需要播放的音频地址--> <audio sec = "音频地址"> </audio> autoplay ...
- 附录3-form标签常用属性
目录 1 action 2 target 3 method 4 enctype 1 action 如果form表单未指定action值,action的默认值为当前页面的URL地址 如果你指定 ...
- HTML5中Audio标签ended属性的使用
Audio对象属性:ended 描述:返回音频的播放是否已结束(值为布尔类型:true或false) 以下示例是我做音乐播放器时想让播放器自动循环播放的代码: audio=$("#audi ...
- 5中div标签有没有url属性_[网页编程]-03 CSS 常用属性
字体处理常用属性 <!DOCTYPE html> <html><head><meta charset="utf-8"><tit ...
- html5 ins标签,HTML ins标签常用的用法有哪些？HTML ins常用属性的介绍
HTML ins标签常用的用法有哪些?HTML ins常用属性的介绍都在这里,本篇文章主要介绍了html ins标签用法和定义都有什么,还有一些html ins标签常用属性的介绍 HTML ins标签 ...
- bean标签的常用属性
这篇文章总结spring中bean标签的常用属性. bean标签常用属性有: id name class factory-method factory-bean init-method destory ...
- 第六节：用audio标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...
最新文章
- lighttpd1.4.18代码分析
- spring的aware学习
- C#发送Email邮件（实例：QQ邮箱和Gmail邮箱）
- windbg 符号表
- 【HDU - 1083 】Courses （二分图）
- 他回国后对学生说，玩会这12个游戏就能掌握python基础，其实不难
- DSB2017第一名论文理解： 3D Deep Leaky Noisy-or Network(一)
- iOS UIView异步绘制实现圆角的方案
- Java中的静态方法和单例模式比较
- 中兴 ZXV10 B860AV2.1-A 中国移动盒子 开adb和wifi（海南盒子）；适用于大部分（除两款外）不打开adb 进行安装软件或抓取日志
- 科技感html页面源码,科技感十足的403html模板动态源码
- Java多线程游戏实例分享2-雷火(手把手教你做个超炫酷的星际争霸)
- 如何练习插画？插画应该如何构图？
- CPU 缓存一致性 MESI 协议
- 阿里云、腾讯云、UCloud、华为云云主机对比测试报告 | 技术
- linux 下 vs code 设置Source Code Pro 字体
- 【串讲总结】array, list, tensor，Dataframe，Series之间互相转换总结
- DSY2287*消失之物
- egg风格 什么意思_Egg是个有趣的蛋美国俚语
- Docker 更换镜像源地址