Loading

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

前言

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

之前折腾过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之后打开调试窗口,点击那个最左上角的小按钮,
在这里插入图片描述
再点击封面图片,即可看到图片的外链,复制下来就行了!
在这里插入图片描述

最终效果如图

在这里插入图片描述如有更好的方法,欢迎交流。

Stay Hungry, Stay Folish.
posted @ 2020-05-19 11:33  RelaxCN  阅读(584)  评论(1编辑  收藏  举报