如何在 discuz 帖子里添加 APlayer 音乐播放器

QMS · 发表于 2022-8-5 15:31:16

1、首先将 APlayer.css 和 APlayer.js 代码上传到服务器。

APlayer.min.css (12.8 KB, 下载次数: 621)

APlayer.min.js (57.93 KB, 下载次数: 646)

2、单曲音乐的代码，有两种格式。

Ⅰ、歌词和歌曲直接在同一个文件里，代码如下：

<link rel="stylesheet" href="/APlayer/APlayer.css">
<div id="main">
<div class="container">
<div id="player" class="aplayer">
<pre class="aplayer-lrc-content">
[00:00.00]作词：Christine Welch (克丽丝汀) | 作曲：Skot Suyama (陶山)
[00:17.29]幽静窗外满地片片寒花
[00:23.85]一瞬间永恒的时差
[00:28.75]窝在棉被里
[00:34.62]倾听踏雪听沉默的声音
[00:41.19]飘雪藏永恒的身影
[00:46.13]雪树下等你
[00:50.80]在一瞬间有一百万个可能
[00:55.16]该向前走或者继续等
[00:59.56]这冬夜里有百万个不确定
[01:03.87]渐入深夜或期盼天明
[01:08.02]云空的泪一如冰凌结晶了成雪花垂
[01:16.94]这一瞬间有一百万个可能
[01:21.30]窝进棉被或面对寒冷
[01:27.26]~Music~
[01:44.48]幽静寒风吹来一缕声音
[01:51.01]一瞬间看着你走近
[01:55.96]暖了我冬心
[02:01.93]倾听踏雪听沉默的声音
[02:08.50]飘雪藏永恒的身影
[02:13.36]雪树下等你
[02:18.09]在一瞬间有一百万个可能
[02:22.45]该向前走或者继续等
[02:26.87]这冬夜里有百万个不确定
[02:31.20]渐入深夜或期盼天明
[02:35.33]云空的泪一如冰凌结晶了成雪花垂
[02:44.20]这一瞬间有一百万个可能
[02:48.59]窝进棉被或面对寒冷
[03:12.13]那晚上会是哪个瞬间
[03:14.16]说好的爱会不会改变
[03:16.16]而你让我徘徊在千里之外yeah
[03:18.46]你让我等待好久 baby
[03:20.71]突然间那是哪个瞬间
[03:22.79]你终於出现就是那个瞬间
[03:24.91]等了好久忍不住伸手
[03:27.07]那个瞬间
[03:28.12]在一瞬间有一百万个可能
[03:32.27]该向前走或者继续等
[03:36.70]这深夜里有百万个不确定
[03:41.01]渐入冬林或走向街灯
[03:45.19]云空的泪一如冰凌结晶了成雪花垂
[03:54.11]这一瞬间有一百万个可能
[03:58.40]暖这冬心或面对寒冷
[04:02.84]该向前走或者继续等
[04:07.13]渐入冬林或走向街灯
[04:11.54]窝进棉被或面对寒冷
[04:15.88]暖这冬心或面对寒冷
[04:26.43]~~End~~
</pre>
</div>
</div>
</div>
<script src="/APlayer/APlayer.js"></script>
<script type="text/javascript">var jQuery=jQuery.noConflict();</script>
<script>
var ap = new APlayer
({
element: document.getElementById('aplayer'),
autoplay: true,
theme: '#FADFA3',
showlrc: true,
audio: {
title: "歌曲",
author: "歌手",
url: '音乐地址',
pic: '音乐封面',
}
});
ap.init();
</script>

复制代码

autoplay: true,    //音频自动播放
theme: '#FADFA3',  //主题色
showlrc: true,  //显示歌词

Ⅱ、歌词通过 lrc 文件显示，代码如下：

<link rel="stylesheet" href="/APlayer/APlayer.css">
<div id='aplayer'></div>
<script src="/APlayer/APlayer.js"></script>
<script type="text/javascript">var jQuery=jQuery.noConflict();</script>
<script>
var ap = new APlayer
({
element: document.getElementById('aplayer'),
autoplay: true,
theme: '#FADFA3',
lrcType: 3,
audio: [{
title: "歌曲",
author: "歌手",
url: '音乐地址',
pic: '音乐封面',
lrc: '歌词地址',
}]
});
ap.init();
</script>

