北斗六星网 › 情感休闲 › 娱乐家园 › 用 Aplayer 制作带歌词的播放器

123 / 3 页下一页

返回列表

楼主: 我来自他乡

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

向晚

31楼

发表于 2025-6-6 18:20 |只看该作者

本帖最后由向晚于 2025-6-6 18:42 编辑

使用道具举报

向晚

32楼

发表于 2025-6-6 18:40 |只看该作者

会弄了哦

使用道具举报

依水闲云

33楼

发表于 2025-6-6 19:00 来自手机 |只看该作者

向晚发表于 2025-6-6 18:40
会弄了哦

晚儿好聪明，让小马哥看看，晚儿做的多漂亮

使用道具举报

向晚

34楼

发表于 2025-6-6 19:15 |只看该作者

本帖最后由向晚于 2025-6-6 19:29 编辑

使用道具举报

依水闲云

35楼

发表于 2025-6-6 20:10 |只看该作者

向晚发表于 2025-6-6 19:15
本帖最后由向晚于 2025-6-6 19:29 编辑

刚刚打开电脑看了一下，这个播放器比手机上更漂亮啊

使用道具举报

马叶的小屋

36楼

发表于 2025-6-6 21:07 |只看该作者

依水闲云发表于 2025-6-6 19:00
晚儿好聪明，让小马哥看看，晚儿做的多漂亮

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

乡兄的这个漂漂亮播放器，可叫向晚开心极了！！

使用道具举报

我来自他乡

37楼

发表于 2025-6-6 23:02 |只看该作者

向晚发表于 2025-6-6 18:20
本帖最后由向晚于 2025-6-6 18:42 编辑

已经添加到歌单里了

使用道具举报

薛痒

38楼

发表于 2025-6-6 23:14 |只看该作者

欢迎热心、热情分享的新朋友，播放器看上去颇为新颖，选择又多了

使用道具举报

我来自他乡

39楼

发表于 2025-6-6 23:27 |只看该作者

薛痒发表于 2025-6-6 23:14
欢迎热心、热情分享的新朋友，播放器看上去颇为新颖，选择又多了

感谢支持

使用道具举报

诗意天涯

40楼

发表于 2025-6-7 00:25 |只看该作者

马叶的小屋发表于 2025-6-6 17:23
哪个合唱？版歌？

就你组织的合唱啊

使用道具举报

马叶的小屋

41楼

发表于 2025-6-7 10:18 |只看该作者

诗意天涯发表于 2025-6-7 00:25
就你组织的合唱啊

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

使用道具举报

我来自他乡

42楼

发表于 2025-6-14 00:21 |只看该作者

本帖最后由我来自他乡于 2025-6-14 07:40 编辑

这个楼层的 aplayer 播放器代码都是上传到微风音乐网盘，如果想要使用这个播放器，可以下载下边的zip压缩文件，解压后修改滚动歌词、歌曲名称、歌手名称、音乐链接和图片地址。

如果不想下载压缩文件，也可以用下边的代码，复制代码保存为html后缀文件。

<link href="https://s4.zstatic.net/ajax/libs/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
<style type="text/css">
.aplayer {
background:#fff url() 65px -8px repeat-x !important;}
#postmessage_37985{
font-size: 22px;
color: #8c888b;
background: -webkit-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff);
-moz-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff);
-ms-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff);
color: transparent;
-webkit-background-clip: text;
animation: ran 50s linear infinite;
}
@keyframes ran {
from {
backgroud-position: 0 0;
}
to {
background-position: 9000px 0;
}
}
.aplayer-author {
color: #8c888b;
background: -webkit-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff);
-moz-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff): ;
-ms-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff): ;
color: transparent;
-webkit-background-clip: text;
animation: ran 250s linear infinite;
}
.aplayer-author {
border-bottom: 1px solid skyblue;
border-image: -webkit-linear-gradient(left,#FF9B9B 30%,#FFB90F 20%,#FFB90F 40%,#29ACE5 40%,#29ACE5 60%,#29ACE5 60%,#29ACE5 80%,#3CB371 80%,#3CB371 100%,grey 100%) 1 1;
line-height: 25px;
display: inline;
*display: inline;
*zoom: 1;
margin-bottom: 3px;
}
.aplayer-title {
color: #8c888b;
background: -webkit-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff);
-moz-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff): ;
-ms-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff): ;
color: transparent;
-webkit-background-clip: text;
animation: ran 250s linear infinite;
}
.aplayer-title {
border-bottom: 1px solid skyblue;
border-image: -webkit-linear-gradient(left,#FF9B9B 30%,#FFB90F 20%,#FFB90F 40%,#29ACE5 40%,#29ACE5 60%,#29ACE5 60%,#29ACE5 80%,#3CB371 80%,#3CB371 100%,grey 100%) 1 1;
line-height: 25px;
display: inline;
*display: inline;
*zoom: 1;
margin-bottom: 3px;
}
#container{
width: 0; /*设置为0 隐藏自定义菜单*/
height: 125px;
overflow: hidden; /*隐藏溢出的元素*/
}
.aplayer .aplayer-pic img {
height:100%!important;
width:100%!important;
}
</style>
<div id='aplayer'>
<div id="player" class="aplayer">
<pre class="aplayer-lrc-content">
这里添加滚动歌词，从[00:00.00]开始到音乐结束。
</pre>
</div>
</div>
<script src="https://s4.zstatic.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
<script >
var ap = new APlayer
({
element: document.getElementById('aplayer'),
autoplay: true,
theme: '#FADFA3',
volume: 0.7,
showlrc: true,
audio: [
{
title: '这里添加歌曲名称',
author: '这里添加歌手名字',
url: '这里添加音乐链接地址',
pic: '这里添加图片地址',
}
]
});
ap.init();
</script>

复制代码

下面是微风音乐网盘的音乐播放器示例：
诺爷Plus的---就让冷风吹

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

1 查看全部评分

马叶的小屋

使用道具举报

马叶的小屋

43楼

发表于 2025-6-14 17:36 |只看该作者

我来自他乡发表于 2025-6-14 00:21
本帖最后由我来自他乡于 2025-6-14 07:40 编辑这个楼层的 aplayer 播放器代码都是上传到微风音乐网盘， ...

他乡兄分享的好东西呢！！

使用道具举报

我来自他乡

44楼

发表于 2025-6-14 19:04 |只看该作者

马叶的小屋发表于 2025-6-14 17:36
他乡兄分享的好东西呢！！

用站长工具查了一下，原来屋舍的ip地址来自日本，所以有些地区的中国用户不能看到，我网站的ip地址来自大马，可能有些也不能看到播放器，最后这个微风的ip地址来自中国，这个不可能再看不到播放器了吧？

使用道具举报

我来自他乡

45楼

发表于 2025-6-14 19:16 |只看该作者

另外再说明一下，第42楼里 aplyer 播放器代码的 js 和 css 文件是上传到微风网盘，这个微风网盘的 ip 地址是来自中国，所以如果用42楼的播放器代码，里边需要修改的“音乐地址”和‘“图片地址”不一定要把音乐和图片上传到微风，也可以用其他网站的地址，我们只是套用了微风的 aplyer 播放器。

使用道具举报