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

1、首先将下边的 APlayer.css 和 APlayer.js 代码下载然后解压上传到服务器。

APlayer.css.zip (2.64 KB, 下载次数: 99)

2022-8-6 17:28 上传

点击文件名下载附件

APlayer.js.zip (13.42 KB, 下载次数: 99)

2022-8-6 17:28 上传

点击文件名下载附件

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

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

1. <link rel="stylesheet" href="/APlayer/APlayer.css">
   
2. <div id="main">
   
3.                 <div class="container">
   
4.         <div id="player" class="aplayer">
   
5.         <pre class="aplayer-lrc-content">
   
6. [00:00.00]作词：Christine Welch (克丽丝汀) | 作曲：Skot Suyama (陶山)
   
7. [00:17.29]幽静 窗外满地片片寒花
   
8. [00:23.85]一瞬间永恒的时差
   
9. [00:28.75]窝在棉被里
   
10. [00:34.62]倾听 踏雪听沉默的声音
    
11. [00:41.19]飘雪藏永恒的身影
    
12. [00:46.13]雪树下等你
    
13. [00:50.80]在一瞬间 有一百万个可能
    
14. [00:55.16]该向前走 或者继续等
    
15. [00:59.56]这冬夜里 有百万个不确定
    
16. [01:03.87]渐入深夜 或期盼天明
    
17. [01:08.02]云空的泪 一如冰凌结晶了成雪花垂
    
18. [01:16.94]这一瞬间 有一百万个可能
    
19. [01:21.30]窝进棉被 或面对寒冷
    
20. [01:27.26]~Music~
    
21. [01:44.48]幽静寒风吹来一缕声音
    
22. [01:51.01]一瞬间看着你走近
    
23. [01:55.96]暖了我冬心
    
24. [02:01.93]倾听 踏雪听沉默的声音
    
25. [02:08.50]飘雪藏永恒的身影
    
26. [02:13.36]雪树下等你
    
27. [02:18.09]在一瞬间 有一百万个可能
    
28. [02:22.45]该向前走 或者继续等
    
29. [02:26.87]这冬夜里 有百万个不确定
    
30. [02:31.20]渐入深夜 或期盼天明
    
31. [02:35.33]云空的泪 一如冰凌结晶了成雪花垂
    
32. [02:44.20]这一瞬间 有一百万个可能
    
33. [02:48.59]窝进棉被 或面对寒冷
    
34. [03:12.13]那晚上会是哪个瞬间
    
35. [03:14.16]说好的爱会不会改变
    
36. [03:16.16]而你让我徘徊 在千里之外yeah
    
37. [03:18.46]你让我等待好久 baby
    
38. [03:20.71]突然间那是哪个瞬间
    
39. [03:22.79]你终於出现 就是那个瞬间
    
40. [03:24.91]等了好久 忍不住伸手
    
41. [03:27.07]那个瞬间
    
42. [03:28.12]在一瞬间 有一百万个可能
    
43. [03:32.27]该向前走 或者继续等
    
44. [03:36.70]这深夜里 有百万个不确定
    
45. [03:41.01]渐入冬林 或走向街灯
    
46. [03:45.19]云空的泪 一如冰凌结晶了成雪花垂
    
47. [03:54.11]这一瞬间 有一百万个可能
    
48. [03:58.40]暖这冬心 或面对寒冷
    
49. [04:02.84]该向前走 或者继续等
    
50. [04:07.13]渐入冬林 或走向街灯
    
51. [04:11.54]窝进棉被 或面对寒冷
    
52. [04:15.88]暖这冬心 或面对寒冷
    
53. [04:26.43]~~End~~
    
54.             </pre>
    
55.         </div>
    
56.         </div>
    
57. </div>
    
58. <script src="/APlayer/APlayer.js"></script>
    
59. <script type="text/javascript">var jQuery=jQuery.noConflict();</script>
    
60. <script>
    
61.     var ap = new APlayer
    
62.     ({
    
63.         element: document.getElementById('aplayer'),
    
64.     autoplay: true,
    
65.     theme: '#FADFA3',
    
66.     showlrc: true,
    
67.                 audio: {
    
68.                         title: "歌曲",
    
69.                         author: "歌手",
    
70.                         url: '音乐地址',
    
71.                         pic: '音乐封面',
    
72.                 }
    
73.         });
    
74.         ap.init();
    
