用 Aplayer 制作带歌词的播放器 [复制链接]

我来自他乡

主楼

发表于 2025-6-6 10:46 |只看该作者 |倒序浏览 |

本帖最后由我来自他乡于 2025-6-6 21:25 编辑

单曲播放器代码

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

播放器完整代码：

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

复制代码

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

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

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

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

<iframe height="180" max-width="40em" width="100%" marginheight="0"  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

图片：

单首歌曲播放器示例：

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

解压打开后如图所示:

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

播放器完整代码：

<link href="https://file.uhsea.com/2506/d24d286f5291f6a41034bde761417e27FR.css" rel="stylesheet">
<div id='aplayer'></div>
<script src="https://file.uhsea.com/2506/5e049d2ac218c3baf141f583ed8b3d326D.js"></script>
<script >
var ap = new APlayer
({
element: document.getElementById('aplayer'),
mini: false,
autoplay: true,
theme: '#FADFA3',
loop: 'all',
order: 'random',
preload: 'auto',
volume: 0.7,
mutex: true,
listFolded: false,
listMaxHeight: '490px',
lrcType: 3,
audio: [
{
title: "人间是个好地方 ",
author: "六星八人合唱",
url: 'https://file.uhsea.com/2506/d2c3d5522bc19d0f7cbdfbaaf8e499ccQK.m4a',
pic: 'https://file.uhsea.com/2506/5df7a6c0905ba6baa2cd9c0da5510e1fVD.jpg',
lrc: 'https://file.uhsea.com/2506/827ff9a303efcf2a06ebc75f97f8ae7eLA.lrc',
},
{
title: "儿时",
author: "向晚",
url: 'https://file.uhsea.com/2506/5974d0b8006db41cfb27b550fad0b41aDL.m4a',
pic: 'https://file.uhsea.com/2506/e3e221f6ec6f6f47258fca803c0d0b43R0.jpg',
lrc: 'https://file.uhsea.com/2506/9d7fba6fd9726e05fcd2b07a5b28faf37I.lrc',
},
{
title: "半壶纱",
author: "向晚",
url: 'https://file.uhsea.com/2506/bf0d34256951a9c21f745efe48377911ZX.m4a',
pic: 'https://file.uhsea.com/2506/f8413c58426ce13b3de58c9ba50990f4Z7.jpg',
lrc: 'https://file.uhsea.com/2506/f8816c80077cdd6b7f995774f8e889edZZ.lrc',
}
]
});
ap.init();
</script>

复制代码

发帖使用的代码：

<iframe height="450" max-width="40em" width="99%" marginheight="0"  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	开启迷你模式
autoplay	false	音频自动播放
theme	'#b7daff'	主题色
loop	'all'	音频循环播放, 可选值: 'all', 'one', 'none'
order	'list'	音频循环顺序, 可选值: 'list', 'random'
preload	'auto'	预加载，可选值: 'none', 'metadata', 'auto'
volume	0.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

附件: 您需要登录才可以下载或查看，没有帐号？立即注册 

2 查看全部评分

本主题由依水闲云于 2025-6-6 20:30 置顶

分享到: QQ好友和群 QQ空间 腾讯微博 腾讯朋友

新浪微博人人网豆瓣更多...

帐号		自动登录	找回密码
密码			立即注册