博客園添加背景音樂插件

/*

2020/1/6更新一下

前幾天我看到有朋友在我這篇博客下留言，關於播放器的問題，我現在使用的播放器已經不是之前的播放器了，所以會有一些問題，加上我當時正在准備期末考試，來不及說明，今天將新的播放器介紹一下，之前的內容就當做一些參考吧。

這里引用的是網易雲歌單，組件用的是APlayer.js

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://files.cnblogs.com/files/wkfvawl/APlayer.min.js"></script>
<div id="aplayer" class="aplayer"  data-id="3046577772" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>

想換自己的歌單需要修改data-id，獲取id的方法，點擊網易雲中的生成外聯播放器即可獲取到歌單id。

 

 

如果因為版權問題無法生成外聯播放器，那么直接看網頁的URL，發現已經將歌單的id給出來了！

比如：

https://music.163.com/#/playlist?id=2821115454

拿來替換即可！

---

 

 

今天晚上閑得無聊打算改一下博客園的版面，將本來在右邊的索引評論榜單等都移動到了左側，並且擴大了有效頁面，提高了頁面的利用率。

有意思的是我發現了一位大佬的博客https://www.cnblogs.com/shwee/p/9084535.html

關於添加背景音樂的一個插件說明。

我試着跟着學習了一些，也添加上了這樣一個音樂播放器，但原博主有些地方沒有說明白，我對其進行一些補充。

頁面定制CSS代碼：

/* 定制公告欄音樂插件的樣式 */
.aplayer {
    font-family: Arial,Helvetica,sans-serif;  /*音樂插件字體*/
    margin: 0px;  /*音樂插件與公告欄左邊的邊距，0px就是直接抵到公告欄左邊的邊上*/
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    border-radius: 2px;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: normal;
}

 

博客側邊欄公告（支持HTML代碼）（支持JS代碼）：

 

<!-- 為博客底部添加音樂組件 -->
<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">
var ap = new APlayer({
    element: document.getElementById('player'),
    narrow: false,
    autoplay: false,          <!-- 是否自動播放 -->
    showlrc: false,
    theme: '#F5F5F5',      <!-- 插件背景顏色，建議和你的公告欄背景色一樣，這樣融為一體的感覺 -->
    music: [{
            title: '音樂1',
            author: 'Valentin',
            url: 'https://files.cnblogs.com/files/shwee/Valentin-A_Little_Story.pdf',
            pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic4.png'
        },
        {
            title: '音樂2',
            author: '林海',
            url: 'https://files.cnblogs.com/files/shwee/%E6%9E%97%E6%B5%B7-%E7%90%B5%E7%90%B6%E8%AF%AD.pdf',
            pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic1.png'
        },
        {
            title: '音樂3',
            author: '趙海洋',
            url: 'https://files.cnblogs.com/files/shwee/%E8%B5%B5%E6%B5%B7%E6%B4%8B-%E3%80%8A%E7%9E%AC%E9%97%B4%E7%9A%84%E6%B0%B8%E6%81%92%E3%80%8B%E5%A4%9C%E8%89%B2%E9%92%A2%E7%90%B4%E6%9B%B2.pdf',
            pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic2.png'
        }
    ]
});
ap.init();
</script>

 

對於上面的代碼也就是我們需要根據自己需要修改的代碼了。

       {
            title: '音樂1',
            author: 'Valentin',
            url: 'https://files.cnblogs.com/files/shwee/Valentin-A_Little_Story.pdf',
            pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic4.png'
        },

對於這樣一個對象我們能很快明白

title是音樂名，author是作者名，url是所在的鏈接地址，pic是音樂封面的鏈接地址，那么這些鏈接地址在哪里找到呢？

首先我們需要將音樂與圖片上傳到博客園，音樂要上傳到文件區域，而博客園上傳文件格式后綴不支持mp3上傳，所以就要把歌曲的后綴名改成了博客園后台支持得文件后綴名，原作者改了個pdf，但好像現在pdf也不支持了，可以改成ppt，當然可以改成其他后綴名，這個問題不大，只要是歌曲文件，內部編碼不變，這個文件的源地址給播放器，播放器插件讀到這個文件就能解碼播放。

而想要得到源地址在文件中右擊Download選擇復制鏈接地址，將得到的地址替換原來的url。

 

而想要得到圖片先將圖片上傳到相冊上，在相冊中右擊圖像，復制圖形地址將得到的地址替換pic原地址即可。

 

當然，可以吧歌曲上傳其他地方或者使用在線的歌曲鏈接，不過這樣官方把歌曲鏈接改了，就播放不了了，所以還是建議把歌曲文件和封面照片上傳博客園上，然后把鏈接丟給插件就行了。