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

插入音樂

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

HTML標籤
MeingJS方式
hexo-tag-aplayer插件

HTML

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

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

單首

<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

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

<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插件

進入blog目錄，打開git bash輸入npm install hexo-tag-aplayer --save安裝Aplayer插件。
文章內輸入語法即可。

單首

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 地址

歌單

{% 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 %}

吸底模式

const ap = new APlayer({
    container: document.getElementById('player'),
    fixed: true,
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'url.mp3',
        cover: 'cover.jpg',
    }]
});

迷你模式

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
fixed	false	吸底模式
mini	false	迷你模式(只有一張專輯圖大小)
loop	all	循環播放,值:‘all’(一直), ‘one’(一次), ‘none’(從不)
order	list	值: ‘list’, ‘random’
volume	0.7	預設音量
mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
listfolded	false	音樂播放列表是否摺疊
autoplay	true	自動播放歌曲(不適用於手機)
theme	#ad7a86	播放器色彩設置

PJAX 兼容

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

$(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 中配置本插件：

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標籤

<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：插入音视频

推薦網站