北斗六星网

标题: 用 Aplayer 制作带歌词的播放器 [打印本页]
作者: 我来自他乡    时间: 2025-6-6 10:46
标题: 用 Aplayer 制作带歌词的播放器
本帖最后由 我来自他乡 于 2025-6-6 21:25 编辑


单曲播放器代码

1、首先下载下边的“jQuery歌词同步MP3播放器代码”。

[attach]894721[/attach]

播放器完整代码：

  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>jQuery歌词同步MP3播放器代码</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link href="https://file.uhsea.com/2411/fa4ddb4f0469adaaf3236e09a0ca54b52U.css" rel="stylesheet">
  7. </head>
  8. <body>
  9. <div id="main">
  10. <div class="container">
  11. <div id="player" class="aplayer">
  12. <pre class="aplayer-lrc-content">
  13. [00:00.00]<marquee scrolldelay=150 width=300px onmouseover="this.stop()" onmouseout="this.start()"><font color=#4a76c8>儿时</font></marquee>
  14. [00:06.25]作词：唐映枫
  15. [00:10.09]作曲：刘昊霖
  16. [00:15.19]演唱：向晚
  17. [00:21.27]铁道旁赤脚追晚霞
  18. [00:25.81]玻璃珠铁盒英雄卡
  19. [00:30.22]玩皮筋迷藏石桥下
  20. [00:34.70]姥姥又纳鞋坐院坝
  21. [00:39.32]铁门前篮框银杏花
  22. [00:43.79]茅草屋可有住人家
  23. [00:48.30]放学路打闹嘻嘻哈
  24. [00:52.86]田埂间流水哗啦啦
  25. [00:57.58]我们就一天天长大
  26. [01:02.30]甜梦中大白兔黏牙
  27. [01:06.72]也幻想神仙科学家
  28. [01:11.07]白墙上泥渍简笔画
  29. [01:15.64]我们就一天天长大
  30. [01:20.06]四季过老梧桐发芽
  31. [01:24.91]沙堆里有宝藏和塔
  32. [01:29.29]长板凳搭起一个家
  33. [01:52.02]日子总慢得不像话
  34. [01:56.20]叶落满池塘搬新家
  35. [02:00.73]二十寸彩电皮沙发
  36. [02:05.30]五点半大风车动画
  37. [02:09.88]晚饭后纳凉星夜下
  38. [02:14.33]萤火虫微风弯月牙
  39. [02:18.86]大人聊听不懂的话
  40. [02:23.43]鬼怪都躲在床底下
  41. [02:28.14]我们就一天天长大
  42. [02:32.34]记忆里有雨不停下
  43. [02:36.99]蝉鸣中闷完了暑假
  44. [02:41.52]新学年又该剪头发
  45. [02:46.15]我们就一天天长大
  46. [02:50.57]也开始憧憬和变化
  47. [02:55.14]曾以为自己多伟大
  48. [02:59.59]写了诗不敢递给她
  49. [03:04.39]我们就一天天长大
  50. [03:08.69]听磁带偶遇榕树下
  51. [03:13.21]白衬衫黄昏木吉他
  52. [03:17.62]年少不经事的脸颊
  53. [03:22.49]还以为自己多伟大
  54. [03:26.90]写了诗不敢递给她
  55. [03:31.58]还以为自己多伟大
  56. [03:35.87]小小诗不敢递给她
  57. [03:42.09]☆谢谢欣赏☆
  58. </pre>
  59. </div>
  60. </div>
  61. </div>
  62. <script src="https://file.uhsea.com/2407/31d139e39a4fee3cc4ceca19223eb7200M.js"></script>
  63. <script type="text/javascript">var jQuery=jQuery.noConflict();</script>
  64. <script>
  65. var ap = new APlayer({
  66. element: document.getElementById('player'),
  67. narrow: false,
  68. autoplay: false,
  69. showlrc: true,
  70. music: {
  71. title: "儿时",
  72. author: "向晚",
  73. url: 'https://file.uhsea.com/2506/5974d0b8006db41cfb27b550fad0b41aDL.m4a',
  74. pic: 'https://file.uhsea.com/2506/e3e221f6ec6f6f47258fca803c0d0b43R0.jpg',
  75. },
  76. });
  77. ap.init();
  78. </script>
  79. <script type='text/javascript'>
  80. document.oncontextmenu=ContextMenu;
  81. function ContextMenu()
  82. {
  83. return false;
  84. }
  85. </script>
  86. </body>
  87. </html>
