如何在博客園中添加音樂插件（可自定義）

效果圖

這里可以用自己下載下來的歌，歌曲數目不是固定的

步驟

1:開通js權限
這里就不具體講述了
2:上傳歌曲和封面
封面：

歌曲：
為什么我的歌的后綴名是css呢，因為博客園上傳的文件類型不支持mp3，改成任意支持的后綴名就行了，其內部編碼是沒有改變的，能被播放器識別

3：代碼
頁面定制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;
}

博客側邊欄公告

<!-- 為博客底部添加音樂組件 -->
<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: '#cdd9e1',      <!-- 插件背景顏色，建議和你的公告欄背景色一樣，這樣融為一體的感覺 -->
    music: [{
            title: '無人之島',
            author: '任然',
            url: 'https://blog-static.cnblogs.com/files/Ricardo-W/%E6%97%A0%E4%BA%BA%E4%B9%8B%E5%B2%9B.css',
            pic: 'https://images.cnblogs.com/cnblogs_com/Ricardo-W/1631171/t_2007131106282%20(32).jpg?a=1594638401479'
        },
        {
            title: 'Señorita',
            author: 'S/C',
            url: 'https://blog-static.cnblogs.com/files/Ricardo-W/Se%C3%B1orita.css',
            pic: 'https://images.cnblogs.com/cnblogs_com/Ricardo-W/1631171/t_2007131106282%20(32).jpg?a=1594638401479'
        },
        {
            title: '夏天的風',
            author: 'Uu',
            url: 'https://blog-static.cnblogs.com/files/Ricardo-W/%E5%A4%8F%E5%A4%A9%E7%9A%84%E9%A3%8E.css',
            pic: 'https://images.cnblogs.com/cnblogs_com/Ricardo-W/1631171/t_2007131106282%20(32).jpg?a=1594638401479'
        }
    ]
});
ap.init();
</script>

我們只需要將title改為自己歌曲的名字，author改為作者，url改為歌曲的鏈接，pic改為封面的鏈接就行了。

大家可以參考一下我的博客園