爲Hexo博客添加音樂播放器並保持跳轉時不中斷播放狀態

最近用hexo弄了個我的博客，網站兩翼的位置比較空，因此我在右邊擺了一隻看板娘做爲平衡，就算左邊不擺東西，其實已經比較和諧了。可是看到網上有一些我的博客炫酷的音樂播放器，正好置於左下固定位置，就想本身也弄一個也不錯。

 音樂播放器的初步實現

其實若是單純的只是插入一個音樂播放器是很簡單的，只需從網易雲或其餘有相應功能的音樂網站找到外鏈播放器的代碼，在合適的地方插入iframe元素便可

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=29751583&auto=1&height=66"></iframe>

插入sidebar的最終效果還不錯

 發現的問題

如今播放音樂沒有問題了，可是在跳轉站內頁面的時候音樂會自動中斷很影響體驗，而且外鏈播放器放在sidebar裏進入文章詳情頁sidebar會消失

針對以上問題，使用aplayer + meting.js生成固定在底部的外鏈播放器，使用pjax進行頁面路由切換的管理

 插一句：關於pjax

pjax主要是利用pushState來改變瀏覽器URL，利用ajax來請求頁面，以實現不刷新瀏覽器更新頁面，這樣就能保證正在播放音樂中的播放器不受影響

 解決問題

播放器配置，具體能夠參考Aplayer官方文檔、MetingJS官方文檔

<!-- 引用Aplayer和metingjs -->

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

<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>

<div id="my-aplayer"

 class="aplayer" 

 data-id="5010430092" 

 data-server="netease" 

 data-type="playlist" 

 data-fixed="true" // 吸底模式能夠固定播放器於頁面底部

 data-autoplay="false" 

 data-order="list" 

 data-volume="0.55" 

 data-theme="#cc543a" 

 data-preload="auto" 

></div>

pjax配置，若是使用next主題應用pjax很簡單，只需下載相應npm包而後在_config.xml裏配置pjax:true，可是個人博客是本身找的主題，因此得手動引入而後配置，參考文檔jquery-pjax文檔

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

<script>

 // 對全部連接跳轉事件綁定pjax容器container

 $(document).pjax('a[target!=_blank]', '#container', {fragment:'#container', timeout:8000})

</script>

至此就實現了一個位於瀏覽器底部的播放器，且在網站內切換頁面音樂也不會中斷

 後續

使用pjax託管頁面後產生了一些問題，由於頁面不刷新，因此切換頁面後有一些原來會執行的javascript代碼不會再執行，另一些監聽事件也出了問題，解決方法也比較容易，把這些事件歸入pjax管理，在pjax執行完後添加相應的回調函數便可

$(document).on('pjax:complete', function() {

 // 須要作的操做

})