Discuz X3.5引用aplayer播放本地音乐

需要用aplayer播放本地音乐,并且指定歌曲名、艺术家、歌曲链接三个参数,找了半天没找到合适的教程,自己写个吧。

以下是具体实现方法:

1、在界面→编辑器→Discuz!代码中添加标签,图标啥的自己去搞个,设置为20px*20px参照原来有的图片,上传到/static/image/common目录下,然后把图标名字写上就OK了。如下图:

[erphpdown]

标签名字自己随便写,我这里写music。【嵌套次数】写3,【参数个数】写3,【允许使用此代码的用户组】自己决定。【参数提示语】歌名、歌手、歌曲链接,一行一个。

【替换内容】中添加如下代码。path/to/aplayer-init.js填写你自己创建的文件的目录。

<div id="aplayer"></div>
<!-- 隐藏的元素用于存放动态数据,实际内容将由 Discuz! 论坛的某种机制填充 -->
<span id="aplayer-name" style="display:none;">{1}</span>
<span id="aplayer-artist" style="display:none;">{2}</span>
<span id="aplayer-url" style="display:none;">{3}</span>

<!-- 引入 APlayer 的 CSS 和 JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- 引入自定义的 JS 初始化文件 -->
<script type="text/javascript" src="path/to/aplayer-init.js"></script>

当然,aplayer的css和js也可以直接引用到header文件中,怎么选择看你自己。

2、创建一个名为 aplayer-init.js的文件,放到js目录下。此目录就是你第一步引用的目录。

// aplayer-init.js
document.addEventListener('DOMContentLoaded', function() {
    // 获取隐藏元素的值
    const name = document.getElementById('aplayer-name').textContent;
    const artist = document.getElementById('aplayer-artist').textContent;
    const url = document.getElementById('aplayer-url').textContent;

    // 使用这些值来初始化 APlayer
    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        audio: [{
            name: name,
            artist: artist,
            url: url,
            cover: 'https://example.com/cover.jpg' // 封面 URL,根据需要替换
        }]
    });
});

OK,现在去编辑器找到图标就可以开始添加音乐了。

[/erphpdown]

发表回复

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