Aplayer和meetingJs实现歌单效果
无意看到一个大佬博客大佬博客传送门里有介绍,于是尝试着鼓捣了一下。
写下过程方便记住。
下载了MetingJs和Aplayer只后,上传到了主题插件文件夹中解压之后,
重复刷新和多次上传发现:控制台插件处都不会新增插件出来
纳闷了好久,然后想着可能不会出现插件这样的后台效果吧。
<script>
// Aplayer API
window.aplayers = window.aplayers || [];
document.addEventListener('DOMContentLoaded', initAplayer);
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')[0].appendChild(element);
});
},
loadResources: function (callback) {
const loadResource = this.loadResource;
const pt = '//s0.pstatp.com/cdn/expire-1-M/';
const jd = '//cdn.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'
})[resource.split('.').pop()]
));
});
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[i].parentNode.insertBefore(child, sources[i]);
sources[i].style.display = 'none';
const songsTag = sources[i].querySelectorAll('s');
const songs = [];
songsTag.forEach(songTag => {
const song = {};
for (let i = 0; i < songTag.attributes.length; i++) {
song[songTag.attributes[i].name] = songTag.attributes[i].value;
}
songs.push(song);
});
const options = { container: child, preload: 'none', autoplay: false, audio: songs };
const optionMap = sources[i].attributes;
for (let i = 0; i < optionMap.length; i++) {
options[optionMap[i].name] = optionMap[i].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 (mts.length !== 0) common.loadResources(
function () {
mts.forEach(mt => {
if (!mt.aplayer) {
const html = mt.outerHTML;
mt.aplayer = { destroy: new Function() };
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);
});
}
);
$(document).on('pjax:start', function () {
for (let i = 0; window.aplayers && i < window.aplayers.length; i++) {
window.aplayers[i].list.index = undefined;
window.aplayers[i].destroy();
}
window.aplayers = [];
});
};
</script>
接着在控制台PJAX RELOAD设置中写上initAplayer();
到此为止就已经设置完成了
演示效果是这样
歌单效果
单曲效果1
单曲效果2
!!!!!!
<!-- 歌单内容过大会加载的有点缓慢好像 -->
<!-- 引入方式 -->
<!-- id在打开网易云歌单之后会显示然后替换即可 -->
<meting-js auto="https://music.163.com/#/playlist?id=3015005874"></meting-js>
!!!
[00:00.00]This [00:04.01]is [00:08.02]lyric
!!!
<!-- 引入方式 -->
<meting-js
name="rainymood"
artist="rainymood"
url="https://rainymood.com/audio1110/0.m4a"
cover="https://rainymood.com/i/badge.jpg">
<pre hidden>
[00:00.00]This
[00:04.01]is
[00:08.02]lyric
</pre>
</meting-js>
!!!
!!!
<!-- 引入方式 -->
<!-- 发现如果要新增一个单曲按照上一个加入代码的方式有点繁琐,还要添加歌曲名字图片等信息,索性尝试直接将加入歌单的代码的歌单id更换为单曲id,成功显示单曲以及歌曲图片以及名字信息等,偷懒成功-->
<meting-js auto="https://music.163.com/#/song?id=1392141035"></meting-js>
!!!
琢磨了半天,发现对于我这样的小白来说,js代码我还得自己粘贴复制使用,记下来是不可能的,这辈子都记不住这么麻烦的一串英文。
其实还有一个更轻松的东西
使用插件一键创建歌单&单曲效果
APlayer-Typecho所以说上面那些代码啊啥啥啥的都不要管了,下载这个插件就可以直接使用啦,
上面的那些纯属好奇折腾。