如何在网页中添加Aplayer音乐播放器

308 0

音乐播放器大多是那种Mini音乐播放器，虽然很便捷，但我一直觉得不够正式，音乐列表看起来也不够直观，所以我希望做到单独一个页面上。 Mini播放器效果：（一般显示在网页左下角）

如何在网页中添加Aplayer音乐播放器

页面音乐效果：

如何在网页中添加Aplayer音乐播放器

教程

1.官方教程

对比了几款音乐插件，我最终选定了Aplayer，因其界面美观，功能强大。音乐播放器的音乐信息，歌词，进度条，音量，顺序模式，循环模式都支持。可以使用三方音乐外链，也可以使用自己的音乐链接。

2.实现代码

将Aplayer插件APlayer.min.js和APlayer.min.css上传到服务器，通过绝对路径，就可以访问到。 当然你也可以直接使用JSDelivr 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>

3.Mini播放器

Mini播放器会默认收起音乐列表，固定在界面左下角。 你也可以将代码直接粘贴到页面中（记得设置编码格式<meta charset="utf-8">），在浏览器中打开也会可执行，单曲代码实现如下：

<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>

多首音乐时，audio值为数组形式，代码如下：

<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>

4.单页面音乐

单页面音乐可以用更大的界面展示音乐列表等信息，实现也很简单，直接将代码块写在文章内容中，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音乐播放器就不会有这种问题，它始终固定在页面左下角，不会随着页面切换退出或重新加载。

5.Meting三方音乐

当然我们也可以使用第三方音乐，需要引入另外一款js插件Meting.js，它是基于Aplayer封装好的插件，开箱即用。 CDN链接：

<script src=”https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js”></script>

Meting主要参数说明：

可以看出Meting参数和Aplayer基本是相同的。

5.1单曲引入

我们使用网易云举例，单曲Blow Me a Kiss，链接：music.163.com/# 代码如下：

<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一致。

5.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一致。

5.3Mini播放器中引入

我们用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"。 好啦，以上就是使用Aplayer在博客中添加音乐播放器的教程啦，是不是既强大又好用，非常Nice~ 希望对大家有所帮助~

生成海报
下载海报

作者：百秀，转载请注明。

上一篇：
下一篇：
发表言论 取消回复
表情 图片 链接 代码

分享