博客园添加背景音乐插件
/*
2020/1/6更新一下
前几天我看到有朋友在我这篇博客下留言，关于播放器的问题，我现在使用的播放器已经不是之前的播放器了，所以会有一些问题，加上我当时正在准备期末考试，来不及说明，今天将新的播放器介绍一下，之前的内容就当做一些参考吧。
这里引用的是网易云歌单，组件用的是APlayer.js
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css"> <script src="https://files.cnblogs.com/files/wkfvawl/APlayer.min.js"></script> <div id="aplayer" class="aplayer" data-id="3046577772" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div> <script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
想换自己的歌单需要修改data-id，获取id的方法，点击网易云中的生成外联播放器即可获取到歌单id。
如果因为版权问题无法生成外联播放器，那么直接看网页的URL，发现已经将歌单的id给出来了！
比如：
https://music.163.com/#/playlist?id=2821115454
拿来替换即可！
今天晚上闲得无聊打算改一下博客园的版面，将本来在右边的索引评论榜单等都移动到了左侧，并且扩大了有效页面，提高了页面的利用率。
有意思的是我发现了一位大佬的博客https://www.cnblogs.com/shwee/p/9084535.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原地址即可。
当然，可以吧歌曲上传其他地方或者使用在线的歌曲链接，不过这样官方把歌曲链接改了，就播放不了了，所以还是建议把歌曲文件和封面照片上传博客园上，然后把链接丢给插件就行了。
