Loading

博客自动播放音乐

添加播放器

参考 博客园美化——添加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.cssAPlayer.min_v1.10.1.js两个文件保存到自己的博客,将封面、音频文件的链接填入上面的脚本代码中。链接使用博客园内部链接,不依靠第三方应用。

生成歌曲URL和封面链接

上面的歌曲是我自己比较喜欢的两首歌,来自B站:

参考 获取哔哩哔哩视频封面 下载视频的反面并手动调整好大小,图片如下:

通过bilibili手机端的下载缓存提取音频文件,参考 怎么单独下载bilibili上视频中的音频(MP3格式的)

最重要的一步是把图片的后缀改为gif、把音频文件的后缀改为js然后上传到博客园的文件,因为博客园只支持这几种文件:

posted @ 2022-09-06 20:39  二次元攻城狮  阅读(162)  评论(0编辑  收藏  举报