網站插入 Aplayer/網易雲 音樂播放器

安裝插件

插件需要在Hexo中使用

安裝

hexo-tag-aplayer

插件：

$ npm install --save hexo-tag-aplayer           

複制

為了友善操作，直接使用Aplayer插件中的

MetingJS

（基于

Meting API

的 APlayer 衍生播放器）

在 Hexo 配置檔案 _config.yml 中設定：

aplayer:
  meting: true           

複制

不安裝插件

同樣也是使用的Aplayer中的

MetingJS

直接在界面中引入alplayer和meting需要的css檔案和js檔案

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>           

複制

配置使用

引入完Aplayer中和MetingJS後，就可以在界面中中使用

MetingJS

播放器了；

單曲：

{% meting "1405349492" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:321px" "preload:auto" %}           

複制

預覽：

歌單：

{% meting "5068325488" "netease" "playlist" "theme:#555" "mutex:true" "listmaxheight:321px" "preload:auto" %}           

複制

預覽：

相關配置:

列1	列2	列3
選項	預設值	描述
id	必須值	歌曲 id / 播放清單 id / 相冊 id / 搜尋關鍵字
server	必須值	音樂平台: netease, tencent, kugou, xiami, baidu
type	必須值	song, playlist, album, search, artist
fixed	false	開啟固定模式
mini	false	開啟迷你模式
loop	all	清單循環模式：all, one,none
order	list	清單播放模式： list, random
volume	0.7	播放器音量
lrctype	歌詞格式類型
listfolded	false	指定音樂播放清單是否折疊
storagename	metingjs	LocalStorage 中存儲播放器設定的鍵名
autoplay	true	自動播放，移動端浏覽器暫時不支援此功能
mutex	true	該選項開啟時，如果同頁面有其他 aplayer 播放，該播放器會暫停
listmaxheight	340px	播放清單的最大長度
preload	auto	音樂檔案預載入模式，可選項： none, metadata, auto
theme	#ad7a86	播放器風格色彩設定

使用音樂平台提供插件

不使用Aplayer播放器；

以網易雲為例，網頁端點選生成外鍊播放器即可生成外鍊代碼，如我的某個歌單生成外鍊。

可以在自己部落格頁面中嵌入插件:

<iframe 
 frameborder="no" border="0" 
 marginwidth="0" marginheight="0" 
 width=100% height=321 
 src="//music.163.com/outchain/player?type=0&id=5068325488&auto=0&height=430">
</iframe>           

複制

效果：

後記

toc

點選後點選後無法跳轉問題，原因是aplayer播放器與

toc

不相容；

解決方法：

引入此js，替換掉aplayer原本的js：

https://cdn.jsdelivr.net/gh/ooahz/source@latest/Aplayer/APlayer.min.js           

複制