博客中添加音乐播放器插件

效果图

这里可以用自己下载下来的歌，歌曲数目不是固定的

步骤：

1：申请开通js权限
2：上传歌曲和封面
　　歌曲封面上传：

　　上传歌曲（注意：文件大小不超过10M）：
　　为什么我的歌的后缀名是css呢，因为博客园上传的文件类型不支持mp3，改成任意支持的后缀名就行了，其内部编码是没有改变的，能被播放器识别

 3.代码部分

页面定制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: true,          <!-- 是否自动播放 -->
    showlrc: false,
    theme: '#cdd9e1',      <!-- 插件背景颜色，建议和你的公告栏背景色一样，这样融为一体的感觉 -->
    music: [{
            title: '包容',
            author: '郑源',
            url: 'https://files.cnblogs.com/files/xiykj/%E5%8C%85%E5%AE%B9-%E9%83%91%E6%BA%90.css',
            pic: 'https://images.cnblogs.com/cnblogs_com/xiykj/1848806/o_20091610035620200916.jpg'
        },
        {
            title: '连借口都没有',
            author: '孙子涵',
            url:
'https://files.cnblogs.com/files/xiykj/%E8%BF%9E%E5%80%9F%E5%8F%A3%E9%83%BD%E6%B2%A1%E6%9C%89-%E5%AD%99%E5%AD%90%E6%B6%B5.css',
            pic: 'https://images.cnblogs.com/cnblogs_com/xiykj/1848806/o_20091611464620200917.jpeg'
        },
        {
            title: '心在跳，情在烧',
            author: '谢军',
            url: 'https://files.cnblogs.com/files/xiykj/%E5%BF%83%E5%9C%A8%E8%B7%B3%E6%83%85%E5%9C%A8%E7%83%A7-%E8%B0%A2%E5%86%9B.css',
            pic: 'https://images.cnblogs.com/cnblogs_com/xiykj/1848806/o_20091610035620200916.jpg'
        },
        {
            title: '你是我唯一',
            author: '郑源',
            url: 'https://files.cnblogs.com/files/xiykj/%E4%BD%A0%E6%98%AF%E6%88%91%E7%9A%84%E5%94%AF%E4%B8%80-%E9%83%91%E6%BA%90.css',
            pic: 'https://images.cnblogs.com/cnblogs_com/xiykj/1848806/o_20091611464620200917.jpeg'
        },
        {
            title: '光辉岁月',
            author: 'Beyond',
            url: 'https://files.cnblogs.com/files/xiykj/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88-BEYOND.css',
            pic: 'https://images.cnblogs.com/cnblogs_com/xiykj/1848806/o_20091610035620200916.jpg'
        },
        {
            title: '朋友',
            author: '周华健',
            url: 'https://files.cnblogs.com/files/xiykj/%E6%9C%8B%E5%8F%8B-%E5%91%A8%E5%8D%8E%E5%81%A5.css',
            pic: 'https://images.cnblogs.com/cnblogs_com/xiykj/1848806/o_20091611464620200917.jpeg'
        },
        {
            title: '曾经的你',
            author: '许巍',
            url: 'https://files.cnblogs.com/files/xiykj/%E6%9B%BE%E7%BB%8F%E7%9A%84%E4%BD%A0-%E8%AE%B8%E5%B7%8D.css',
            pic: 'https://images.cnblogs.com/cnblogs_com/xiykj/1848806/o_20091610035620200916.jpg'
        },
        {
            title: '海阔天空',
            author: 'Beyond',
            url: 'https://files.cnblogs.com/files/xiykj/%E6%B5%B7%E9%98%94%E5%A4%A9%E7%A9%BA-BEYOND.css',
            pic: 'https://images.cnblogs.com/cnblogs_com/xiykj/1848806/o_20091611464620200917.jpeg'
        },
        {
            title: '夜空中最亮的星',
            author: '逃跑计划',
            url: 'https://files.cnblogs.com/files/xiykj/%E5%A4%9C%E7%A9%BA%E4%B8%AD%E6%9C%80%E4%BA%AE%E7%9A%84%E6%98%9F-%E9%80%83%E8%B7%91%E8%AE%A1%E5%88%92.css',
            pic: 'https://images.cnblogs.com/cnblogs_com/xiykj/1848806/o_20091610035620200916.jpg'
        },
        {
            title: '比心更痛的眼眸',
            author: '郑源',
            url: 'https://files.cnblogs.com/files/xiykj/%E6%AF%94%E5%BF%83%E6%9B%B4%E7%97%9B%E7%9A%84%E7%9C%BC%E7%9C%B8-%E9%83%91%E6%BA%90.css',
            pic: 'https://images.cnblogs.com/cnblogs_com/xiykj/1848806/o_20091611464620200917.jpeg'
        },
        {
            title: '黑街',
            author: '陈雅雯',
            url: 'https://files.cnblogs.com/files/xiykj/%E9%BB%91%E8%A1%97-%E9%99%88%E9%9B%85%E9%9B%AF.css',
            pic: 'https://images.cnblogs.com/cnblogs_com/xiykj/1848806/o_20091610035620200916.jpg'
        },
    ]
});
ap.init();
</script>

我们只需要将 title 改为自己歌曲的名字，author改为作者，url改为歌曲的链接，pic改为封面的链接就行了

原文链接：https://www.cnblogs.com/Ricardo-W/p/13332769.html