2023 8 1（左下角音乐播放器的实现）

       最近两天闲着无聊，就把博客园的页面样式丰富了一下，当然，大部分代码都是借鉴的网上。那个左下角的音乐播放器，我看网上大多是在网易云音乐生成外链来实现播放，但网易云里只有一部分歌可以生成外链，限制很大。我又去网上找了歌曲的mp3链接放上去，但过一段时间就播放不了了。由于这个音乐播放是通过访问服务器上的mp3歌曲文件来实现的，我最后想的是能不能直接把歌曲的mp3文件放在github仓库里面，然后通过访问github仓库中的mp3文件来实现播放。最终证明是可以的。页脚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">
var ap = new APlayer({
    element: document.getElementById('player'),
    narrow: false,
    loop: 'all',<!-- 全部循环 -->
    order: 'random',
    volume: 0.4,<!-- 播放音量 -->
    autoplay: true,          <!-- 是否自动播放 -->
    showlrc: true, <!--是否开启歌词功能 ，默认false（为true时musics集合中需要传入lrc字段。）-->
    fixed:1,<!-- 是否固定在左下角不动， 1即为true -->
    theme: '#F5F5F5',      <!-- 插件背景颜色，建议和你的公告栏背景色一样，这样融为一体的感觉 -->
    music: [
        {
            title: '半岛铁盒',
            author: '周杰伦',
            url: 'https://cdn.jsdelivr.net/gh/zykzykzykzyk/Static@latest/%E5%8D%8A%E5%B2%9B%E9%93%81%E7%9B%92.mp3',
            pic: 'http://p2.music.126.net/eDfuSni9ZWToHdqilVRI_w==/109951166698447900.jpg?param=300x300',
            lrc: '[00:00.0]半岛铁盒 - 周杰伦 [00:02.54]词：周杰伦[00:04.42]曲：周杰伦[00:07.17]编曲：林迈可[00:17.19]走廊灯关上书包放[00:19.51]走到房间窗外望[00:21.32]回想刚买的书[00:23.02]一本名叫半岛铁盒[00:24.92]放在床边堆好多[00:26.74]第一页第六页第七页序[00:28.84]我永远都想不到[00:30.4]陪我看这书的你会要走[00:32.56]不再是不再有[00:34.3]现在已经看不到[00:36.08]铁盒的钥匙孔[00:37.7]透了光看见它锈了好久[00:39.88]好旧好旧[00:40.97]外围的灰尘包围了我[00:43.56]好暗好暗[00:44.63]铁盒的钥匙我找不到[00:47.49]放在糖果旁的[00:50.03]是我很想回忆的甜[00:54.79]然而过滤了你和我[00:57.98]沦落而成美[01:02.23]沉在盒子里的是你[01:05.44]给我的快乐[01:09.61]我很想记得可是我记不得[01:15.39]为什么这样子[01:18.78]你拉着我说你有些犹豫[01:22.85]怎么这样子[01:26.19]雨还没停你就撑伞要走[01:30.15]已经习惯不去阻止你[01:34.0]过好一阵子你就会回来[01:38.270004]印象中的爱情[01:40.94]好像顶不住那时间[01:44.67]为什么这样子[01:48.31]你看着我说你已经决定[01:52.39]我拉不住你[01:55.55]他的手应该比我更暖[01:59.86]铁盒的序变成了日记[02:03.59]变成了空气演化成回忆[02:07.82]印象中的爱情[02:10.44]好像顶不住那时间[02:14.24]所以你弃权[02:30.13]走廊灯关上书包放[02:32.45999]走到房间窗外望[02:34.28]回想刚买的书[02:35.88]一本名叫半岛铁盒[02:38.07]放在床边堆好多[02:39.73]第一页第六页第七页序[02:41.70999]我永远都想不到[02:43.28]陪我看这书的你会要走[02:45.51]不再是不再有[02:47.14]现在已经看不到[02:49.07]铁盒的钥匙孔透了光[02:51.23]看见它锈了好久[02:52.8]好旧好旧[02:53.88]外围的灰尘包围了我[02:56.44]好暗好暗[02:57.58]铁盒的钥匙我找不到[03:00.35]放在糖果旁的[03:02.86]是我很想回忆的甜[03:07.67]然而过滤了你和我[03:10.91]沦落而成美[03:15.07]沉在盒子里的是你[03:18.27]给我的快乐[03:22.52]我很想记得可是我记不得[03:28.31]为什么这样子[03:31.8]你拉着我说你有些犹豫[03:35.81]怎么这样子[03:39.26]雨还没停你就撑伞要走[03:43.20999]已经习惯不去阻止你[03:46.89]过好一阵子你就会回来[03:51.2]印象中的爱情[03:53.84]好像顶不住那时间[03:57.95999]为什么这样子[04:01.28]你拉着我说你有些犹豫[04:05.35]怎么这样子[04:08.62]雨还没停你就撑伞要走[04:12.77]已经习惯不去阻止你[04:16.42]过好一阵子你就会回来[04:20.78]印象中的爱情[04:23.32]好像顶不住那时间[04:27.13]为什么这样子[04:30.83]你看着我说你已经决定[04:34.98]我拉不住你[04:38.14]他的手应该比我更暖[04:42.47]的序变成了日记[04:46.03]变成了空气演化成回忆[04:50.51]印象中的爱情[04:53.01]好像顶不住那时间[04:57.28]所以你弃权'
        },
       
        {
            title: '暗号',
            author: '周杰伦',
            url: 'https://cdn.jsdelivr.net/gh/zykzykzykzyk/Static@latest/%E6%9A%97%E5%8F%B7.mp3',
            pic: 'http://p2.music.126.net/eDfuSni9ZWToHdqilVRI_w==/109951166698447900.jpg?param=300x300',
            lrc: '[00:00.0]暗号-周杰伦[00:03.98]词：许世昌[00:07.96]曲：周杰伦[00:11.94]编曲：林迈可[00:15.93]我想要的想做的你比谁都了[00:19.83]你想说的想给的我全都知道[00:23.58]未接来电没留言[00:25.71]一定是你孤单的想念[00:28.08]任何人都猜不到[00:30.03]这是我们的暗号[00:31.92]他们猜随便猜不重要[00:34.74]连上彼此的讯号才有个依靠[00:38.85]有太多人太多事[00:40.95]夹在我们之间咆哮[00:43.32]杂讯太多讯号弱[00:45.03]就连风吹都要干扰[00:47.22]可是你不想一直走在黑暗地下道[00:54.18]想吹风想自由想要一起手牵手[00:58.11]去看海绕世界流浪[01:02.34]我害怕你心碎没人帮你擦眼泪[01:09.99]别管那是非只要我们感觉对[01:17.58]我害怕你心碎没人帮你擦眼泪[01:25.2]别离开身边[01:28.53]拥有你我的世界才能完美[01:48.09]他们猜随便猜不重要[01:51.240005]连上彼此的讯号才有个依靠[01:55.05]有太多人太多事[01:57.119995]夹在我们之间咆哮[01:59.520004]杂讯太多讯号弱[02:01.2]就连风吹都要干扰[02:03.39]可是你不想一直走在黑暗地下道[02:10.41]想吹风想自由想要一起手牵手[02:14.28]去看海绕世界流浪[02:18.48]我害怕你心碎没人帮你擦眼泪[02:26.16]别管那是非只要我们感觉对[02:33.78]我害怕你心碎没人帮你擦眼泪[02:41.4]别离开身边[02:44.45999]拥有你我的世界才能完美[02:57.12]你说你想逃开松手[03:00.48]爱太累爱得不自由[03:04.53]因为我给不起最简单的承诺[03:10.74]你停止收讯号我开始搜寻不到[03:18.57]到底有谁知道是几点钟方向[03:23.13]你才会收到暗号[03:27.12]我害怕你心碎没人帮你擦眼泪[03:34.74]别管那是非只要我们感觉对[03:42.36]我害怕你心碎没人帮你擦眼泪[03:49.98]别离开身边[03:53.07]拥有你我的世界才能完美'
        },
        {
            title: '少女的祈祷',
            author: '杨千嬅',
            url: 'https://cdn.jsdelivr.net/gh/zykzykzykzyk/Static@latest/%E5%B0%91%E5%A5%B3%E7%9A%84%E7%A5%88%E7%A5%B7.mp3',
            pic: '//y.qq.com/music/photo_new/T002R300x300M000004HMlvp4QOaun_2.jpg?max_age=2592000',
            lrc: '[00:00.000] 作词 : 林夕[00:01.000] 作曲 : 陈辉阳[00:02.439]编曲 : 陈辉阳[00:04.264][00:07.908]沿途与他车厢中私奔般恋爱[00:12.194]再挤逼都不放开[00:16.141]祈求在路上没任何的阻碍[00:20.366]令愉快旅程变悲哀[00:24.870]连气两次绿灯都过渡了[00:28.237]与他再爱几公里[00:32.842]当这盏灯转红便会别离[00:36.251]凭运气决定我生死[00:39.774][00:40.164]祈求天地放过一双恋人[00:43.459]怕发生的永远别发生[00:47.930]从来未顺利遇上好景降临[00:52.174]如何能重拾信心[00:55.608]祈求天父做十分钟好人[00:59.105]赐我他的吻 如怜憫罪人[01:03.722]我爱主 同时亦爱一位世人[01:07.864]祈求沿途未变心 请给我护荫[01:14.655][01:27.284]为了他 不懂祷告都敢祷告[01:31.200]谁愿眷顾这种信徒[01:35.078]用两手遮掩双眼专心倾诉[01:39.007]宁愿答案 望不到[01:45.905]唯求与他车厢中可抵达未来[01:50.259]到车毁都不放开[01:54.029]无论路上历尽任何的伤害[01:58.332]任由我决定爱不爱[02:01.884][02:02.154]祈求天地放过一双恋人[02:05.383]怕发生的永远别发生[02:09.795]从来未顺利遇上好景降临[02:14.068]如何能重拾信心[02:17.625]祈求天父做十分钟好人[02:21.157]赐我他的吻 如怜憫罪人[02:25.460]我爱主 同时亦爱一位爱人[02:29.771]祈求沿途未变心 请给我护荫[02:37.256][02:37.492]为了他 不懂祷告都敢祷告[02:41.304]谁愿眷顾这种信徒[02:45.166]太爱他怎么想到这么恐怖[02:49.070]对绿灯 去哀求哭诉[02:55.857][02:56.460]然而天父并未体恤好人[02:59.701]到我睁开眼 无明灯指引[03:04.115]我爱主 为何任我身边爱人[03:08.418]离弃了我下了车 你怎可答允[03:16.112][03:26.315]监制 : 陈辉阳[03:28.239]OP : EMI Music Publishing Hong Kong. / Capital Artists Ltd.'
        }
    ]
});
ap.init();
</script>

 

歌曲的地址，如 https://cdn.jsdelivr.net/gh/zykzykzykzyk/Static@latest/%E5%8D%8A%E5%B2%9B%E9%93%81%E7%9B%92.mp3，我是使用了jsDelivr来加速访问github仓库里的mp3文件（这个很简单，百度一下就行）

这样就不受限制了，想加什么歌都可以。只需要把歌曲的mp3文件push到github仓库，再使用jsDelivr来加速访问github仓库里的mp3文件，把URL链接放到博客园的页脚html里就行。

由于歌曲文件我放在github仓库中，所以能否播放，与网络有关，随缘吧。

就到这里吧，反正也没人看