博客園添加音樂

公告添加下面代碼

/* 定制公告欄音樂插件的樣式 */
.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://blog-static.cnblogs.com/files/php-linux/APlayer.min_v1.10.1.css" rel="stylesheet">
<script src="https://blog-static.cnblogs.com/files/php-linux/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: '往后余生',
            author: '王貳浪',
            url: 'https://blog-static.cnblogs.com/files/php-linux/%E7%8E%8B%E8%B4%B0%E6%B5%AA-%E5%BE%80%E5%90%8E%E4%BD%99%E7%94%9F.js',
            pic: 'https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/t_109951163337847600.jpg'
        },
        {
            title: '拂雪',
            author: '不才',
            url: 'https://files.cnblogs.com/files/php-linux/%E4%B8%8D%E6%89%8D-%E6%8B%82%E9%9B%AA.js',
            pic: 'https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/t_6631154628171782.jpg'
        },
        {
            title: '我的一個道姑朋友',
            author: '洛塵鞅',
            url: 'https://files.cnblogs.com/files/php-linux/%E6%B4%9B%E5%B0%98%E9%9E%85-%E6%88%91%E7%9A%84%E4%B8%80%E4%B8%AA%E9%81%93%E5%A7%91%E6%9C%8B%E5%8F%8B.js',
            pic: 'https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/t_109951162818478976.jpg'
        },
        {
            title: '大田后生仔',
            author: '王雨萌',
            url: 'https://files.cnblogs.com/files/php-linux/%E7%8E%8B%E7%8E%89%E8%90%8C-%E5%A4%A7%E7%94%B0%E5%BE%8C%E7%94%9F%E4%BB%94.js',
            pic: 'https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/t_109951164423988553.jpg'
        }
    ]
});
ap.init();
</script>