如何給博客加上音樂

介紹

今天在逛技術大佬的博客的時候，發現他們的有的生活向的博客放上了本身喜歡的音樂，這讓我心神嚮往。以個人好奇心加愛折騰的個性，必要給個人博客來一個這個功能。😬

本文首發於個人技術博客 Timbok.top

正文

十多分鐘的百度加Google，看到了兩種可行的方法。

方法一

安裝 hexo-tag-aplayer

npm install --save hexo-tag-aplayer

在你須要的地方引入

{% aplayer "歌曲名稱" "做者" "音樂_url" "封面圖片_url" "autoplay" %}

參數列表

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

注意：這裏的url推薦放在七牛上，加載速度倍快。😀

在該插件的GitHub上還推薦了另外一種更便捷的方法。使用MeingJS

如下是GitHub原話

MetingJS 是基於Meting API 的 APlayer 衍生播放器，引入 MetingJS 後，播放器將支持對於 QQ音樂、網易雲音樂、蝦米、酷狗、百度等平臺的音樂播放。

若是想在本插件中使用 MetingJS，請在 Hexo 配置文件 _config.yml 中設置：

aplayer:
  meting: true

接着就能夠經過 {% meting ...%} 在文章中使用 MetingJS 播放器了：

<!-- 簡單示例 (id, server, type)  -->
{% meting "60198" "netease" "playlist" %}

<!-- 進階示例 -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

具體請前往 hexo-tag-aplayer 查看

方法二

利用網易雲提供的音樂iframe標籤，在ejs模板裏配置。
這樣的好處就是添加歌曲的位置更自由。

因爲網易雲有的歌曲沒有iframe，博主沒有使用該方法

總結

想先看加上音樂效果的請查看。