效果图
这里可以用自己下载下来的歌，歌曲数目不是固定的
步骤：
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/likecs_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/likecs_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/likecs_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/likecs_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/likecs_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/likecs_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/likecs_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/likecs_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/likecs_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/likecs_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/likecs_com/xiykj/1848806/o_20091610035620200916.jpg\' }, ] }); ap.init(); </script>
我们只需要将 title 改为自己歌曲的名字，author改为作者，url改为歌曲的链接，pic改为封面的链接就行了
原文链接：https://www.cnblogs.com/Ricardo-W/p/13332769.html