标题: 如何在 discuz 帖子里添加 APlayer 音乐播放器 [打印本页]
作者: QMS    时间: 2022-8-5 15:31
标题: 如何在 discuz 帖子里添加 APlayer 音乐播放器
1、首先将 APlayer.css 和 APlayer.js 代码上传到服务器。

(, 下载次数: 621)

(, 下载次数: 646)


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>
复制代码

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

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

  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.     loop: 'all',
  12.     order: 'random',
  13.     preload: 'auto',
  14.     volume: 0.7,
  15.     mutex: true,
  16.     listFolded: false,
  17.     listMaxHeight: '360px',
  18.     lrcType: 3,
  19.                 audio: [{
  20.                         title: "歌曲",
  21.                         author: "歌手",
  22.                         url: '音乐地址',
  23.                         pic: '音乐封面',
  24.                         lrc: '歌词地址',
  25.                       },        
  26.                       {
  27.                         title: "歌曲",
  28.                         author: "歌手",
  29.                         url: '音乐地址',
  30.                         pic: '音乐封面',
  31.                         lrc: '歌词地址',
  32.                        }
  33.                  ]
  34.         });
  35.         ap.init();
  36. </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 开启迷你模式
autoplayfalse 音频自动播放
theme'#b7daff' 主题色
loop'all' 音频循环播放, 可选值: 'all', 'one', 'none'
order'list' 音频循环顺序, 可选值: 'list', 'random'
preload'auto' 预加载，可选值: 'none', 'metadata', 'auto'
volume0.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





欢迎光临 (https://www.qms23.com/) Powered by Discuz! X3.5