复制代码

2、解压后右键用记事本打开，如下图：

[attach]894722[/attach]


3、跟着下图修改里面的6个项目：

[attach]894723[/attach]


4、修改完成后上传到直链网站，拿到直链地址（我一般都是用这个直链 https://uhsea.com，因为这个直链很方便，很多东西都可以上传，而且还不需要注册）。


5、然后把直链地址添加到下边的代码中，这样就可以在发帖时添加下边的完整代码了。


<iframe height="180" max-width="40em" width="100%" marginheight="0"&nbsp;&nbsp;style="music:none;border-radius:10px;box-shadow: 0 0 10px 0px rgba(0,0,0,.16);" src="这里添加直链地址" frameborder="0" width="670" marginwidth="0" scrolling="no"></iframe>



*贴士

给个可以在线制作滚动歌词的网站，也可以下载到自己的电脑或笔记本上使用。

链接：https://www.yuanchuangyinyue.com/3027.html

图片：

[attach]894726[/attach]


单首歌曲播放器示例：





多首歌曲合并的播放器代码

[attach]894783[/attach]

解压打开后如图所示:

[attach]894784[/attach]

替换红框里的：
1、title=歌曲名称
2、author=歌手
3、url=音乐地址
4、pic=图片地址
5、Irc=滚动歌词地址

播放器完整代码：

  1. <link href="https://file.uhsea.com/2506/d24d286f5291f6a41034bde761417e27FR.css" rel="stylesheet">
  2. <div id='aplayer'></div>
  3. <script src="https://file.uhsea.com/2506/5e049d2ac218c3baf141f583ed8b3d326D.js"></script>
  4. <script >
  5. var ap = new APlayer
  6. ({
  7. element: document.getElementById('aplayer'),
  8. mini: false,
  9. autoplay: true,
  10. theme: '#FADFA3',
  11. loop: 'all',
  12. order: 'random',
  13. preload: 'auto',
  14. volume: 0.7,
  15. mutex: true,
  16. listFolded: false,
  17. listMaxHeight: '490px',
  18. lrcType: 3,
  19. audio: [
  20. {
  21. title: "人间是个好地方 ",
  22. author: "六星八人合唱",
  23. url: 'https://file.uhsea.com/2506/d2c3d5522bc19d0f7cbdfbaaf8e499ccQK.m4a',
  24. pic: 'https://file.uhsea.com/2506/5df7a6c0905ba6baa2cd9c0da5510e1fVD.jpg',
  25. lrc: 'https://file.uhsea.com/2506/827ff9a303efcf2a06ebc75f97f8ae7eLA.lrc',
  26. },
  27. {
  28. title: "儿时",
  29. author: "向晚",
  30. url: 'https://file.uhsea.com/2506/5974d0b8006db41cfb27b550fad0b41aDL.m4a',
  31. pic: 'https://file.uhsea.com/2506/e3e221f6ec6f6f47258fca803c0d0b43R0.jpg',
  32. lrc: 'https://file.uhsea.com/2506/9d7fba6fd9726e05fcd2b07a5b28faf37I.lrc',
  33. },
  34. {
  35. title: "半壶纱",
  36. author: "向晚",
  37. url: 'https://file.uhsea.com/2506/bf0d34256951a9c21f745efe48377911ZX.m4a',
  38. pic: 'https://file.uhsea.com/2506/f8413c58426ce13b3de58c9ba50990f4Z7.jpg',
  39. lrc: 'https://file.uhsea.com/2506/f8816c80077cdd6b7f995774f8e889edZZ.lrc',
  40. }
  41. ]
  42. });
  43. ap.init();
  44. </script>
