0%

Hexo 搭建系列 - 插入音樂與影片

推薦網站

插入音樂

有幾種方法可以插入音樂:

  1. HTML標籤
  2. MeingJS方式
  3. hexo-tag-aplayer插件

HTML

1)直接使用標籤寫

1
<audio src="mp3網址" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the audio tag.</audio>

2)iframe

直接複製音樂平台提供的外鏈方式(以網易雲為例):

單首

1
2
3
4
5
<iframe 
frameborder="no" border="0" marginwidth="0"
marginheight="0" width=330 height=86
src="//music.163.com/outchain/player?type=2&id=網易雲歌曲id&auto=0&height=66">
</iframe>

歌單

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=0&id=網易雲歌單id&auto=1&height=430"></iframe>

HEXO內置iframe標籤

1
{% iframe url [width] [height] %}

3)Embed

直接複製音樂平台提供的外鏈方式

1
<embed src="http://www.youtaker.com/video2015/v2007/swf/m.swf" width="336" height="100" bgcolor="#FFFFFF" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"  flashvars="file=http://www.youtaker.com/video/v/nu/4b8604f40a6547538970fde857f2c50f85.xml&linkfromdisplay=false&showdigits=true&autostart=true&repeat=true&showfsbutton=false&showeq=true" />

MeingJS

文章開頭添加(或修改主題)

1
2
3
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>

在文章插入

1
<div class="aplayer" data-id="歌曲id" data-server="netease" data-type="song" data-mode="single"></div>

標籤參數

  • title : 曲目標題
  • author: 曲目作者
  • url: 音樂文件 URL 地址
  • picture_url: (可選) 音樂對應的圖片地址
  • narrow: (可選)播放器袖珍風格
  • autoplay: (可選) 自動播放,移動端瀏覽器暫時不支持此功能
  • width:xxx: (可選) 播放器寬度 (默認: 100%)
  • lrc:xxx: (可選)歌詞文件 URL 地址

效果:

hexo-tag-aplayer插件

  1. 進入blog目錄,打開git bash輸入npm install hexo-tag-aplayer --save安裝Aplayer插件。

  2. 文章內輸入語法即可。

單首

1
{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

標籤參數

  • title : 曲目標題
  • author: 曲目作者
  • url: 音樂文件 URL 地址
  • picture_url: (可選) 音樂對應的圖片地址
  • narrow: (可選)播放器袖珍風格
  • autoplay: (可選) 自動播放,移動端瀏覽器暫時不支持此功能
  • width:xxx: (可選) 播放器寬度 (默認: 100%)
  • info@lrc:xxx: (可選)歌詞文件 URL 地址

歌單

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% aplayerlist %}
{
"narrow": false, // (可選)播放器袖珍風格
"autoplay": true, // (可選) 自動播放,移動端瀏覽器暫時不支持此功能
"mode": "random", // (可選)曲目循環類型,有'random'(隨機播放), 'single' (單曲播放), 'circulation' (循環播放), 'order' (列表播放), 默認:'circulation'
"showlrc": 3, // (可選)歌詞顯示配置項,可選項有:1,2,3
"mutex": true, // (可選)該選項開啟時,如果同頁面有其他 aplayer 播放,該播放器會暫停
"theme": "#e6d0b2", | // (可選)播放器風格色彩設置,默認:#b7daff
"preload": "metadata", // (可選)音樂文件預載入模式,可選項: 'none' 'metadata' 'auto', 默認: 'auto'
"listmaxheight": "513px", // (可選) 該播放列表的最大長度
"music": [
{
"title": "歌名",
"author": "歌手",
"url": "歌曲網址",
"pic": "專輯圖",
"lrc": "歌詞檔"
},
{
"title": "歌名",
"author": "歌手",
"url": "歌曲網址",
"pic": "專輯圖"
}
]
}
{% endaplayerlist %}

歌詞

1
2
3
{% aplayerlrc "title" "author" "url" "autoplay" %}
[00:00.00]lrc here
{% endaplayerlrc %}

吸底模式

