aplayer是一个HTML5的音乐播放器
先上效果图

安装aplayer插件

在Hexo的根目录输入一下命令

npm install aplayer --save ##注意不是hexo-tag-aplayer

配置

下载aplayer在Github里的开源文件，将dist文件放入到\themes\next\source里

新建music.js

在dist文件里新建music.js文件
在文件内介入以下内容

const ap = new APlayer({container: document.getElementById('aplayer'),audio: [{name: 'name', #歌名artist: 'artist', #歌手url: 'url.mp3', #mp3的url地址cover: 'cover.jpg' #歌的封面}] });

其他参数
摘自官方文档

名称默认值描述

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	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
audio	-	音频信息, 应该是一个对象或对象数组
audio.name	-	音频名称
audio.artist	-	音频艺术家
audio.url	-	音频链接
audio.cover	-	音频封面
audio.lrc	-	详情
audio.theme	-	切换到此音频时的主题色，比上面的 theme 优先级高
audio.type	‘auto’	可选值: ‘auto’, ‘hls’, ‘normal’ 或其他自定义类型, 详情
customAudioType	-	自定义类型，详情
mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
lrcType	0	详情
listFolded	false	列表默认折叠
listMaxHeight	-	列表最大高度
storageName	‘aplayer-setting’	存储播放器设置的 localStorage key

前面带有audio标签的为audio[{}]里面的参数，不带audio的则在audio[{}]外面使用

示例

const ap = new APlayer({container: document.getElementById('aplayer'),fixed: true, #吸底模式autoplay: false, #自动播放audio: [{name: 'secret base ~君がくれたもの~',artist: '茅野愛衣 / 戸松遥 / 早見沙織',url: 'http://music.163.com/song/media/outer/url?id=33911781.mp3',cover: 'http://p1.music.126.net/daZcHVIJicL3wXJWMIjAng==/7926379325753633.jpg?',lrc: 'images/.lrc' #歌词播放并不好看，所以没有使用},] });

歌曲参数获取

这里用到的url地址均为网易云音乐的

mp3文件url

只需要将网页id覆盖到文本url里的id里即可

封面url

在网易云音乐的歌词界面打开控制台(F12)
如何点击控制台里左上角箭头
![箭头](https://cdn.jsdelivr.net/gh/jiangyin0750/tuchuang/aplayer_4.png
将箭头指向图片，然后控制台会出现图片的url

在图中注释的url地址右击，点击第一个Open in new tab
将网址中最后的param=数字y数字删去，再复制粘贴即可

添加歌词

添加歌词一共三种方式，推荐使用lrc文件的方式
在控制台的Network里面,找到一个以lyric？开头的文件

找到后右击点击copy里的copy response，没有外copy层可以直接点copy response’
点击上排的Console，输入如图指令

a可以为任何英文字母，可以理解为变量赋值
=后面的为粘贴内容
然后介入a.lrc.lyric输出的是原版字幕，再介入a.tlyric.lyric，输出的是中文字幕
将输出的内容放入到一个.lrc的文件里再放到themes\next\source\images文件夹里，在audio的参数里介入images/.lrc，也要在audio参数外加入lrcType: 3

本文讲的东西并不多，详细移步官方文档
添歌词的另外两种方法文档里就有

博客效果移步[史蒂芬森的小屋](https://jiangyin0750.github.io/`
原文章出处https://jiangyin0750.github.io/aplayer/aplayer-use-help/#more

总结

以上是生活随笔为你收集整理的Hexo+Next用aplayer做播放器的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。