1、首先将下边的 APlayer.css 和 APlayer.js 代码下载然后解压上传到服务器。
APlayer.css.zip
(2.64 KB, 下载次数: 50)
APlayer.js.zip
(13.42 KB, 下载次数: 52)
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 |
|
相关帖子
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