第六节:用audio标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如果上一章节你理解了,那么这一节你学起来会:毫无压力。
<audio>简介
<audio>标签:用于在文档中表示音频内容。利用它,你可以在你的个人网站上放一首你喜欢的歌。
<audio src="music.mp3"></audio>
用法很简单,跟<video>标签一样,属性src指定音频文件地址。
如果你仅仅这样写,页面上不会看到有明显的东西,<audio>标签默认是隐藏的。
对于不支持<audio>标签的浏览器,会把标签的文本内容显示出来。
<audio src="music.mp3"> 别试了,是你的浏览器渣渣 </audio>
( 大家都叫我:IE8 )
为了方便我们对音频文件进行控制,操作它的进度、播放暂停、音量等等,我们可以给它添加controls属性:
<audio src="m.mp3" controls></audio>
用法跟<video>标签一样。对于加上了controls属性, 不同的浏览器会展示不同样式的控制面板。
( chrome浏览器的音频控制面板 )
( firefox浏览器的音频控制面板 )
( IE浏览器的音频控制面板 )
哪个好看就见仁见智了~~
跟<video>标签一样,<audio>标签也有一个字标签:<source>。
它们的作用和用法都一样,就是用来引入多个音频,浏览器会选择一个支持的音频格式进行加载,对于不支持<audio>标签的浏览器,<source>元素也可以作为浏览器不识别的内容加入到文档中。
<audio> <source src="music.mp3"> <source src="music.ogg"> <source src="music.wav"> </audio>
注:主流的音频文件格式有:mp3、wav、ogg。不同的浏览器对三种格式支持程度不一样。其中mp3格式支持度最好。
autoplay属性:加载完成后,自动播放。也非常简单、使用。
<audio src="m.mp3" autoplay></audio>
loop属性:顾名思义,循环播放。
<audio src="m.mp3" loop></audio>
preload属性:用来控制音频在什么时候进行加载。
<audio src="m.mp3" preload="auto"></audio>
对应的值有3种:
none:默认不加载,等有需要的时候再加载。
metadata:元数据,默认不加载,但是可以提取该音频的元数据信息。
auto:自动加载,网页加载完就加载整个音频。
muted属性:静音效果。
<audio src="m.mp3" muted></audio>
加了muted属性,音频即使在播放的时候,也是没有声音,除非用户手动调整控制面板的音量。
JavaScript控制音频
JavaScript可以通过video对象控制网页视频;同样可以audio对象操作网页音频。
首先我们通过getElementById(ID)方法获取到一个audio对象。假设id为“music“。
<audio id="music" src="m.mp3"></audio>
let m = document.getElementById('music');
控制加载:
m.load();//加载
如果你的<audio>标签是手动生成的节点,可以用load方法来实现加载。
控制播放:
m.play();//播放
调用play( )方法可以执行播放。
控制暂停:
m.pause();//暂停
调用pause( )方法可以执行暂停播放。
指定播放时间:
m.fastSeek(20);
这样的话,音频会定位到20秒的播放位置。不过目前只有Firefox浏览器支持,你可以通过currentTime属性来实现。
获取和设置已播放的时间
m.currentTime
通过currentTime属性,你可以拿到当前音频播放了多久,返回的数字以( s )秒为单位。
m.currentTime = 10;
你也可以给它赋值,这样,音频会定位到10秒的播放位置。
是否自动播放:
m.autoplay = true;//自动播放
可以直接在<audio>标签上加上autoplay属性,也可以通过JavaScript来设置autoplay属性。它是一个布尔值,true代表自动播放,false代表非自动播放。
是否循环播放:
m.loop = true;//循环播放
可以直接在<audio>标签上加上loop属性,也可以通过JavaScript来设置loop属性。它也是一个布尔值,true代表循环播放,false代表单曲播放。
是否显示控制面板:
m.controls = true;//显示控制面板
可以直接在<audio>标签上加上controls属性,也可以通过JavaScript来设置controls属性。它也是一个布尔值,true代表显示控制面板,false代表隐藏控制面板。
是否静音:
m.muted = true;//静音
可以直接在<audio>标签上加上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>标签还有其他属性,我不在这里展开, 学习的阶段只要掌握以上这些就够了,有兴趣的同学可以自行去网上搜索
本节收获
掌握了<audio>标签的属性
旧版浏览器不支持<audio>标签的处理方式
用JavaScript操作audio对象来控制音频
结合以上的知识点,实现一个属于自己的HTML5 音乐播放器。功能:播放/暂停、静音、调节音量、调节播放进度、切换歌曲、单曲模式/循环模式。
第六节:用audio标签打造一个属于自己的HTML5音乐播放器相关推荐
- 开源html5在线音乐网站,一个漂亮的开源HTML5音乐播放器——APlayer
介绍 APlayer是一个简约且漂亮的html5音乐播放器,支持多种模式,包括播放列表模式.吸底模式 .迷你模式.MSE模式.HLS模式. Github https://github.com/diyg ...
- 【游戏开发创新】手把手教你使用Unity制作一个高仿酷狗音乐播放器,滨崎步,旋律起,爷青回(声音可视化 | 频谱 | Audio)
文章目录 一.前言 二.获取UI素材 三.使用UGUI制作界面 1.界面布局 2.账号圆形头像 3.搜索框 4.调节UI层 5.黑色按钮悬浮高亮效果 6.纯文字按钮 7.滚动列表自适应 8.歌名与视频 ...
- html中加入音乐播放器,4个小时实现一个HTML5音乐播放器
技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 => 界面: skPlay ...
- 自己动手,打造一款适合 Python 程序员的 Html5 音乐播放器
近期断断续续读了一些 Web Audio API 和 WebRTC API 的文档,发现了很多好玩的东西,有一种"忽入桃花源"的感觉.这一款 Html5 音乐播放器,就是基于 We ...
- 用jq和bootstrap3 实现一个自定义网页版的音乐播放器
用jq和bootstrap3 实现一个自定义网页版的音乐播放器 1.主要实现功能 1.1.点击播放与暂停,上一首和下一首: 注:用python返回所有歌曲的信息,加载完成默认选择第一首歌曲,通过传递歌 ...
- 基于 Qt5 ( C++ ) 开发的一个小巧精美的本地音乐播放器
LightMusicPlayer --南京大学2019秋季学期 "高级程序设计" 课程设计三 基于Qt5开发的一个小巧精美的本地音乐播放器 代码注释详细,适合作为一个用于入门的Qt ...
- HTML:给自己设计一个简单的专属网页音乐播放器
Hello,大家好,我是wangzirui32,今天我们来学习如何给自己设计一个简单的网页音乐播放器. 开始学习吧! 学习目录 1. 项目架构 2. player.html 编写 3. style.c ...
- 一个vue组件完成的音乐播放器
最近用vuepress搭建了一个文档博客,感觉网站过于简洁,想加个音乐播放插件进去,后来找到aplayer插件,但是样式风格过于死板,和我的网站有违和感,于是手动写了一个音乐播放器. 使用aplaye ...
- iOS一个模仿百度音乐盒的音乐播放器(带EQ均衡器)
工作之余, 断断续续写了这么一个音乐播放器, eq实现各种音效, 指定位置播放, 快进快退, 锁屏耳机线控等等, 基本就是参考百度音乐盒的功能来实现的.(项目地址最后放出, 项目中的资源接口, 是抓百 ...
最新文章
- 私有云管理-Windows Azure Pack
- pandas高级处理-合并
- Androguard 的交叉引用说明
- python 导入包的路径_关于Python包导入的知识点你知道吗?
- 白话Elasticsearch03- 结构化搜索之基于bool组合多个filter条件来搜索数据
- 【DevExpress v17.2新功能预告】增强ASP.NET TreeList
- Android---- 获取当前应用的版本号和当前android系统的版本号
- docker下使用mongodb
- java 序列化 写入mysql_java 序列化到mysql数据库中
- VC编译选项 /EHa 异常处理
- 西门子系列PLC教学视频资源4——S7-1200
- uniapp微信公众号跳转小程序(vue项目)
- Leetcode 刷题 - 排序(day2)_桶排序_Top K Frequent Elements
- 利用公式实现RGB图转化为灰度图
- 无损音频压缩——APE和FLAC比较
- Round12—Huffman 树
- JS代码:身份证号EMAIL检验
- 【威胁通告】攻击者利用漏洞攻击Edimax WiFi桥接器
- 网络安全——缓冲区溢出攻击
- 让作业飞吧,与屌丝兄弟们分享我的分布式作业调度平台 【拥抱开源,拥抱作业调度的神器Quartz.net】...