前言
是否有一首音乐,前奏一响起,让你灵魂不自主的颤栗。音乐就像老胶卷,每个旋律,每句歌词,都承载着每个人的往事回忆和情愫感受。
我收藏了好多的音乐,奈何好多音乐受版权限制,需要购买VIP才能听,还有一些音乐一直是下架状态,办会员也听不了,所以只能自己搞个音乐播放器了。
在博客上的音乐播放器大多是那种Mini音乐播放器,虽然很便捷,但我一直觉得不够正式,音乐列表看起来也不够直观,所以我希望做到单独一个页面上。
本文讲解如何在博客中添加音乐播放器,播放自己的音乐,欢迎大家来我的音乐主页 echeverra,随时随地,想听就听。
Mini播放器效果:
单页面音乐效果:
教程
1.音乐插件
对比了几款音乐插件,我最终选定了Aplayer.js,因其界面美观,功能强大。音乐播放器的音乐信息,歌词,进度条,音量,顺序模式,循环模式都支持。可以使用三方音乐外链,也可以使用自己的音乐链接。
当然,由于一些限制,打开以上链接为概率性事件...
如果RP不足,您可以添加我的微信公众号 echeverra,回复"Aplayer"获取插件。
2.音乐资源
音乐资源可以从各大音乐平台下载,如果受会员或者下架限制,可以通过以下我常用的几个方式查找音乐。
由于我会将下载的音乐上传到自己的服务器(WordPress后台媒体),音乐文件太大时我的服务器属实吃不消(渣渣服务器),只好转换成较小的MP3格式,推荐使用WORTHSEE:https://audio.worthsee.com/。
3.实现代码
将Aplayer插件APlayer.min.js
和APlayer.min.css
上传到服务器,如果博客使用WordPress
可上传到服务器wp-content
目录下,通过链接https://IP/wp-content/Aplayer.min.js ,就可以访问到。
当然你也可以直接使用jsdeliver CDN方式,更快更方便,但不稳定,偶尔抽风...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
Aplayer主要参数说明:
参数 |
默认值 |
描述 |
container |
document.querySelector('.aplayer') |
播放器容器元素 |
fixed |
false |
开启吸底模式 |
mini |
false |
开启迷你模式 |
autoplay |
false |
音频自动播放,一般浏览器默认会阻止音频自动播放 |
theme |
'#b7daff' |
主题色 |
loop |
'all' |
音频循环播放,值:'all'、'one'、'none' |
order |
'list' |
音频循环顺序,值:'list','random' |
preload |
'auto' |
音频预加载,值: 'none', 'metadata', 'auto' |
volume |
0.7 |
默认音量,播放器会记住用户设置,用户自己设置音量后默认音量将失效 |
showlrc |
true |
歌词是否显示 |
audio |
- |
音频,一个音频为对象格式,多个音频为数组格式 |
audio.name |
- |
音频名称 |
audio.artist |
- |
音频艺术家 |
audio.url |
- |
音频链接 |
audio.cover |
- |
音频封面 |
audio.lrc |
- |
音频歌词 |
mutex |
true |
防止同时播放多个播放器,当该播放器开始播放时暂停其他播放器 |
listFolded |
false |
列表是否先折叠 |
listMaxHeight |
- |
音频列表最大高度 |
3.1 Mini播放器
Mini播放器会默认收起音乐列表,固定在界面左下角。
如果博客使用的是WordPress
,在使用的主题设置中找到脚本一项,将代码写在脚本中即可执行。
你也可以将代码直接粘贴到IDE(记得设置编码格式<meta charset="utf-8">
),在浏览器中打开也会可执行,代码实现如下:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<div id='aplayer'></div>
<script>
var ap = new APlayer
({
element: document.getElementById('aplayer'),
showlrc: false,
fixed: true,
mini: true,
audio: {
title: '半岛铁盒',
author: '周杰伦',
url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
}
});
ap.init();
</script>
多首音乐时,audio
值为数组形式,代码如下:
<script>
var ap = new APlayer
({
element: document.getElementById('aplayer'),
showlrc: false,
fixed: true,
mini: true,
audio: [
{
title: '半岛铁盒',
author: '周杰伦',
url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
},
{
title: '给我一首歌的时间',
author: '周杰伦',
url: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间.mp3',
pic: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'
}
]
});
ap.init();
</script>
3.2单页面音乐
单页面音乐可以用更大的界面展示音乐列表等信息,实现也很简单,直接将代码块写在文章内容中,fixed
和mini
改为默认值false
,代码如下:
<link rel="stylesheet" href="https://echeverra.cn/wp-content/APlayer.min.css">
<script src="https://echeverra.cn/wp-content/APlayer.min.js"></script>
<div id='demo'></div>
<script>
var demo = new APlayer
({
element: document.getElementById('demo'),
showlrc: false,
fixed: false,
mini: false,
audio: [
{
title: '半岛铁盒',
author: '周杰伦',
url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
},
{
title: '给我一首歌的时间',
author: '周杰伦',
url: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间.mp3',
pic: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'
}
]
});
demo.init();
</script>
在编辑器右侧可实时显示播放器效果。最终页面效果如下:
如果你想创建多个音乐播放器,就需要创建多个音乐播放器元素<div id="apalyer"></div>
,id
设为不同值,然后实例化new
多个Aplayer
播放器,再配置每个播放器的音乐列表audio
。参数mutex
默认值true
,即使多个播放器也不会冲突。
<div id='demo1'></div>
<div id='demo2'></div>
<script>
var demo1 = new APlayer
({
element: document.getElementById('demo1'),
showlrc: false,
audio: {
title: '半岛铁盒',
author: '周杰伦',
url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
}
});
var demo2 = new APlayer
({
element: document.getElementById('demo2'),
showlrc: false,
audio: {
title: '给我一首歌的时间',
author: '周杰伦',
url: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间.mp3',
pic: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'
}
});
demo1.init();
demo2.init();
</script>
需要注意<script>
标签中的代码不能有空行,否则会报解析为<p>
标签,造成js代码无法正确执行。
通常fixed
和mini
需同时置为true
或false
,否则会有显示异常的问题。
单页面音乐相比Mini音乐播放器可以展示更多的音乐信息,更加正式,但同样存在弊端,当博客切换界面后,背景音乐仍在后台继续播放,只能回到音乐页面暂停,Mini音乐播放器就不会有这种问题,它始终固定在页面左下角,不会随着页面切换退出或重新加载。
4. Meting三方音乐
当然我们也可以使用第三方音乐,需要引入另外一款js插件Meting.js,它是基于Aplayer封装好的插件,开箱即用。
CDN链接:
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
Meting主要参数说明:
参数 |
默认值 |
描述 |
id |
require |
歌曲ID/播放列表ID/专辑ID/搜索关键字 |
server |
require |
音乐平台: netease , tencent , kugou , xiami , baidu |
type |
require |
类型:song , playlist , album , search , artist |
auto |
options |
音乐链接,支持,支持: netease , tencent , xiami |
fixed |
false |
开启吸底模式 |
mini |
false |
开启迷你模式 |
autoplay |
false |
自动播放,一般浏览器默认会阻止音频自动播放 |
theme |
#2980b9 |
主题色 |
loop |
all |
音频循环播放,值:'all'、'one'、'none' |
order |
list |
音频循环顺序,值:'list','random' |
preload |
auto |
音频预加载,值: 'none', 'metadata', 'auto' |
volume |
0.7 |
默认音量,播放器会记住用户设置,用户自己设置音量后默认音量将失效 |
mutex |
true |
防止同时播放多个播放器,当该播放器开始播放时暂停其他播放器 |
lrc-type |
0 |
歌词类型 |
list-folded |
false |
列表是否先折叠 |
list-max-height |
340px |
音频列表最大高度 |
可以看出Meting参数和Aplayer基本是相同的。
4.1单曲引入
我们使用网易云举例,单曲Blow Me a Kiss,链接:https://music.163.com/#/song?id=2526628
代码如下:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<meting-js server="netease" type="song" id="2526628"></meting-js>
server="netease"
指定音乐平台为网易云,type="song"
指单曲类型,id="2526628"
为音乐的id,同链接上的id一致。
4.2歌单引入
我们使用网易云音乐里我创建的一个歌单,链接:https://music.163.com/#/playlist?id=7360465359
代码如下:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<meting-js server="netease" type="playlist" id="7360465359"></meting-js>
同样的server="netease"
指定音乐平台为网易云,type="playlist"
指歌单类型,id="7360465359"
为歌单的id,同链接上的id一致。
4.3 Mini播放器
我们用Meting实现一个随机播放的Mini播放器,代码如下:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<meting-js
server="netease"
type="playlist"
id="7360465359"
fixed="true"
mini="true"
order="random"
loop="all"
preload="auto"
list-folded="false">
</meting-js>
除了之前设置的server、type、id
参数外,还设置Mini播放器的必要参数fixed="true", mini="true"
,随机播放order="random"
。
4.4博客园音乐引入
博客园是为数不多的可定制的博客平台,我们先在博客后台->设置->申请JS权限,大概一个小时时间,成功后在博客后台->设置->页脚 HTML 代码中粘贴上面4.3的案例,就可以生成Mini音乐播放器啦,是不是很简单~
博客园 首页 播放器效果:
优化
夜间模式
有粉丝反馈在博客夜间模式下,播放器音乐列表显示文字看不清的问题。
以我使用的博客主题为例,由于网站设置夜间模式后,会将所有文字颜色改为更适应夜间的颜色#eee
,所以会有看不清的问题。
解决办法也很简单,我们只需要通过修改CSS样式覆盖掉播放器文字颜色即可,WordPress博客可以通过后台->外观->额外CSS中设定。
.aplayer * {
color: #666;
}
封面放大
好吧,这个纯属个人强迫症,听着音乐,看着音乐封面太小,很不过瘾,于是将音乐封面改大了些,修改位置同上。
article .aplayer .aplayer-pic {
position: relative;
float: left;
min-height: 100px;
height: 100px;
width: 100px;
background-size: cover;
background-position: 50%;
transition: all .3s ease;
cursor: pointer;
}
article .aplayer .aplayer-info {
margin-left: 100px;
padding: 30px 7px 0 10px;
height: 100px;
box-sizing: border-box;
}
是不是看着舒服多了~
性能优化
偶然一天我打开音乐界面,发现有点卡,查看网络请求才发现,默认加载了几首音乐资源,脆弱的服务器简直不堪重负...
如果你使用的自己服务器的音乐资源,或者在一个页面上有多个音乐播放器,建议关闭音频预加载参数preload
,因为真的会很卡,页面加载也会慢很多,直接将preload
设置为'none'
即可。
上下曲功能
默认播放器无法通过左右方向键控制上一首/下一首,通过js键盘监听事件调用Aplayer API可以实现此功能。
document.addEventListener('keydown', function(e) {
// 上一首
if(e.keyCode == 37) {
for(var i in apList) {
ap.skipBack();
}
}
// 下一首
if(e.keyCode == 39) {
ap.skipForward();
}
});
如果一个页面有多个播放器实例对象ap,可以通过判断其播放状态精确控制哪个播放器上下首。
document.addEventListener('keydown', function(e) {
// 3个Aplayer实例
var apList = [ap1, ap2, ap3];
// 上一首
if(e.keyCode == 37) {
for(var i in apList) {
if(apList[i].paused === false) {
apList[i].skipBack();
}
}
}
// 下一首
if(e.keyCode == 39) {
for(var i in apList) {
if(apList[i].paused === false) {
apList[i].skipForward();
}
}
}
});
比较受局限的一点是只有在当前页面点击左右键才会生效,在页面之外是无法控制的,更多Aplayer API请参考官网API。
好啦,以上就是使用Aplayer在博客中添加音乐播放器的教程啦,是不是既强大又好用,非常Nice~ 希望对大家有所帮助,如有问题可通过我的博客https://echeverra.cn或微信公众号echeverra联系我。
你学“废”了么?
参考文章:
(完)
(文章今日已有 1 人访问 ::>_<::)