复制代码


发帖使用的代码：

  1. <iframe height="450" max-width="40em" width="99%" marginheight="0"&nbsp;&nbsp;style="music:none;" src="这里输入直链html文件地址" frameborder="0" width="560" marginwidth="0" scrolling="no"></iframe>
复制代码


多首歌曲播放器示例：



补充内容 (2025-6-7 13:35): [b1]APlayer参数[/b1]
名称默认值 描述
container document.querySelector('.aplayer')播放器容器元素
fixed false 开启吸底模式
mini false 开启迷你模式
autoplayfalse 音频自动播放
theme'#b7daff' 主题色
loop'all' 音频循环播放, 可选值: 'all', 'one', 'none'
order'list' 音频循环顺序, 可选值: 'list', 'random'
preload'auto' 预加载，可选值: 'none', 'metadata', 'auto'
volume0.7 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
audio- 音频信息, 应该是一个对象或对象数组
audio.name- 音频名称
audio.artist- 音频艺术家
audio.url -音频链接
audio.cover-音频封面
audio.lrc - 歌词
audio.theme - 切换到此音频时的主题色，比上面的 theme 优先级高
audio.type 'auto' 可选值: 'auto', 'hls', 'normal' 或其他自定义类型
customAudioType - 自定义类型
mutex true 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
lrcType 0 可选值: 1,2,3
listFolded false 列表默认折叠
listMaxHeight '90px' 列表最大高度
storageName 'aplayer-setting' 存储播放器设置的 localStorage key
作者: 马叶的小屋    时间: 2025-6-6 10:59
试了一下哪个“屋舍”网，以游客身份貌似可以传入文件，获得一个MP3后缀链接，但是测试把它用在论坛mp3播放器中，还是无法播放。
作者: 马叶的小屋    时间: 2025-6-6 11:00
我想可能屋舍的文件，得搭配主楼播放器才能实现播放。
作者: 马叶的小屋    时间: 2025-6-6 11:03
哈哈，用他乡先生的第5部分的代码，配合屋舍传入的MP3歌曲，已经测试，我这里可以实现播放呢！！
作者: 我来自他乡    时间: 2025-6-6 11:04
马叶的小屋 发表于 2025-6-6 10:59
试了一下哪个“屋舍”网，以游客身份貌似可以传入文件，获得一个MP3后缀链接，但是测试把它用在论坛mp3播放 ...


这个屋舍的链接在很多论坛都可以播放，你不妨再试试。
作者: 依水闲云    时间: 2025-6-6 11:15
@向晚 进来学着试试看
作者: 马叶的小屋    时间: 2025-6-6 11:25
我来自他乡 发表于 2025-6-6 11:04
这个屋舍的链接在很多论坛都可以播放，你不妨再试试。

简单测试了了一下，至少我自己这里使用先生的代码加屋舍外链MP3，是可以播放收听。

试将一首8人合唱的放在了8人合唱帖子的2楼，看看大家能不能收听。

作者: 马叶的小屋    时间: 2025-6-6 11:26
我来自他乡 发表于 2025-6-6 11:04
这个屋舍的链接在很多论坛都可以播放，你不妨再试试。

感谢他乡先生的教学！！
作者: 依水闲云    时间: 2025-6-6 11:42
马叶的小屋 发表于 2025-6-6 11:25
简单测试了了一下，至少我自己这里使用先生的代码加屋舍外链MP3，是可以播放收听。

试将一首8人合唱的 ...

我去听了，可以听，但是怎么没有歌词呢？
作者: 马叶的小屋    时间: 2025-6-6 11:45
依水闲云 发表于 2025-6-6 11:42
我去听了，可以听，但是怎么没有歌词呢？

