博客园添加音乐插件-aplayer

页面定制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: '#F5F5F5',      <!-- 插件背景颜色，建议和你的公告栏背景色一样，这样融为一体的感觉 -->
    preload:'none',       <!-- 预加载设置为无 -->
    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'
        },
    ]
});
ap.init();
</script>

上传文件

上传文件到博客园，包括图片，和音乐
音乐后缀改为ppt上传，相册图片的链接获取方式除了博主所说，还有就是点开图像，下面有一个查看原图，地址栏就会有图片的链接了

另外上传的文件链接一般都是以下格式，只需要改id和文件名即可

https://blog-static.cnblogs.com/files/你的id/文件名

为什么没有生成播放器呢

以下是我踩的坑：

一：

也许在下面title这个地方歌名带了了单引号导致错误，如下图就是错误例子，应该用\转义'，那么改为Who\'s Lovin\' You就一切ok了

{
            title: 'Who's Lovin' You',
            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'
        }

二：

生成了播放器，但是播放无声音，换成火狐却又能播放了，这是因为你把音乐文件后缀设为了ppt或pdf，改为css就可以了。

最后

文章总结于
王陸-博客园添加背景音乐插件
lewiserii-如何在博客园中添加音乐插件（可自定义）