時(shí)間：2023-04-30 04:57:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-04-30 04:57:02 來源：網(wǎng)站運(yùn)營
<建站系列-四> Hexo博客添加音樂界面：本文章首發(fā)于筆者博客，歡迎關(guān)注~前言：以網(wǎng)易云音樂為例，其它同理。
給自己的博客添加音樂播放界面，一方面自己隨時(shí)可以在線聽，另一方面可以讓訪問博客的友友邊讀博文邊欣賞，還有，重要的是，咱逼格要夠，懂吧！音樂播放器往主頁一放，咱就是說瞬間逼格拉滿好吧
在線咨詢
生成外鏈播放器，這可以調(diào)用云音樂提供的iframe插件編輯器，調(diào)整尺寸，復(fù)制底部HTML代碼，如下圖：playlist?id=后就是歌單id，復(fù)制，黏貼替換下面HTML代碼中的id：<!--網(wǎng)易云音樂插件--><!-- require APlayer --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script><!-- require MetingJS--><script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script> <!--網(wǎng)易云playlist外鏈地址--> <meting-js server="netease" type="playlist" id="110119120" mini="false" fixed="false" list-folded="true" autoplay="false" volume="0.4" theme="#FADFA3" order="list" loop="all" preload="auto" mutex="true"></meting-js>由于網(wǎng)易云禁用了一鍵式歌單外鏈，所以我們歌單界面用第三方插件Aplayer和Metingjs實(shí)現(xiàn)，Aplayer是一個(gè)功能強(qiáng)大的HTML5音樂播放器，而Metingjs基于Aplayer進(jìn)行封裝[1]，兩者已集成到NexT插件pjax中。 Metingjs封裝控制語句參數(shù)見下表，可按需調(diào)整：| 選項(xiàng) | 默認(rèn) | 描述 |
|---|---|---|
| id(編號(hào)) | require | 歌曲ID /播放列表ID /專輯ID /搜索關(guān)鍵字 |
| server(平臺(tái)) | require | 音樂平臺(tái)：netease，tencent，kugou，xiami，baidu |
| type（類型） | require | song，playlist，album，search，artist |
| auto（支持類種 類） | options | 音樂鏈接，支持：netease，tencent，xiami |
| fixed（固定模式） | false | 啟用固定模式 |
| mini（迷你模式） | false | 啟用迷你模式 |
| autoplay（自動(dòng)播放） | false | 音頻自動(dòng)播放 |
| theme(主題顏色) | #2980b9 | 默認(rèn)#2980b9 |
| loop（循環(huán)） | all | 播放器循環(huán)播放，值：“all”，one”，“none” |
| order(順序) | list | 播放器播放順序，值：“l(fā)ist”，“random” |
| preload(加載) | auto | 值：“none”，“metadata”，“'auto” |
| volume（聲量） | 0.7 | 默認(rèn)音量，請注意播放器會(huì)記住用戶設(shè)置，用戶自己設(shè)置音量后默認(rèn)音量將不起作用 |
| mutex（限制） | true | 防止同時(shí)播放多個(gè)玩家，在該玩家開始播放時(shí)暫停其他玩家 |
| lrc-type（歌詞） | 0 | 歌詞顯示 |
| list-folded（列表折疊） | false | 指示列表是否應(yīng)該首先折疊 |
| list-max-height（最大高度） | 340px | 列出最大高度 |
| storage-name（儲(chǔ)存名稱） | metingjs | 存儲(chǔ)播放器設(shè)置的localStorage鍵 |
source/themes/hexo-theme-next-8.11.0/layout/_macro/sidebar.njk文件，這是側(cè)邊欄圖層源文件，把之前生成的HTML代碼插入要想要顯示的位置。注意：插入不同位置會(huì)顯示在側(cè)邊欄不同位置，我們可以精確定位，位置對(duì)應(yīng)關(guān)系如下圖：source/themes/hexo-theme-next-8.11.0/layout/_layout.njk文件，復(fù)制以下語句到<head>標(biāo)簽后<!--pjax：防止跳轉(zhuǎn)頁面音樂暫停--> <script src="https://cdn.jsdelivr.net/npm/pjax@0.2.8/pjax.js"></script>最后，開啟NexT主題pjax插件，修改主題配置文件，令pjax: true 后話：
經(jīng)過簡單的幾個(gè)步驟，我們?yōu)椴┛吞砑恿死L(fēng)的音樂播放界面，終于可以愉快地點(diǎn)看博客邊聽歌了，妙啊！
碎碎念：終于，<建站系列>的四篇博文全部更完，Markdown碼了字接近6000字，加上配圖，并且一步步重新搭建，花了我兩天時(shí)間，屬實(shí)不易。寫這個(gè)系列一方面是記錄建站過程，方便日后查閱；另一方面是想通過一套詳細(xì)易讀的教材讓大家少走彎路，快速上手。對(duì)這套教程，我有信心說是較為全面且易讀的，基本把重新建站的各個(gè)方面都覆蓋到了，直接跟著一步步走就可以了，不用本站、CSDN、Google、官網(wǎng)到處翻來翻去。希望能給你帶來幫助?~
關(guān)鍵詞：界面,音樂,系列
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
