博客园添加背景音乐插件

今天晚上闲得无聊打算改一下博客园的版面，将原本在右边的索引评论榜单等都移动到了左侧，而且扩大了有效页面，提升了页面的利用率。

有意思的是我发现了一位大佬的博客http://www.javashuo.com/article/p-hfxpherd-eb.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原地址便可。

 

固然，能够吧歌曲上传其余地方或者使用在线的歌曲连接，不过这样官方把歌曲连接改了，就播放不了了，因此仍是建议把歌曲文件和封面照片上传博客园上，而后把连接丢给插件就好了。