【实测】如何在博客中添加Aplayer音乐播放器-Discuz教程下载

【实测】如何在博客中添加Aplayer音乐播放器

来自版块: Discuz教程发表于: 2024-6-27 08:28:39
257
0
如本资源下载地址失效,请点击此处进行反馈
开通本站Svip会员,全站资源免费下

演示地址:https://igequ.com/thread_368_1_1.html
配套教程https://www.tuyuanma.com/news_9329_1_1


是否有一首音乐,前奏一响起,让你灵魂不自主的颤栗。音乐就像老胶卷,每个旋律,每句歌词,都承载着每个人的往事回忆和情愫感受。
我收藏了好多的音乐,奈何好多音乐受版权限制,需要购买vip才能听,还有一些音乐一直是下架状态,办会员也听不了,所以只能自己搞个音乐播放器了。
在博客上的音乐播放器大多是那种Mini音乐播放器,虽然很便捷,但我一直觉得不够正式,音乐列表看起来也不够直观,所以我希望做到单独一个页面上。
本文讲解如何在博客中添加音乐播放器,播放自己的音乐,欢迎大家来我的音乐主页 echeverra,随时随地,想听就听。
Mini播放器效果:
5.png
单页面音乐效果:
6.png
教程
1.音乐插件

对比了几款音乐插件,我最终选定了Aplayer.js,因其界面美观,功能强大。音乐播放器的音乐信息,歌词,进度条,音量,顺序模式,循环模式都支持。可以使用三方音乐外链,也可以使用自己的音乐链接
官网:https://aplayer.js.org/
Github:https://github.com/MoePlayer/APlayer/
当然,由于一些限制,打开以上链接为概率性事件...
网盘下载:https://pan.baidu.com/s/1j77x29Uubek7SXcYX-dWGw?pwd=bsb8
2.音乐资源
音乐资源可以从各大音乐平台下载,如果受会员或者下架限制,可以通过以下常用的方式查找音乐。
爱歌曲:https://igequ.com/
由于我会将下载的音乐上传到自己的服务器(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 'list' 音频循环播放,值:'all'、'one'、'none'
order 'auto' 音频循环顺序,值:'list','random'
preload 0.7 音频预加载,值: 'none', 'metadata', 'auto'
volume true 默认音量,播放器会记住用户设置,用户自己设置音量后默认音量将失效
showlrc - 音频,一个音频为对象格式,多个音频为数组格式
audio -音频,一个音频为对象格式,多个音频为数组格式
audio.name -音频名称
audio.artist -音频艺术家
audio.url -音频链接
audio.cover -音频封面
audio.lrc -音频歌词
mutextrue防止同时播放多个播放器,当该播放器开始播放时暂停其他播放器
listFoldedfalse列表是否先折叠
listMaxHeight -音频列表最大高度
3.1Mini播放器
Mini播放器会默认收起音乐列表,固定在界面左下角。如果博客使用的是WordPress,在使用的主题设置中找到脚本一项,将代码写在脚本中即可执行。
你也可以将代码直接粘贴到IDE(记得设置编码格式<meta charset="utf-8">),在浏览器中打开也会可执行,代码实现如下:
  1. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
  2. <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
  3. <div id='aplayer'></div>
  4. <script>
  5.     var ap = new APlayer
  6.     ({
  7.         element: document.getElementById('aplayer'),
  8.         showlrc: false,
  9.         fixed: true,
  10.         mini: true,
  11.         audio: {
  12.             title: '半岛铁盒',
  13.             author: '周杰伦',
  14.             url: 'https://www.tuyuanma.com/2022/05/周杰伦-半岛铁盒.mp3',
  15.             pic: 'https://www.tuyuanma.com/2022/05/周杰伦-半岛铁盒-mp3-image.png'
  16.         }
  17.     });
  18.     ap.init();
  19. </script>
复制代码
7.png
多首音乐时,audio值为数组形式,代码如下:
  1. <script>
  2.     var ap = new APlayer
  3.     ({
  4.         element: document.getElementById('aplayer'),
  5.         showlrc: false,
  6.         fixed: true,
  7.         mini: true,
  8.         audio: [
  9.                 {
  10.                 title: '半岛铁盒',
  11.                 author: '周杰伦',
  12.                 url: 'https://www.tuyuanma.com/2022/05/周杰伦-半岛铁盒.mp3',
  13.                 pic: 'https://www.tuyuanma.com/2022/05/周杰伦-半岛铁盒-mp3-image.png'
  14.                 },
  15.             {
  16.                 title: '给我一首歌的时间',
  17.                 author: '周杰伦',
  18.                 url: 'https://www.tuyuanma.com/2021/06/周杰伦-给我一首歌的时间.mp3',
  19.                 pic: 'https://www.tuyuanma.com/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'
  20.             }
  21.                 ]
  22.     });
  23.     ap.init();
  24. </script>
复制代码
8.png
3.2单页面音乐

单页面音乐可以用更大的界面展示音乐列表等信息,实现也很简单,直接将代码块写在文章内容中,fixed和mini改为默认值false,代码如下:
  1. <link rel="stylesheet" href="https://echeverra.cn/wp-content/APlayer.min.css">
  2. <script src="https://echeverra.cn/wp-content/APlayer.min.js"></script>
  3. <div id='demo'></div>
  4. <script>
  5.     var demo = new APlayer
  6.     ({
  7.         element: document.getElementById('demo'),
  8.         showlrc: false,
  9.         fixed: false,
  10.         mini: false,
  11.         audio: [
  12.                 {
  13.                 title: '半岛铁盒',
  14.                 author: '周杰伦',
  15.                 url: 'https://www.tuyuanma.com/2022/05/周杰伦-半岛铁盒.mp3',
  16.                 pic: 'https://www.tuyuanma.com/2022/05/周杰伦-半岛铁盒-mp3-image.png'
  17.                 },
  18.             {
  19.                 title: '给我一首歌的时间',
  20.                 author: '周杰伦',
  21.                 url: 'https://www.tuyuanma.com/2021/06/周杰伦-给我一首歌的时间.mp3',
  22.                 pic: 'www.tuyuanma.com/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'
  23.             }
  24.         ]
  25.     });
  26.     demo.init();
  27. </script>
复制代码
9.png
在编辑器右侧可实时显示播放器效果。最终页面效果如下:
10.png
如果你想创建多个音乐播放器,就需要创建多个音乐播放器元素<div id="apalyer"></div>,id设为不同值,然后实例化new多个Aplayer播放器,再配置每个播放器的音乐列表audio。参数mutex默认值true,即使多个播放器也不会冲突。
  1. <div id='demo1'></div>
  2. <div id='demo2'></div>
  3. <script>
  4.     var demo1 = new APlayer
  5.     ({
  6.         element: document.getElementById('demo1'),
  7.         showlrc: false,
  8.         audio: {
  9.                 title: '半岛铁盒',
  10.                 author: '周杰伦',
  11.                 url: 'https://www.tuyuanma.com/2022/05/周杰伦-半岛铁盒.mp3',
  12.                 pic: 'https://www.tuyuanma.com/2022/05/周杰伦-半岛铁盒-mp3-image.png'
  13.                 }
  14.     });
  15.     var demo2 = new APlayer
  16.     ({
  17.         element: document.getElementById('demo2'),
  18.         showlrc: false,
  19.         audio: {
  20.                 title: '给我一首歌的时间',
  21.                 author: '周杰伦',
  22.                 url: 'https://www.tuyuanma.com/2021/06/周杰伦-给我一首歌的时间.mp3',
  23.                 pic: 'https://www.tuyuanma.com/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'
  24.             }
  25.     });
  26.     demo1.init();
  27.     demo2.init();
  28. </script>
复制代码
11.png
需要注意<script>TAG.html" target="_blank" class="relatedlink">标签中的代码不能有空行,否则会报解析为<p>标签,造成js代码无法正确执行。
12.png
通常fixed和mini需同时置为true或false,否则会有显示异常的问题。
单页面音乐相比Mini音乐播放器可以展示更多的音乐信息,更加正式,但同样存在弊端,当博客切换界面后,背景音乐仍在后台继续播放,只能回到音乐页面暂停,Mini音乐播放器就不会有这种问题,它始终固定在页面左下角,不会随着页面切换退出或重新加载。
4.Meting三方音乐
当然我们也可以使用第三方音乐,需要引入另外一款js插件Meting.js,它是基于Aplayer封装好的插件,开箱即用。
CDN链接:
  1. <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
代码如下:
  1. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
  2. <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
  3. <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
  4. <meting-js server="netease" type="song" id="2526628"></meting-js>
复制代码
server="netease"指定音乐平台为网易云,type="song"指单曲类型,id="2526628"为音乐的id,同链接上的id一致。
13.png
4.2歌单引入
我们使用网易云音乐里我创建的一个歌单,链接:https://music.163.com/#/playlist?id=7360465359
代码如下:
  1. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
  2. <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
  3. <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
  4. <meting-js server="netease" type="playlist" id="7360465359"></meting-js>
复制代码
14.png
同样的server="netease"指定音乐平台为网易云,type="playlist"指歌单类型,id="7360465359"为歌单的id,同链接上的id一致。
4.3Mini播放器
我们用Meting实现一个随机播放的Mini播放器,代码如下:
  1. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
  2. <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
  3. <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
  4. <meting-js
  5.         server="netease"
  6.         type="playlist"
  7.         id="7360465359"
  8.         fixed="true"
  9.         mini="true"
  10.         order="random"
  11.         loop="all"
  12.         preload="auto"
  13.         list-folded="false">
  14. </meting-js>
复制代码
除了之前设置的server、type、id参数外,还设置Mini播放器的必要参数fixed="true", mini="true",随机播放order="random"。
15.png
4.4博客园音乐引入
博客园是为数不多的可定制的博客平台,我们先在博客后台->设置->申请JS权限,大概一个小时时间,成功后在博客后台->设置->页脚 html 代码中粘贴上面4.3的案例,就可以生成Mini音乐播放器啦,是不是很简单~
16.png
博客园 首页 播放器效果:
17.png
好啦,以上就是使用Aplayer在博客中添加音乐播放器的教程啦,是不是既强大又好用,非常Nice~ 希望对大家有所帮助~
你学“废”了么?

全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部