音乐播放器上线!

添加一个音乐播放器

一、背景

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

参考网站:

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

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

二、环境信息

image.png

solo 版本 docker 版本 语言
4.3.1 20.10.7 node.js

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

三、添加代码

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

image.png

代码部分

<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>

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

image.png

五、添加播放列表

上代码

<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>

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

image.png

六、注意点

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

七、结束语

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

2 操作
chenteng 在 2021-12-06 22:12:29 更新了该帖
chenteng 在 2021-11-13 17:57:27 更新了该帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...