用<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>标签打造一个属于自己的HTML5音乐播放器的更多相关文章
- 4个小时实现一个HTML5音乐播放器
技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...
- HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
- 使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
- 一个功能齐全的IOS音乐播放器应用源码
该源码是在ios教程网拿过来的,一个不错的IOS音乐播放器应用源码,这个是我当时进公司时 我用了一晚上写的 图片都是在别的地方扒的,主要是歌词同步,及上一曲,下一曲,功能齐全了 ,大家可以学习一下吧 ...
- <audio>标签HTML5音乐播放器
<audio>标签:用于在文档中表示音频内容.利用它,你可以在你的个人网站上放一首你喜欢的歌. <audio src="music.mp3">< ...
- 一个使用 Web Components 的音乐播放器: MelodyPlayer
先上效果预览: Web Components 首先,什么是 Web Components ? MDN 给出的定义是: Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的 ...
- 一个简单有趣的Python音乐播放器
(赠新手,老鸟绕行0.0) Python版本:3.5.2 源码如下: __Author__ = "Lance#" # -*- coding = utf-8 -*- #导入相应模块 ...
- 我在 Gitee 上发现了一个简洁又好用的网络音乐播放器!
这几天无聊的时候我想听听歌,但我想要找一个简单快速的网络音乐播放器来用用.这时我在 Gitee 上看见一个看上去不错的开源项目 -- Hi音乐. 项目链接:https://gitee.com/hi-j ...
- HTML5的Audio标签打造WEB音频播放器
目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...
随机推荐
- pytorch中的学习率调整函数
参考:https://pytorch.org/docs/master/optim.html#how-to-adjust-learning-rate torch.optim.lr_scheduler提供 ...
- 算法习题---3.11换抵挡装置(UVa1588)
一:题目 给你连个长度分别为n1,n2且每列高度只为1或2的长条,然后将他们拼在一起,高度不能超过3,问他们拼在一起的最短长度 二:实现思路 1.获取主动轮和从动轮的数据. 2.主动轮不动,从动轮从左 ...
- python基础之知识补充-作用域、特殊语法
python作用域 无函数的作用域 在python中没有块级作用域 什么叫块级作用域呢?先来看个例子: if 1 == 1: name= 'alex' print(name) 运行结果为alex 在j ...
- 【已解决】HttpWebRequest的GetResponse或GetRequestStream偶尔超时 + 总结各种超时死掉的可能和相应的解决办法
[问题] 用C#模拟网页登陆,其中去请求几个页面,会发起对应的http的请求request,其中keepAlive设置为true,提交请求后,然后会有对应的response: resp = (Http ...
- 记EXSI虚拟机CentOS7断电无法启动修复过程
参考:https://msd.misuland.com/pd/3148108429789233656 EXSI6.7安装虚拟机CentOS7.5 1804 断电后启动页面进度条很慢 最后出现如下提示 ...
- 论文笔记: LSTD A Low-Shot Transfer Detector for Object Detection
背景知识: Zeroshot Learning,零次学习. 模型 对于 训练集 中 没有出现过 的 类别,能自动创造出相应的映射: X→Y. Low/Few-shot Learning.One-sho ...
- MySQL的注入总结
0x01 MySQL 5.0以上和MySQL 5.0以下版本的区别 MySQL5.0以上版本存在一个叫information_schema的数据库,它存储着数据库的所有信息,其中保存着关于MySQL服 ...
- Mybatis使用Spring data Pageable的方法
引言 可能这个用法是个邪教了...但是简单说这都是历史缘故,貌似是项目最初用JPA后面还是换Mybatis了,我接手时候看着那个写好的Controller层觉得换了怪可惜的,就沿用了.网上找找,提供的 ...
- 高级UI-Palette
Google推出的Palette是用来调色的,正如其汉语意思一样,可以用来显示颜色,在显示图片的时候,会配合图片的色调来显示,这样就显得很融合,其实Palette可以分析出图片中的很多特性,例如主色调 ...
- VSCode 查看、还原本地代码历史版本
参考链接:https://blog.csdn.net/luckystar_99/article/details/100583141