在 WordPress Puock 主题中集成 Meting.js 音乐播放器

共计 2703 个字符，预计需要花费 7 分钟才能阅读完成。

首先需要引入js,css文件，我是直接对源码进行修改，没有用子主题，因为自己也是初学，还没有搞的太明白，刚开始是直接在function.php中写了个方法进行引入，具体可以问一下AI，后面发现，每次切换页面都会载入，就搜了一下默认的js文件载入路径，在主题文件夹下/wordpress/wp-content/themes/puock/inc/init.php，我是这样添加的，需要自己修改为自己的js路径

        wp_enqueue_style('puock-aplayer', pk_get_static_url() . '/assets/libs/aplayer/APlayer.min.css', [], PUOCK_CUR_VER_STR);
        wp_enqueue_script('puock-aplayer', pk_get_static_url() . '/assets/libs/aplayer/APlayer.min.js', array(), PUOCK_CUR_VER_STR, true);
        wp_enqueue_script('puock-meting', pk_get_static_url() . '/assets/libs/aplayer/Meting.min.js', array('puock-aplayer'),PUOCK_CUR_VER_STR, true);

然后就是在function.php和footer.php添加方法和容器，其实中间踩了很多坑，比方说刚开始就没怎么看，以为用的pjax做的无刷，搜了半天错误的方法，都想放弃了，然后好好看了一下源码，哦原来是用instantClick，我想着change事件后用localStorage绑定一下播放状态，就可以了，当时的代码是这样的，但是有个问题，就是每次刷新页面，都会断一下，我他娘的直接强迫症犯了

function.php 添加方法

function pk_add_remember_music_script() {
    ?>
    <script>
        if (typeof window.ap === 'undefined') {
            window.ap = null;
        }

        function ready(){
            window.ap.on('canplay', function () {
                if(localStorage.getItem("musicIndex") != null){
                    musicIndex = localStorage.getItem("musicIndex");
                    musicTime = localStorage.getItem("musicTime");
                    if(window.ap.list.index != musicIndex){
                        window.ap.list.switch(musicIndex);
                    }else{
                        window.ap.seek(musicTime);
                        window.ap.play();
                        localStorage.clear();
                    }
                }
            });
        }

        Object.defineProperty(document.querySelector('meting-js'), "aplayer", {
            set: function (aplayer) {
                window.ap = aplayer;
                ready();
            }
        });

        if (typeof InstantClick !== 'undefined') {
            InstantClick.on('change', function(){
                if(!window.ap.audio.paused){
                    musicIndex = window.ap.list.index;
                    musicTime = window.ap.audio.currentTime;
                    localStorage.setItem("musicIndex",musicIndex);
                    localStorage.setItem("musicTime",musicTime);
                }
            });
        }
    </script>
    <?php
}
add_action('wp_footer', 'pk_add_remember_music_script');

footer.php 添加容器 注意别放到content里面忘了会有什么问题了

<meting-js 
    server="netease"
    type="playlist"
    fixed="true"
    id="60198">
</meting-js>

后面才发现自己太蠢了，总之自己也是个前端大菜鸡，其实只需要保存meting.js初始化后的对象，然后appendChild就行了，都得定义成全局变量，不然会有冲突，具体怎么解决，希望其他大佬能帮帮俺，最终解决方案

function pk_add_remember_music_script() {
    ?>
    <script>
        if (typeof window.ap === 'undefined') {
            window.ap = null;
            window.mtjs = null;
        }
         if (window.mtjs) {
           document.body.appendChild(window.mtjs);
        }

        function ready(){
            if (!window.mtjs) {
                window.mtjs = document.querySelector('meting-js');
                console.log(window.mtjs);
            }
        }

        Object.defineProperty(document.querySelector('meting-js'), "aplayer", {
            set: function (aplayer) {
                window.ap = aplayer;
                ready();
            }
        });

    </script>
    <?php
}
add_action('wp_footer', 'pk_add_remember_music_script');

当然还有点问题，控制台一直报错，应该是metingjs默认的事件，我也懒得搞了，直接去

copy一份未压缩源码,替换掉Meting.min.js，修改js中最前面的两个方法，一个是根据全局变量判断是不是要加载列表，另外一个应该是销毁，我直接注释掉了，到此就成功实现了切换页面无中断播放

  connectedCallback() {
    if (!window.mtjs && window.APlayer && window.fetch) {
      this._init()
      this._parse()
    }
  }

  disconnectedCallback() {
    if (!this.lock) {
    //   this.aplayer.destroy()
    }
  }