discuz X3.5编辑器添加Aplayer,调用meting.js添加播放器播放在线音乐

第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>

至此,应该就可以在编辑器里看到按钮了,点击按钮添加歌曲链接发布就可以看到播放器了。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注