我只是简单使用他乡先生的代码和传入歌曲，没有下载精美的歌词制作播放器，所以没有精美歌词。
作者: 依水闲云    时间: 2025-6-6 11:47
马叶的小屋 发表于 2025-6-6 11:45
我只是简单使用他乡先生的代码和传入歌曲，没有下载精美的歌词制作播放器，所以没有精美歌词。

也就是说你学会了哦
作者: 马叶的小屋    时间: 2025-6-6 11:49
依水闲云 发表于 2025-6-6 11:47
也就是说你学会了哦

对于我来说，学了一个代码播放器，和知道了一个能外链歌曲的网站。

这可是莫大开心呢！！！

得感谢他乡先生的教学和提供的信息！！
作者: 马叶的小屋    时间: 2025-6-6 11:51
依水闲云 发表于 2025-6-6 11:47
也就是说你学会了哦

下次我再发歌啥的，就试试从他乡先生这里学到的播放器和外链。
作者: 我来自他乡    时间: 2025-6-6 11:54
马叶的小屋 发表于 2025-6-6 11:45
我只是简单使用他乡先生的代码和传入歌曲，没有下载精美的歌词制作播放器，所以没有精美歌词。

我帮你弄一个，现在去跟帖
作者: 我来自他乡    时间: 2025-6-6 11:56
依水闲云 发表于 2025-6-6 11:42
我去听了，可以听，但是怎么没有歌词呢？

现在有了，你去看，我刚跟帖。
作者: 马叶的小屋    时间: 2025-6-6 11:56
我来自他乡 发表于 2025-6-6 11:54
我帮你弄一个，现在去跟帖

感谢他乡先生！！

虽然我还是懒了，木有下载歌词制作器，但是学到了不少好东西呢！开心！
作者: 马叶的小屋    时间: 2025-6-6 11:58
屋舍网，看起来是个好地方呢！！不用注册都可以传入和外链，太好了！！
作者: 依水闲云    时间: 2025-6-6 12:01
我来自他乡 发表于 2025-6-6 11:56
现在有了，你去看，我刚跟帖。

好的，我再去看
作者: 诗意天涯    时间: 2025-6-6 12:49
又来高手了
作者: 诗意天涯    时间: 2025-6-6 12:50
貌似挺麻烦，1和3都是歌名？
作者: 马叶的小屋    时间: 2025-6-6 12:53
诗意天涯 发表于 2025-6-6 12:50
貌似挺麻烦，1和3都是歌名？

学不会吧？

承认是笨瓜了吧？

当然，我也木有学会歌词制作的部分。
作者: 诗意天涯    时间: 2025-6-6 13:04
马叶的小屋 发表于 2025-6-6 12:53
学不会吧？

承认是笨瓜了吧？

切，贪多嚼不烂

下午我出个远门喝喜酒，明晚才能回，希望你这一天学会哈，可别我回来一学就会显得你太笨
作者: 我来自他乡    时间: 2025-6-6 13:06
诗意天涯 发表于 2025-6-6 12:50
貌似挺麻烦，1和3都是歌名？

[attach]894767[/attach]

如果觉得麻烦可以把这个代码删除

  1. <marquee scrolldelay=150 width=300px onmouseover="this.stop()" onmouseout="this.start()"><font color=#4a76c8>儿时</font></marquee>
复制代码


修改后的代码就从这里开始

  1. [00:00.00]儿时
  2. [00:06.25]作词：唐映枫
  3. [00:10.09]作曲：刘昊霖
  4. [00:15.19]演唱：向晚
  5. [00:21.27]铁道旁赤脚追晚霞
复制代码



一般上LRC的滚动歌词都是从[00:00.00]开始的，所以这个[00:00.00]不一定是歌曲名称，也可以是从作词或从第一句歌词开始。

作者: 马叶的小屋    时间: 2025-6-6 13:10
诗意天涯 发表于 2025-6-6 13:04
切，贪多嚼不烂

下午我出个远门喝喜酒，明晚才能回，希望你这一天学会哈，可别我回来一学就会显得你太 ...

