音乐播放器上线！

添加一个音乐播放器

一、背景

网站虽然回来了，但总是感觉缺点什么，灵光一现，明白了，是音乐！

参考网站：

1. APlayer 官网
2. 立项参考博客
3. 获取音乐外链
4. 下载音乐地址（推荐）

好,让我们进入正式的搭建步骤：

二、环境信息

PS：关于 solo 的搭建我后面会单独写一篇文章来介绍

三、添加代码

把如下代码添加到公告部分：

代码部分

<div id="aplayer"></div>
<script>
        var ap = new APlayer
                ({
                    element: document.getElementById('aplayer'),
                    narrow: false,
                    autoplay: true,
                    showlrc: true,
                    music: {
                            title: '歌曲标题',
                            author: '歌手',
                            url: '音乐URL',
                            pic: '首图'
                            }
                });
        ap.init();
    </script>

1. 歌曲标题：自定义
2. 歌手：自定义
3. 音乐 URL：从上面的音乐外链网站中获取
4. 首图：也可以从上面的外链网站中获取

四、添加滚动的歌词

代码如下：

<div id="aplayer">
<pre class="aplayer-lrc-content">
[00:15.44]女：雨上がりの虹も
[00:20.71]凛と咲いた花も
[00:23.81]色づき溢れ出す
[00:29.22]男：茜色の空 仰ぐ君に
[00:35.26]あの日 恋に落ちた
[00:40.80]女：瞬間のドラマチック
[00:44.36]フィルムの中の1コマも
[00:47.11]合：消えないよ 心に刻むから
[00:56.21]君だよ 君なんだよ
[00:59.01]教えてくれた
[01:02.07]暗闇も光るなら
[01:05.02]星空になる
[01:08.12]悲しみを笑顔に
[01:10.92]もう隠さないで
[01:14.08]煌めくどんな星も
[01:17.03]君を照らすから
[01:20.93]女：眠りも忘れて
[01:25.33]迎えた朝日が
[01:28.34]やたらと突き刺さる
[01:34.34]低気圧運ぶ 頭痛だって
[01:39.50]忘れる 君に会えば
[01:45.61]男：静寂はロマンティック
[01:48.35]女：紅茶に溶けた
[01:50.06]シュガーのように
[01:51.62]合：全身に巡るよ 君の声
[02:00.64]君だよ 君なんだよ
[02:03.49]笑顔をくれた
[02:06.59]涙も光るなら
[02:09.55]流星になる
[02:12.50]傷付いたその手を
[02:15.40]もう離さないで
[02:18.55]願いを込めた空に
[02:21.40]明日が来るから
[02:25.82]女：導いてくれた
[02:29.12]光は 君だよ
[02:32.12]つられて僕も
[02:34.71]走り出した
[02:36.64]男：知らぬ間に
[02:40.39]クロスし始めた
[02:43.25]合：ほら 今だ
[02:45.05]ここで 光るなら
[02:50.05]女：君だよ 君なんだよ
[02:53.05]教えてくれた
[02:56.01]暗闇は終わるから
[03:01.24]合：君だよ 君なんだよ
[03:04.99]教えてくれた
[03:08.15]暗闇も光るなら
[03:11.05]星空になる
[03:14.12]悲しみを笑顔に
[03:16.92]もう隠さないで
[03:20.13]煌めくどんな星も
[03:22.99]君を照らすから
[03:26.81]女：答えはいつでも
[03:30.61]偶然？必然？
[03:32.96]いつか選んだ道こそ
[03:36.53]運命になる
[03:39.34]合：握りしめた
[03:41.74]その希望も不安も
[03:44.94]きっと2人を動かす
[03:48.49]光になるから
          </pre>
		       </div>
<script>
        var ap = new APlayer
                ({
                    element: document.getElementById('aplayer'),
                    narrow: false,
                    autoplay: true,
                    showlrc: true,
                    music: {
                            title: '光るなら',
                            author: '小陈',
                            url: 'https://sharefs.ali.kugou.com/202111122030/05b08fe24144e4d4614f323c5c9c981a/KGTX/CLTX001/cf5839267a726c77939f6b8e3121b4bd.mp3',
                            pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fy.gtimg.cn%2Fmusic%2Fphoto_new%2FT002R300x300M000001Q6NhI3HQYYq_1.jpg%3Fmax_age%3D2592000&refer=http%3A%2F%2Fy.gtimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg'
                            }
                });
        ap.init();
    </script>

然后刷新我们的主页，播放音乐就可以看到歌词了！

五、添加播放列表

上代码

<div id="aplayer"></div>
<script>
        var ap = new APlayer
                ({
                    element: document.getElementById('aplayer'),
                    narrow: false,
                    autoplay: true,
                    showlrc: false,
					listFolded: false,
					listMaxHeight: 90,
                    music:[{
                            title: '光るなら',
                            author: '小陈',
                            url: 'https://sharefs.ali.kugou.com/202111122030/05b08fe24144e4d4614f323c5c9c981a/KGTX/CLTX001/cf5839267a726c77939f6b8e3121b4bd.mp3',
                            pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fy.gtimg.cn%2Fmusic%2Fphoto_new%2FT002R300x300M000001Q6NhI3HQYYq_1.jpg%3Fmax_age%3D2592000&refer=http%3A%2F%2Fy.gtimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg'
                            },
							{
                            title: '前前前世',
                            author: 'RADWIMPS',
                            url: 'https://sharefs.ali.kugou.com/202111122105/1f7c7e59f4a5b912cdb75dce595deb38/G121/M05/14/19/GYcBAFpazbKAMqxSAEa3vW8C6dg830.mp3',
                            pic: 'https://imgessl.kugou.com/uploadpic/softhead/400/20210927/20210927152851514.jpg'
                            }]
                });
        ap.init();
    </script>

这样我们的播放器就变成了列表形式，如下：

六、注意点

1. 注意检查符号
2. 开启列表后疑似不能开启歌词模式（有待确定）

七、结束语

今天的博客就写到这里~欢迎大家在评论区踊跃发言 =_=