75. </script>

复制代码

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

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

1. <link rel="stylesheet" href="/APlayer/APlayer.css">
   
2. <div id='aplayer'></div>
   
3. <script src="/APlayer/APlayer.js"></script>
   
4. <script type="text/javascript">var jQuery=jQuery.noConflict();</script>
   
5. <script>
   
6.     var ap = new APlayer
   
7.     ({
   
8.         element: document.getElementById('aplayer'),
   
9.     autoplay: true,
   
10.     theme: '#FADFA3',
    
11.     lrcType: 3,
    
12.                 audio: [{
    
13.                         title: "歌曲",
    
14.                         author: "歌手",
    
15.                         url: '音乐地址',
    
16.                         pic: '音乐封面',
    
17.                         lrc: '歌词地址',
    
18.                 }]
    
19.         });
    
20.         ap.init();
    
21. </script>[/mw_shl_code]
    
22. 
    
23. [quote]autoplay: true,   //音频自动播放
    
24. theme: '#FADFA3',   //主题色
    
25. lrcType: 3,   //lrc文件方式[/quote]
    
26. 
    
27. 3、多曲音乐的代码如下：
    
28. 
    
29. [mw_shl_code=css,true]<link rel="stylesheet" href="/APlayer/APlayer.css">
    
30. <div id='aplayer'></div>
    
31. <script src="/APlayer/APlayer.js"></script>
    
32. <script type="text/javascript">var jQuery=jQuery.noConflict();</script>
    
33. <script>
    
34.     var ap = new APlayer
    
35.     ({
    
36.         element: document.getElementById('aplayer'),
    
37.     autoplay: true,
    
38.     theme: '#FADFA3',
    
39.     loop: 'all',
    
40.     order: 'random',
    
41.     preload: 'auto',
    
42.     volume: 0.7,
    
43.     mutex: true,
    
44.     listFolded: false,
    
45.     listMaxHeight: '360px',
    
46.     lrcType: 3,
    
47.                 audio: [{
    
48.                         title: "歌曲",
    
49.                         author: "歌手",
    
50.                         url: '音乐地址',
    
51.                         pic: '音乐封面',
    
52.                         lrc: '歌词地址',
    
53.                       },        
    
54.                       {
    
55.                         title: "歌曲",
    
56.                         author: "歌手",
    
57.                         url: '音乐地址',
    
58.                         pic: '音乐封面',
    
59.                         lrc: '歌词地址',
    
60.                        }
    
61.                  ]
    
62.         });
    
63.         ap.init();
    
64. </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
Ⅱ、替换内容：

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

1. <!--音乐插件-->
   
2. <link rel="stylesheet" href="/APlayer/APlayer.css">
   
3. <div id='aplayer'></div>
   
4. <script src="/APlayer/APlayer.js" type="text/javascript" ></script>
   
5. <script type="text/javascript">var jQuery=jQuery.noConflict();</script>
   
6. <script>
   
7.             var ap = new APlayer
   
8.     ({
   
9.         element: document.getElementById('aplayer'),
   
10.     mini: true,
    
11.     fixed: true,
    
12.     autoplay: false,
    
13.     theme: '#FADFA3',
    
14.     loop: 'all',
    
15.     order: 'random',
    
16.     preload: 'auto',
    
17.     volume: 0.7,
    
18.     mutex: true,
    
19.     listFolded: true,
    
20.     listMaxHeight: '360px',
    
21.     lrcType: 3,
    
22.         audio: [
    
23.             {
    
24.                             title: "一百万个可能",
    
25.                             author: "Christine Welch（克丽丝叮）",
    
26.                             url: '音乐地址.mp3',
    
27.                             pic: '图片地址.jpg',
    
28.                             lrc: '歌词地址.lrc',
    
29.                     },
    
30.             {
    
31.                             title: "财神摆摊",
    
32.                             author: "马博",
    
33.                             url: '音乐地址.mp3',
    
34.                             pic: '图片地址.jpg',
    
35.                             lrc: '歌词地址.lrc',
    
36.             {
    
37.                             title: "彩云伴海鸥",
    
38.                             author: "高胜美",
    
39.                             url: '音乐地址.mp3',
    
40.                             pic: '图片地址.jpg',
    
41.                             lrc: '歌词地址.lrc',
    
42.             }
    
43.         ]
    
44.     });
    
45.   ap.init();
    
46. </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