我特感觉屋舍网和乡兄的代码播放器好，这一搭配，就能实现论坛播放，而且屋舍网上传文件还方便快捷！

开心S了！
作者: 诗意天涯    时间: 2025-6-6 13:34
马叶的小屋 发表于 2025-6-6 13:10
我特感觉屋舍网和乡兄的代码播放器好，这一搭配，就能实现论坛播放，而且屋舍网上传文件还方便快捷！

...

那你看能不能把那个合唱用这个法子改改，原来的好像有人打不开
作者: 向晚    时间: 2025-6-6 15:56
报告大神，我解压之后就只有一个快捷方式了，没有那个文件。

要不你把那个代码直接贴这里一下，我保存下来哦。
作者: 我来自他乡    时间: 2025-6-6 16:07
向晚 发表于 2025-6-6 15:56
报告大神，我解压之后就只有一个快捷方式了，没有那个文件。

要不你把那个代码直接贴这里一下，我保存下 ...

  1. <html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>jQuery歌词同步MP3播放器代码</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link href="https://file.uhsea.com/2411/fa4ddb4f0469adaaf3236e09a0ca54b52U.css" rel="stylesheet">
  7. </head>
  8. <body>
  9. <div id="main">
  10.                 <div class="container">
  11.         <div id="player" class="aplayer">
  12.         <pre class="aplayer-lrc-content">
  13. [00:00.00]<marquee scrolldelay=150 width=300px onmouseover="this.stop()" onmouseout="this.start()"><font color=#4a76c8>儿时</font></marquee>
  14. [00:06.25]作词：唐映枫
  15. [00:10.09]作曲：刘昊霖
  16. [00:15.19]演唱：向晚
  17. [00:21.27]铁道旁赤脚追晚霞
  18. [00:25.81]玻璃珠铁盒英雄卡
  19. [00:30.22]玩皮筋迷藏石桥下
  20. [00:34.70]姥姥又纳鞋坐院坝
  21. [00:39.32]铁门前篮框银杏花
  22. [00:43.79]茅草屋可有住人家
  23. [00:48.30]放学路打闹嘻嘻哈
  24. [00:52.86]田埂间流水哗啦啦
  25. [00:57.58]我们就一天天长大
  26. [01:02.30]甜梦中大白兔黏牙
  27. [01:06.72]也幻想神仙科学家
  28. [01:11.07]白墙上泥渍简笔画
  29. [01:15.64]我们就一天天长大
  30. [01:20.06]四季过老梧桐发芽
  31. [01:24.91]沙堆里有宝藏和塔
  32. [01:29.29]长板凳搭起一个家
  33. [01:52.02]日子总慢得不像话
  34. [01:56.20]叶落满池塘搬新家
  35. [02:00.73]二十寸彩电皮沙发
  36. [02:05.30]五点半大风车动画
  37. [02:09.88]晚饭后纳凉星夜下
  38. [02:14.33]萤火虫微风弯月牙
  39. [02:18.86]大人聊听不懂的话
  40. [02:23.43]鬼怪都躲在床底下
  41. [02:28.14]我们就一天天长大
  42. [02:32.34]记忆里有雨不停下
  43. [02:36.99]蝉鸣中闷完了暑假
  44. [02:41.52]新学年又该剪头发
  45. [02:46.15]我们就一天天长大
  46. [02:50.57]也开始憧憬和变化
  47. [02:55.14]曾以为自己多伟大
  48. [02:59.59]写了诗不敢递给她
  49. [03:04.39]我们就一天天长大
  50. [03:08.69]听磁带偶遇榕树下
  51. [03:13.21]白衬衫黄昏木吉他
  52. [03:17.62]年少不经事的脸颊
  53. [03:22.49]还以为自己多伟大
  54. [03:26.90]写了诗不敢递给她
  55. [03:31.58]还以为自己多伟大
  56. [03:35.87]小小诗不敢递给她
  57. [03:42.09]☆谢谢欣赏☆
  58.             </pre>
  59.         </div>
  60.         </div>
  61. </div>
  62. <script src="https://file.uhsea.com/2407/31d139e39a4fee3cc4ceca19223eb7200M.js"></script>
  63. <script type="text/javascript">var jQuery=jQuery.noConflict();</script>
  64. <script>
  65.         var ap = new APlayer({
  66.                 element: document.getElementById('player'),
  67.                 narrow: false,
  68.                 autoplay: false,
  69.                 showlrc: true,
  70.                 music: {
  71.                         title: "儿时",
  72.                         author: "向晚",
  73.                         url: 'https://file.uhsea.com/2506/5974d0b8006db41cfb27b550fad0b41aDL.m4a',
  74.                         pic: 'https://file.uhsea.com/2506/e3e221f6ec6f6f47258fca803c0d0b43R0.jpg',
  75.                 },
  76.         });
  77.         ap.init();
  78. </script>
  79. <script type='text/javascript'>
  80.     document.oncontextmenu=ContextMenu;
  81.     function ContextMenu()  
  82.     {  
  83.       return false;  
  84.     }
  85. </script>
  86. </body>
  87. </html>
