首页 > 其他分享 >博客自动播放音乐

博客自动播放音乐

时间:2022-09-06 20:44:21浏览次数:96  
标签:-% 9F% E9% E5% 音乐 E6% E7% 博客 自动播放

添加播放器

参考 博客园美化——添加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然后上传到博客园的文件,因为博客园只支持这几种文件:

标签:-%,9F%,E9%,E5%,音乐,E6%,E7%,博客,自动播放
From: https://www.cnblogs.com/timefiles/p/16663246.html

相关文章

  • 博客园主题
    参考链接博客园自定义主题-陈可儿-博客园(cnblogs.com)https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/Docs/GettingStarted/install如果你打不开gith......
  • 校友聚光灯:Ben — 从音乐和音频总监到 CEO 和联合创始人
    校友聚光灯:Ben—从音乐和音频总监到CEO和联合创始人“我最终加入了CodeFellows,这太棒了。六个月的时间里,被其他真正热衷于它的人包围着,我不仅了解了软件世界,它是如......
  • 博客园的打赏功能
    简单几步为自己的博客园主页添加打赏功能:1准备工作:准备支付宝和微信的二维码,后缀名需修改.bmp格式。如zfb.bmp,wx.bmp。   2上传图片:进入自己的博客园,然后进入......
  • 博客园使用数学公式
    1、管理->选型->启用数学公式支持2、使用markdown编辑器3、示例:$\sum_{1}^{m}\theta^TX^i$\[\sum_{1}^{m}\theta^TX^i\]说明:公式使用\(\$\),或\(\$\$\)独立一行,......
  • 关于写博客没有记录问题
    上个学期基本每天都有写博客,共写了102篇,但是老师那边有显示的只有25篇,这让我很不能理解,也可能因为这个我才得了很低的分数。思来想去还是觉得是我编辑的主题问题,当时为了......
  • 开始在博客园记录
    记录内容目录记录内容简介简介现在是2022-09-04,本人今年刚刚大学毕业进入工作。专业自动化,毕业后从事嵌入式相关工作、平时也喜欢自己尝试一些Linux服务器相关的应用尝......
  • Hexo + GitHub Pages 搭建博客
    前言:HEXO是一个快速、简洁且高效的博客框架,GitHubPages是GitHub提供的一个网页寄存服务,可用于存放静态网页,包括博客、项目文档甚至整本书。前提:注册GitHub教......
  • 51单片机 音乐播放器
     原文:https://blog.csdn.net/x1131230123/article/details/107367470  main.c#include<reg52.h>#include<intrins.h>#include<stdlib.h>#include<stdio.h>#include......
  • 关于博客
    这是一个随笔2022年09月03日16:54:26以前写的一下博客,有的是摘抄其他大佬的博客,有的是当时学习时自己的一下感悟,当然,是有历史局限性的。所以有很多不对的地方。嗯。之前......
  • Python 博客园快速备份脚本
    鉴于有些小伙伴在寻找博客园迁移到个人博客的方案,本人针对博客园实现了一个自动备份脚本,可以快速将博客园中自己的文章备份成Markdown格式的独立文件,备份后的md文件可以直......