博客园添加背景音乐插件

入园已经有一段时间了，自己也开始学习一下前端的东西，所以我就从博客园的页面美化开始，自己不断尝试！
今天花了一上午时间，给自己的页面添加了一个音乐播放器插件，下面我就来分享一下关于添加背景音乐插件的全过程！

前期准备：

• 下载音乐mp3文件（百度、网盘...），文件格式后缀改为ppt，并上传至博客园文件区域
  （博客园上传文件格式后缀不支持mp3上传，所以就要把歌曲的后缀名改成了博客园后台支持得文件后缀名，当然可以改成其他后缀名，这个问题不大，只要是歌曲文件，内部编码不变，这个文件的源地址给播放器，播放器插件读到这个文件就能解码播放。）
  
• 将歌曲对应的图片添加至博客园相册
  
• 上传后，音乐文件右键点击复制连接地址(A)，图片右键点击复制图片地址(O)，留以备用。
  然后，进入管理，设置，修改页面定制 CSS 代码及博客侧边栏公告。

页面定制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: '盗将行',
            author: '花粥',
            url: 'https://files.cnblogs.com/files/blogs/680212/%E7%9B%97%E5%B0%86%E8%A1%8C.ppt',
            pic: 'https://images.cnblogs.com/cnblogs_com/blogs/680212/galleries/1970925/t_2105050249181.jpg'
        }
    ]
});
ap.init();
</script>

对于上面的代码，我们需要根据自己需要修改的代码:

{
            title: '盗将行',
            author: '花粥',
            url: 'https://files.cnblogs.com/files/blogs/680212/%E7%9B%97%E5%B0%86%E8%A1%8C.ppt',
            pic: 'https://images.cnblogs.com/cnblogs_com/blogs/680212/galleries/1970925/t_2105050249181.jpg'
        }

对于这样一个对象我们能很快明白：title是音乐名，author是作者名，url是所在的链接地址，pic是音乐封面的链接地址，后两个是我们刚刚复制的地址。
当然，可以把歌曲上传其他地方或者使用在线的歌曲链接，不过这样官方把歌曲链接改了，就播放不了了，所以还是建议把歌曲文件和封面照片上传博客园上，然后把链接丢给插件就行了。

我的效果：