音乐播放器上线!

本贴最后更新于 1248 天前,其中的信息可能已经渤澥桑田

添加一个音乐播放器

一、背景

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

参考网站:

  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 更新了该帖

相关帖子

欢迎来到这里!

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

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