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做播放器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。