博客园添加音乐

管理 -  设置  - 公告 -添加下面代码

 

 

 

 

<!-- 为博客底部添加音乐组件 -->
<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>

　　

样式可以自己设置 下面是我的 

 

 

页面定制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;
}