复制代码
作者: 向晚    时间: 2025-6-6 16:41
我来自他乡 发表于 2025-6-6 16:07

谢谢，我这就去折腾，弄好了给你交作业。
作者: 马叶的小屋    时间: 2025-6-6 17:23
诗意天涯 发表于 2025-6-6 13:34
那你看能不能把那个合唱用这个法子改改，原来的好像有人打不开

哪个合唱？版歌？
作者: 马叶的小屋    时间: 2025-6-6 17:24
向晚 发表于 2025-6-6 16:41
谢谢，我这就去折腾，弄好了给你交作业。

虚心的向晚，遇上耐心的乡兄，肯定能学会会！
作者: 向晚    时间: 2025-6-6 18:20
本帖最后由 向晚 于 2025-6-6 18:42 编辑

作者: 向晚    时间: 2025-6-6 18:40
会弄了哦
作者: 依水闲云    时间: 2025-6-6 19:00
向晚 发表于 2025-6-6 18:40
会弄了哦

晚儿好聪明，让小马哥看看，晚儿做的多漂亮
作者: 向晚    时间: 2025-6-6 19:15
本帖最后由 向晚 于 2025-6-6 19:29 编辑

作者: 依水闲云    时间: 2025-6-6 20:10
向晚 发表于 2025-6-6 19:15
本帖最后由 向晚 于 2025-6-6 19:29 编辑

刚刚打开电脑看了一下，这个播放器比手机上更漂亮啊
作者: 马叶的小屋    时间: 2025-6-6 21:07
依水闲云 发表于 2025-6-6 19:00
晚儿好聪明，让小马哥看看，晚儿做的多漂亮

乖乖了不得，才这么短时间就学做出来了，向晚真勤奋！

乡兄的这个漂漂亮播放器，可叫向晚开心极了！！
作者: 我来自他乡    时间: 2025-6-6 23:02
向晚 发表于 2025-6-6 18:20
本帖最后由 向晚 于 2025-6-6 18:42 编辑


已经添加到歌单里了
作者: 薛痒    时间: 2025-6-6 23:14
欢迎热心、热情分享的新朋友，播放器看上去颇为新颖，选择又多了
作者: 我来自他乡    时间: 2025-6-6 23:27
薛痒 发表于 2025-6-6 23:14
欢迎热心、热情分享的新朋友，播放器看上去颇为新颖，选择又多了


感谢支持
作者: 诗意天涯    时间: 2025-6-7 00:25
马叶的小屋 发表于 2025-6-6 17:23
哪个合唱？版歌？

就你组织的合唱啊
作者: 马叶的小屋    时间: 2025-6-7 10:18
诗意天涯 发表于 2025-6-7 00:25
就你组织的合唱啊

2搂我已经加了的就是新学的这个外链播放。只是我木有学歌词制作部分。




欢迎光临 北斗六星网 (http://154.85.43.82/) Powered by Discuz! X3.1