1
2
3
4
5
6
7
8
9
10
const ap = new APlayer({
container: document.getElementById('player'),
fixed: true,
audio: [{
name: 'name',
artist: 'artist',
url: 'url.mp3',
cover: 'cover.jpg',
}]
});

迷你模式

1
2
3
4
5
6
7
8
9
10
const ap = new APlayer({
container: document.getElementById('player'),
mini: true,
audio: [{
name: 'name',
artist: 'artist',
url: 'url.mp3',
cover: 'cover.jpg',
}]
});

但這樣一首一首加非常麻煩啊!

MeingJS 支持 (3.0 新功能)
MetingJS 是基于Meting API 的 APlayer 衍生播放器,引入 MetingJS 后,播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

config.yml 加上:

1
2
aplayer:
meting: true

就可以更便利的插入音樂平台的歌曲了。

單首歌或歌單

1
{% meting "歌曲id/歌單id" "音樂平台" "song(playlist)" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

效果

參數預設
id必要歌曲 id / 歌單 id / album id / search keyword
server必要音樂平台:netease(網易雲),tencent,kugou,xiami,baidu
type必要song(單首),playlist(歌單),album,search,artist
fixedfalse吸底模式
minifalse迷你模式(只有一張專輯圖大小)
loopall循環播放,值:‘all’(一直), ‘one’(一次), ‘none’(從不)
orderlist值: ‘list’, ‘random’
volume0.7預設音量
mutextrue互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
listfoldedfalse音樂播放列表是否摺疊
autoplaytrue自動播放歌曲(不適用於手機)
theme#ad7a86播放器色彩設置

PJAX 兼容

若在 Hexo 中使用了 PJAX,可能需要自己手動清理 APlayer 全局實例:

1
2
3
4
5
6
7
8
$(document).on('pjax:start', function () {
if (window.aplayers) {
for (let i = 0; i < window.aplayers.length; i++) {
window.aplayers[i].destroy();
}
window.aplayers = [];
}
});

自定義配置(3.0 新功能)

現在你可以在 Hexo 配置文件 config.yml 中配置本插件:

1
2
3
4
5
6
7
8
9
10
aplayer:
script_dir: some/place # Public 目錄下腳本目錄路徑,默認: 'assets/js'
style_dir: some/place # Public 目錄下樣式目錄路徑,默認: 'assets/css'
cdn: http://xxx/aplayer.min.js # 引用 APlayer.js 外部 CDN 地址 (默認不開啟)
style_cdn: http://xxx/aplayer.min.css # 引用 APlayer.css 外部 CDN 地址 (默認不開啟)
meting: true # MetingJS 支持
meting_api: http://xxx/api.php # 自定義 Meting API 地址
meting_cdn: http://xxx/Meing.min.js # 引用 Meting.js 外部 CDN 地址 (默認不開啟)
asset_inject: true # 自動插入 Aplayer.js 與 Meting.js 資源腳本, 默認開啟
externalLink: http://xxx/aplayer.min.js # 老版本參數,功能與參數 cdn 相同

其他問題解決方式參考官方README.MD

插入影片

與音樂大同小異,會插入音樂就會插入影片了。

1)HTML標籤

1
<video poster="https://封面.jpg" src="https://影片網址.mp4" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the video tag.</video>

2)使用hexo-the-dplayer插件

在blog根目錄 Git Bash npm install hexo-tag-dplayer --save 來安裝Dplayer插件

在blog中寫法

1
{% dplayer "url=https://影片網址.mp4" "https://封面.jpg" "api=https://api.prprpr.me/dplayer/" "id=自己取" "loop=false" %}

可直接使用官網api

參考資料

markdown插入音乐
hexo-tag-aplayer
hexo 插入音乐与视频
从零开始建立个人博客V:插入音视频

------------ 本文結束 ------------

【版權聲明】
本文鏈接: https://zenreal.github.io/posts/61856/
本文為博主(ZEN)原創文章,遵循CC BY-NC-SA 4.0 版權協議,轉載請附上原文出處鏈接和本聲明。