audio标签控制音量_audio标签HTML5音乐播放器
标签:用于在文档中表示音频内容。利用它,你可以在你的个人网站上放一首你喜欢的歌。
用法很简单,跟标签一样,属性src指定音频文件地址。
如果你仅仅这样写,页面上不会看到有明显的东西,标签默认是隐藏的。
对于不支持标签的浏览器,会把标签的文本内容显示出来。
别试了,是你的浏览器渣渣
( 大家都叫我:IE8 )
为了方便我们对音频文件进行控制,操作它的进度、播放暂停、音量等等,我们可以给它添加controls属性:
用法跟标签一样。对于加上了controls属性, 不同的浏览器会展示不同样式的控制面板。
( chrome浏览器的音频控制面板 )
( firefox浏览器的音频控制面板 )
( IE浏览器的音频控制面板 )
哪个好看就见仁见智了~~
跟标签一样,标签也有一个字标签:。
它们的作用和用法都一样,就是用来引入多个音频,浏览器会选择一个支持的音频格式进行加载,对于不支持标签的浏览器,元素也可以作为浏览器不识别的内容加入到文档中。
注:主流的音频文件格式有:mp3、wav、ogg。不同的浏览器对三种格式支持程度不一样。其中mp3格式支持度最好。
autoplay属性:加载完成后,自动播放。也非常简单、使用。
loop属性:顾名思义,循环播放。
preload属性:用来控制音频在什么时候进行加载。
对应的值有3种:
none:默认不加载,等有需要的时候再加载。
metadata:元数据,默认不加载,但是可以提取该音频的元数据信息。
auto:自动加载,网页加载完就加载整个音频。
muted属性:静音效果。
加了muted属性,音频即使在播放的时候,也是没有声音,除非用户手动调整控制面板的音量。
JavaScript控制音频
JavaScript可以通过video对象控制网页视频;同样可以audio对象操作网页音频。
首先我们通过getElementById(ID)方法获取到一个audio对象。假设id为“music“。
let m= document.getElementById('music');
控制加载:
m.load();//加载
如果你的标签是手动生成的节点,可以用load方法来实现加载。
控制播放:
m.play();//播放
调用play( )方法可以执行播放。
控制暂停:
m.pause();//暂停
调用pause( )方法可以执行暂停播放。
指定播放时间:
m.fastSeek(20);
这样的话,音频会定位到20秒的播放位置。不过目前只有Firefox浏览器支持,你可以通过currentTime属性来实现。
获取和设置已播放的时间
m.currentTime
通过currentTime属性,你可以拿到当前音频播放了多久,返回的数字以( s )秒为单位。
m.currentTime = 10;
你也可以给它赋值,这样,音频会定位到10秒的播放位置。
是否自动播放:
m.autoplay = true;//自动播放
可以直接在标签上加上autoplay属性,也可以通过JavaScript来设置autoplay属性。它是一个布尔值,true代表自动播放,false代表非自动播放。
是否循环播放:
m.loop = true;//循环播放
可以直接在标签上加上loop属性,也可以通过JavaScript来设置loop属性。它也是一个布尔值,true代表循环播放,false代表单曲播放。
是否显示控制面板:
m.controls = true;//显示控制面板
可以直接在标签上加上controls属性,也可以通过JavaScript来设置controls属性。它也是一个布尔值,true代表显示控制面板,false代表隐藏控制面板。
是否静音:
m.muted = true;//静音
可以直接在标签上加上muted属性,也可以通过JavaScript来设置muted属性。它也是一个布尔值,true代表静音,false代表有声音。
是否暂停:
m.paused //是否暂停
判断音频当前是否暂停,返回true代表暂停,返回false代表正在播放;默认是true;该值只能读取,不能修改。
调用play( )方法后,m.paused的值会变成false;调用pause( )方法后,m.paused的值会变成true。
调节音量:
m.volume = 0.1;
音量的取值范围在:0(无声)~1(最大声)之间。可以对volume属性赋合理的值或者做一些运算,来改变音频的音量。
audio标签控制音量_audio标签HTML5音乐播放器相关推荐
- 第六节:用audio标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...
- html中加入音乐播放器,4个小时实现一个HTML5音乐播放器
技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 => 界面: skPlay ...
- 一款简约好看的html5音乐播放器,HTML5 之美:推荐9款优秀的 HTML5 音乐播放器
过去,在网页上播放音频都是通过第三方插件来播放的,如 Flash.QuickTime 和 Silverlight 等,没有统一的音频播放标准.HTML5 通过 audio 元素来提供在网页中嵌入音频的 ...
- 自己动手,打造一款适合 Python 程序员的 Html5 音乐播放器
近期断断续续读了一些 Web Audio API 和 WebRTC API 的文档,发现了很多好玩的东西,有一种"忽入桃花源"的感觉.这一款 Html5 音乐播放器,就是基于 We ...
- 开源html5在线音乐网站,一个漂亮的开源HTML5音乐播放器——APlayer
介绍 APlayer是一个简约且漂亮的html5音乐播放器,支持多种模式,包括播放列表模式.吸底模式 .迷你模式.MSE模式.HLS模式. Github https://github.com/diyg ...
- 推荐9款优秀的 HTML5 音乐播放器
过去,在网页上播放音频都是通过第三方插件来播放的,如 Flash.QuickTime 和 Silverlight 等,没有统一的音频播放标准.HTML5 通过 audio 元素来提供在网页中嵌入音频的 ...
- 简洁的 HTML5 音乐播放器
mePlayer 一款简洁的HTML5音乐播放器.内置两套主题,可在运行时一键切换, 点我在线预览 默认主题 有歌词时滚动显示歌词,无歌词时显示模拟频谱动画 播放中鼠标悬停在界面上滑动滚轮可调节音量, ...
- html音乐播放器如何添加暂停按钮,HotKey播放/暂停HTML5音乐播放器
这是我用于HTML5音乐播放器的一小部分JavaScript代码.我想知道你们是否可以帮我建立一个HotKey来使用Space键切换播放/暂停按钮.有什么想法吗? CODE: $('.tracksli ...
- 仿网易云音乐html代码,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
简要教程 APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插 ...
最新文章
- 用jquery验证用户名是否有效或重复
- caj文件打不开显示内存不足_caj打开文件内存不足 cad内存不足一键修复
- Systemd 入门及常用命令
- (八)限定某个目录禁止解析php、限制user_agent和PHP相关配置
- LeetCode之Nim Game
- ERROR: Couldn’t connect to Docker daemon at http+docker://localunixsocket - is it running?
- java设计模式之 装饰器模式
- 无法访问hadoop yarn8088端口的解决方法
- 【luogu1967】【noip2013】 货车运输 [生成树kruskal LCA ]
- 题解 P2163 SHOI2007 园丁的烦恼
- 拇指接龙游戏从WIN32向Android移植过程问题记录(1)
- 何谓“pessimistic”异步FIFO的full和empty信号
- 颜色空间:RGB,CMY,HSV,HSL,Lab详解
- 互联网人典型体检报告?
- 微信小程序授权登陆,解密encryptedData出现乱码问题
- 二、设计模式-必要的基础知识—旅行前的准备 #和设计模式一起旅行#
- UDP通信——使用python实现简单的UDP通信
- KUKA officelite8.5 “无法建立至KRC的连接”解决办法
- 课程设计-多种排序方式
- 软件测试周刊(第06期):程序员最大的谎言是什么?
热门文章
- 待字闺中之相伴一生分析
- 计算机体系结构在线读,18春北交《计算机体系结构》在线作业二-3
- IP的首部长度,总长度,标识,地址
- 三八女神节女生最想收到的礼物:高颜值佩戴舒适的蓝牙耳机
- Excel教程中数组公式之系列教程(一)
- Android 网络图片缓存
- 严厉!32篇硕士论文“不合格”,同门论文将被重点抽查!
- 【网页设计】基于HTML在线图书商城购物项目设计与实现_(图书商城10页) bootstarp响应式
- html table clonenode,HTML DOM cloneNode()用法及代码示例
- 傲慢与偏见。你所不知道的select()——The C10M Problem