复制代码

autoplay: true, //音频自动播放
theme: '#FADFA3', //主题色
lrcType: 3, //lrc文件方式

3、多曲音乐的代码如下：

<link rel="stylesheet" href="/APlayer/APlayer.css">
<div id='aplayer'></div>
<script src="/APlayer/APlayer.js"></script>
<script type="text/javascript">var jQuery=jQuery.noConflict();</script>
<script>
var ap = new APlayer
({
element: document.getElementById('aplayer'),
autoplay: true,
theme: '#FADFA3',
loop: 'all',
order: 'random',
preload: 'auto',
volume: 0.7,
mutex: true,
listFolded: false,
listMaxHeight: '360px',
lrcType: 3,
audio: [{
title: "歌曲",
author: "歌手",
url: '音乐地址',
pic: '音乐封面',
lrc: '歌词地址',
},
{
title: "歌曲",
author: "歌手",
url: '音乐地址',
pic: '音乐封面',
lrc: '歌词地址',
}
]
});
ap.init();
</script>

复制代码

autoplay: true, //音频自动播放
theme: '#FADFA3', //主题色
loop: 'all', //音频循环播放
order: 'random', //音频循环顺序
preload: 'auto', //预加载
volume: 0.7, //默认音量
mutex: true, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
listFolded: false, //列表默认折叠
listMaxHeight: '360px', //列表最大高度
lrcType: 3, //lrc文件方式

4、把音乐代码保存为 htm 或 html 后缀文件名，然后上传到服务器。

5、进入后台/界面/编辑器设置/Discuz!代码

Ⅰ、标签：mp3
Ⅱ、替换内容：

<div align="center"><iframe height="180" max-width="40em" width="100%" marginheight="0" style="music:none;" src="{1}" frameborder="0" width="770" marginwidth="0" scrolling="no"></iframe></div>

复制代码

其他的按自己需要设置。

6、发帖时在[mp3]输入音乐的htm或html地址。

7、如果也想在其他页面实现带吸底功能的APlayer播放器，把下边的代码添加到后台的营运/站点广告/全局漂浮广告，也可以添加到discuz或footer模板的最下边：

<link rel="stylesheet" href="/APlayer/APlayer.css">
<div id='aplayer'></div>
<script src="/APlayer/APlayer.js" type="text/javascript" ></script>
<script type="text/javascript">var jQuery=jQuery.noConflict();</script>
<script>
var ap = new APlayer
({
element: document.getElementById('aplayer'),
mini: true,
fixed: true,
autoplay: false,
theme: '#FADFA3',
loop: 'all',
order: 'random',
preload: 'auto',
volume: 0.7,
mutex: true,
listFolded: true,
listMaxHeight: '360px',
lrcType: 3,
audio: [
{
title: "一百万个可能",
author: "Christine Welch（克丽丝叮）",
url: '音乐地址.mp3',
pic: '图片地址.jpg',
lrc: '歌词地址.lrc',
},
{
title: "财神摆摊",
author: "马博",
url: '音乐地址.mp3',
pic: '图片地址.jpg',
lrc: '歌词地址.lrc',
{
title: "彩云伴海鸥",
author: "高胜美",
url: '音乐地址.mp3',
pic: '图片地址.jpg',
lrc: '歌词地址.lrc',
}
]
});
ap.init();
</script>

复制代码

mini: true, //开启迷你模式
fixed: true, //开启吸底模式
autoplay: true, //音频自动播放
theme: '#FADFA3', //主题色
loop: 'all', //音频循环播放
order: 'random', //音频循环顺序
preload: 'auto', //预加载
volume: 0.7, //默认音量
mutex: true, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
listFolded: false, //列表默认折叠
listMaxHeight: '360px', //列表最大高度
lrcType: 3, //lrc文件方式

官网：https://aplayer.js.org/
文档：https://aplayer.js.org/#/zh-Hans/
Github：https://github.com/MoePlayer/APlayer/

APlayer参数

名称	默认值	描述
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

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