博客園美化——添加Apalyer音樂播放器

目錄

• 前言
• 引入css和js
• 獲取音樂和封面外鏈
  • 獲取音樂外鏈
  • 獲取封面外鏈
• 最終效果如圖

前言

這幾天申請了博客園的博客，非常順利便捷。審核大概還不到一個小時，效率是很高的了，贊一個！

之前折騰過GitHub Page+hexo+next，對於我這種前端小白來說真實有點難度，不過最終還是弄了一個蠻漂亮的博客網站，見https://chens.life，歡迎訪問！奈何🐕百度對GitHub的收錄是真的不好，csdn的廣告商業化讓人作嘔，就試了試博客園。

想給博客加個音樂播放器，還是用著名Aplayer，美觀漂亮。可以參考它們的官方中文文檔，而我們要做的很簡單！

引入css和js

前提是需要申請js權限，大概一個小時就會通過

在頁腳HTML代碼中加入：

<!-- 為博客底部添加音樂組件 -->
<div id="player"  class="aplayer"></div>
<link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script> 

<script type="text/javascript">
const ap = new APlayer({
    container: document.getElementById('player'),
    fixed: true,
    autoplay: true, //自動播放
    audio: [{
        name: 'The Song Of Doremi',
        artist: '林瀾葉',
        url: '.mp3',
        cover: '.ico',
    },
	{
 		name: '陽光甚好，微風不噪',
        artist: '何石',
        url: '.mp3',
        cover: '.ico',
	}

	]
});
ap.init();
</script>

填入歌曲URL和封面外鏈即可！可是如何獲取外聯呢，這里提供一種方法。

獲取音樂和封面外鏈

這里以網易雲為例

獲取音樂外鏈

打開http://music.xf1433.com/，選擇音樂地址，復制自己喜歡的音樂的地址，就可獲取到外鏈。

獲取封面外鏈

在網易雲歌曲頁面，按F12之后打開調試窗口，點擊那個最左上角的小按鈕，

再點擊封面圖片，即可看到圖片的外鏈，復制下來就行了！

最終效果如圖

如有更好的方法，歡迎交流。