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();
到此为止就已经设置完成了

演示效果是这样

!!!!!!
<!-- 歌单内容过大会加载的有点缓慢好像 -->
<!-- 引入方式 -->
<!-- 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代码我还得自己粘贴复制使用，记下来是不可能的，这辈子都记不住这么麻烦的一串英文。

其实还有一个更轻松的东西

所以说上面那些代码啊啥啥啥的都不要管了，下载这个插件就可以直接使用啦，
上面的那些纯属好奇折腾。