第1步,在界面→编辑器设置→Discuz!代码里添加Aplayer按钮。【替换内容】填入如下代码(这里的music.js引入目录填你自己上一步创建的music.js的实际目录):
<!-- 初始的 <meting-js> 标签 -->
<meting-js server="__SERVER__" type="song" id="__SONGID__" lrc-type="0"></meting-js>
<!-- 设置歌曲链接参数 -->
<div id="songUrl" style="display: none;">{1}</div>
<!-- 引入单独的 JavaScript 文件 -->
<script src="/static/js/player/music.js" defer></script>
meting.js的具体使用哪些参数和使用方法可以去github自己看:https://github.com/metowolf/MetingJS
参数:1,嵌套次数:1。其他内容看着填就可以。标签:aplayer,例子:[aplayer]歌曲链接[/aplayer],解释:音乐在线播放器,参数提示提示语:在此填入音乐链接。
第2步,新建一个js文件music.js用来解析歌曲链接:
// 解析函数
function parseMusicLink(songUrl) {
var server = '';
var songId = '';
// 解析歌曲链接
if (songUrl.includes('music.163.com')) {
server = 'netease'; // 网易云音乐
var match = songUrl.match(/\/song\?id=(\d+)/);
if (match) {
songId = match[1];
}
} else if (songUrl.includes('kugou.com')) {
server = 'kugou'; // 酷狗音乐
var match = songUrl.match(/mixsong\/(\w+)\.html/);
if (match) {
songId = match[1];
}
} else if (songUrl.includes('y.qq.com')) {
server = 'tencent'; // QQ音乐
var match = songUrl.match(/songDetail\/([^\/]+)/);
if (match) {
songId = match[1];
}
}
// 返回解析结果
return { server: server, songId: songId };
}
// 替换 <meting-js> 标签内容
function replaceMetingTag() {
// 获取歌曲链接参数
var songUrlElement = document.getElementById('songUrl');
var songUrl = songUrlElement.textContent.trim();
// 使用解析函数解析链接
var parsedResult = parseMusicLink(songUrl);
// 获取 <meting-js> 元素
var metingTag = document.querySelector('meting-js');
// 替换属性值
metingTag.setAttribute('server', parsedResult.server);
metingTag.setAttribute('id', parsedResult.songId);
// 替换占位符
metingTag.outerHTML = metingTag.outerHTML.replace('__SERVER__', parsedResult.server).replace('__SONGID__', parsedResult.songId);
}
// 调用替换函数
replaceMetingTag();
第3步,在所用标题的head文件里header_common.php或者header.php文件里引入播放器js和css。
<link rel="stylesheet" href="https://unpkg.com/aplayer/dist/APlayer.min.css"> <script src="https://unpkg.com/aplayer/dist/APlayer.min.js"></script> <script src="https://unpkg.com/@xizeyoupan/meting@latest/dist/Meting.min.js"></script>
至此,应该就可以在编辑器里看到按钮了,点击按钮添加歌曲链接发布就可以看到播放器了。