为你的discuz x3.5网站引入APlayer和Meting，播放网易云、QQ等各平台音乐仅需要在第三方统计里面引入一段js即可
为你的discuz x3.5网站引入APlayer和Meting，播放网易云、QQ等各平台音乐仅需要在第三方统计里面引入一段js即可：一个只需加载JS，即可调用 APlayer 和 Meting，不依赖插件和服务器计算存储，任意站点都可使用的来播放 网易云，QQ 音乐，酷狗，虾米，百度 以及 自定义的 单曲和歌单的方法，在此记录并分享给大家。
引入 JS：
<script>
// APlayer API
document.addEventListener('DOMContentLoaded', initAplayer);
window.aplayers = window.aplayers || [];
function initAplayer(option) {
const common = {
loadResource: function (id, resource, type) {
return new Promise(function (resolve, reject) {
let loaded = document.head.querySelector('#' + id);
if (loaded) {
resolve('success: ' + resource);
return;
}
const element = document.createElement(type);
element.onload = element.onreadystatechange = () => {
if (!loaded && (!element.readyState || /loaded|complete/.test(element.readyState))) {
element.onload = element.onreadystatechange = null;
loaded = true;
resolve('success: ' + resource);
}
}
element.onerror = function () {
reject(Error(resource + ' load error!'));
};
if (type === 'link') {
element.rel = 'stylesheet';
element.href = resource;
} else {
element.src = resource;
}
element.id = id;
document.getElementsByTagName('head').appendChild(element);
});
},
loadResources: function (callback) {
const loadResource = this.loadResource;
const pt = '//s0.pstatp.com/cdn/expire-1-M/';
const jd = '//gcore.jsdelivr.net/npm/';
const resources = [
pt + 'aplayer/1.10.1/APlayer.min.css',
pt + 'aplayer/1.10.1/APlayer.min.js',
jd + 'meting@2/dist/Meting.min.js'
];
const loadPromises = [];
resources.forEach(resource => {
loadPromises.push(loadResource(btoa(resource).replace(/[=+\/]/g, ''), resource,
({
'css': 'link',
'js': 'script'
})
));
});
Promise.all(loadPromises).then(
function () {
if (typeof callback !== 'function') return;
let flag = false;
const waitAM = setInterval(() => {
if (!flag
&& typeof APlayer === 'function'
&& typeof MetingJSElement === 'function') {
flag = true;
callback();
clearInterval(waitAM);
}
}, 100);
}
);
},
createAplayers: function (sources) {
for (let i = 0; i < sources.length; i++) {
const child = document.createElement('div');
sources.parentNode.insertBefore(child, sources);
sources.style.display = 'none';
const songsTag = sources.querySelectorAll('s');
const songs = [];
songsTag.forEach(songTag => {
const song = {};
for (let i = 0; i < songTag.attributes.length; i++) {
song.name] = songTag.attributes.value;
}
songs.push(song);
});
const options = { container: child, preload: 'none', autoplay: false, audio: songs };
const optionMap = sources.attributes;
for (let i = 0; i < optionMap.length; i++) {
options.name] = optionMap.value;
}
this.loadResources(() => window.aplayers.push(new APlayer(options)));
}
}
};
if (option == 'manual') return new Promise((resolve, reject) => {
common.loadResources(() => resolve('success'));
});
const aps = document.querySelectorAll('ap');
if (aps.length !== 0) common.createAplayers(aps);
const mts = document.querySelectorAll('meting-js');
if (!window.refreshing && mts.length !== 0) common.loadResources(
function () {
mts.forEach(mt => {
if (!mt.aplayer) {
const html = mt.outerHTML;
mt.aplayer = { destroy: new Function(), list: { index: undefined } };
mt.outerHTML = '\n' + html;
}
});
document.querySelectorAll('meting-js').forEach(mt => {
let flag = false;
const waitMT = setInterval(() => {
if (!flag && mt.aplayer) {
flag = true;
window.aplayers.push(mt.aplayer);
console.log('replaced unloaded aplayer.')
clearInterval(waitMT);
}
}, 300);
});
}
);
}
</script>
<script>
// PJAX 相关 BUG
document.addEventListener('DOMContentLoaded', function () {
let flag = false;
window.needReloadUrls = window.needReloadUrls || new Set();
const jqueryWaitor = setInterval(() => {
if (!flag && jQuery) {
flag = true;
$(document).on('pjax:start', function () {
if (!window.refreshing || !window.pjaxStarted) {
window.pjaxStarted = true;
console.log('pjax:start');
window.aplayers.forEach(ap => {
ap.list.index = undefined;
ap.destroy();
});
window.aplayers = [];
setTimeout(() => window.pjaxStarted = false, 2000);
}
});
$(document).on('pjax:end', function () {
if (document.querySelector('meting-js')
|| document.querySelector('.collapse-block')
|| document.querySelector('#toggle-menu-tree')
|| document.querySelectorAll('.content-tab-title').length > 1
) {
if (!window.needReloadUrls.has(location.href)) {
window.needReloadUrls.add(location.href);
console.log('captured a neededReloadUrl.');
}
}
});
$(document).on('pjax:popstate', function (event) {
if (event.state && window.needReloadUrls.has(event.state.url) && !window.refreshing) {
window.refreshing = true;
console.log('back-forward handler.');
$.pjax.reload({
url: location.href,
container: '#body',
fragment: '#body',
scrollTo: false,
timeout: 8000
});
setTimeout(() => window.refreshing = false, 2000);
}
});
clearInterval(jqueryWaitor);
}
}, 500);
});
</script>
放到你社区后台——全局——站点信息——第三方统计代码里面：
页面添加效果：（比如首页、版块页面、帖子内容页等~）
网易云歌单引入方式：
!!!
<!-- 引入方式 -->
<meting-js auto="https://music.163.com/#/playlist?id=110459831"></meting-js>
!!!
QQ音乐歌单：
!!!
<!-- 引入方式 -->
<meting-js auto="https://y.qq.com/n/yqq/playlist/7355087593.html"></meting-js>
!!!
比如我在我第三方模板的/common/footer.php插入效果：
要在你的Discuz X3.5网站中引入APlayer和Meting来播放网易云、QQ等平台的音乐，你可以按照以下步骤操作：
### 1. 引入JS代码
将你提供的JS代码放入Discuz后台的“全局 -> 站点信息 -> 第三方统计代码”中。这样，这段JS代码会在每个页面加载时自动执行。
### 2. 在页面中添加播放器
你可以在任何页面中通过HTML标签来引入播放器。以下是一些示例：
#### 网易云歌单引入方式：
<meting-js
server="netease"
type="playlist"
id="6838211960"
fixed="true"
autoplay="false">
</meting-js>
#### QQ音乐歌单引入方式：
<meting-js
server="tencent"
type="playlist"
id="7108664518"
fixed="true"
autoplay="false">
</meting-js>
### 3. 在模板文件中插入播放器
如果你想在特定的模板文件中插入播放器，比如在`/template/your_template/common/footer.php`中，你可以直接在上述位置插入相应的HTML代码。
例如，在`footer.php`中插入网易云歌单播放器：
<div id="aplayer"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
initAplayer();
});
</script>
<meting-js
server="netease"
type="playlist"
id="6838211960"
fixed="true"
autoplay="false">
</meting-js>
### 4. 注意事项
- **PJAX兼容性**：如果你使用了PJAX（部分页面刷新），可能会遇到播放器无法正常加载的问题。你提供的JS代码中已经包含了PJAX的相关处理逻辑，确保在页面刷新时重新初始化播放器。
- **资源加载**：确保你的网站能够正常加载APlayer和Meting的CSS和JS资源。如果资源加载失败，播放器将无法正常工作。
### 5. 调试
如果在引入播放器后遇到问题，可以通过浏览器的开发者工具（F12）查看是否有资源加载失败或JS错误。根据错误信息进行相应的调整。
### 6. 自定义样式
如果你需要对播放器的样式进行自定义，可以通过修改CSS来实现。APlayer和Meting的CSS文件可以通过`loadResource`方法加载，或者直接在页面中引入自定义的CSS文件。
### 7. 其他平台
除了网易云和QQ音乐，你还可以通过Meting支持的其他平台（如酷狗、虾米、百度等）来播放音乐。只需修改`server`和`type`属性即可。
通过以上步骤，你应该能够在Discuz X3.5网站中成功引入APlayer和Meting，并播放来自不同平台的音乐。如果有任何问题，欢迎继续提问！
-- 本回答由 人工智能 AI智能体 生成，内容仅供参考，请仔细甄别。
页:
[1]