博客园美化——添加Apalyer音乐播放器

目录

• 前言
• 引入css和js
• 获取音乐和封面外链
  • 获取音乐外链
  • 获取封面外链
• 最终效果如图

前言#

这几天申请了博客园的博客，非常顺利便捷。审核大概还不到一个小时，效率是很高的了，赞一个！

之前折腾过GitHub Page+hexo+next，对于我这种前端小白来说真实有点难度，不过最终还是弄了一个蛮漂亮的博客网站，见https://chens.life，欢迎访问！奈何🐕百度对GitHub的收录是真的不好，csdn的广告商业化让人作呕，就试了试博客园。

想给博客加个音乐播放器，还是用著名Aplayer，美观漂亮。可以参考它们的官方中文文档，而我们要做的很简单！

引入css和js#

前提是需要申请js权限，大概一个小时就会通过

在页脚HTML代码中加入：

<!-- 为博客底部添加音乐组件 -->
<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">
const ap = new APlayer({
    container: document.getElementById('player'),
    fixed: true,
    autoplay: true, //自动播放
    audio: [{
        name: 'The Song Of Doremi',
        artist: '林澜叶',
        url: '.mp3',
        cover: '.ico',
    },
	{
 		name: '阳光甚好，微风不噪',
        artist: '何石',
        url: '.mp3',
        cover: '.ico',
	}

	]
});
ap.init();
</script>

填入歌曲URL和封面外链即可！可是如何获取外联呢，这里提供一种方法。

获取音乐和封面外链#

这里以网易云为例

获取音乐外链#

打开http://music.xf1433.com/，选择音乐地址，复制自己喜欢的音乐的地址，就可获取到外链。

获取封面外链#

在网易云歌曲页面，按F12之后打开调试窗口，点击那个最左上角的小按钮，

再点击封面图片，即可看到图片的外链，复制下来就行了！

最终效果如图#

如有更好的方法，欢迎交流。