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

QMS

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

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

2022-8-5 15:28 上传

点击文件名下载附件

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

2022-8-5 15:28 上传

点击文件名下载附件

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

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

[CSS] 纯文本查看 复制代码

<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 文件显示，代码如下：

[CSS] 纯文本查看 复制代码

<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、多曲音乐的代码如下：

[CSS] 纯文本查看 复制代码

<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
Ⅱ、替换内容：

[CSS] 纯文本查看 复制代码

<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模板的最下边：

[CSS] 纯文本查看 复制代码

 <!--音乐插件-->
<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