添加播放器
参考 博客园美化——添加Apalyer音乐播放器 文章给博客加个Aplayer音乐播放器,可以参考它们的官方中文文档增加自定义设置,在页脚HTML代码中加入:
<!-- 为博客底部添加音乐组件 -->
<div id="player" class="aplayer"></div>
<link href="https://blog-static.cnblogs.com/files/timefiles/APlayer.min_v1.10.1.css" rel="stylesheet">
<script src="https://blog-static.cnblogs.com/files/timefiles/APlayer.min_v1.10.1.js"></script>
<script type="text/javascript">
const ap = new APlayer({
container: document.getElementById('player'),
fixed: true,
autoplay: true, //自动播放
order:'random',//随机播放
audio: [{
name: '烟花易冷',
artist: '小柔Channel',
url: 'https://blog-static.cnblogs.com/files/timefiles/%E7%83%9F%E8%8A%B1%E6%98%93%E5%86%B7-%E5%B0%8F%E6%9F%94Channel.js',
cover: 'https://blog-static.cnblogs.com/files/timefiles/%E7%83%9F%E8%8A%B1%E6%98%93%E5%86%B7-%E5%B0%8F%E6%9F%94Channel-%E5%B0%81%E9%9D%A2.gif?t=1662465614',
},
{
name: '红颜如霜',
artist: '江壹纯',
url: 'https://blog-static.cnblogs.com/files/timefiles/%E7%BA%A2%E9%A2%9C%E5%A6%82%E9%9C%9C-%E6%B1%9F%E5%A3%B9%E7%BA%AF.js',
cover: 'https://blog-static.cnblogs.com/files/timefiles/%E7%BA%A2%E9%A2%9C%E5%A6%82%E9%9C%9C-%E6%B1%9F%E5%A3%B9%E7%BA%AF-%E5%B0%81%E9%9D%A2.gif?t=1662465544',
}
]
});
ap.init();
</script>
建议将APlayer.min_v1.10.1.css、APlayer.min_v1.10.1.js两个文件保存到自己的博客,将封面、音频文件的链接填入上面的脚本代码中。链接使用博客园内部链接,不依靠第三方应用。
生成歌曲URL和封面链接
上面的歌曲是我自己比较喜欢的两首歌,来自B站:
参考 获取哔哩哔哩视频封面 下载视频的反面并手动调整好大小,图片如下:
通过bilibili手机端的下载缓存提取音频文件,参考 怎么单独下载bilibili上视频中的音频(MP3格式的)。
最重要的一步是把图片的后缀改为gif、把音频文件的后缀改为js然后上传到博客园的文件,因为博客园只支持这几种文件: