Blog音乐页多歌单

音乐页多歌单

参考

实现多个歌单的切换，本主题自带的音乐页面只有2个歌单。

  • [ ]

代码实现

在配置中多加一个参数

1
2
3
4
5
 # 音乐配置项
nav_music:
   enable: true
   list:
     -

在 config.pug 中增加一个参数

1
2
3
4
5
6
7
8
9
10
11
12
let music = 'undefined'
if (theme.nav_music.list.length > 0){
    music = JSON.stringify({
        musicId:theme.nav_music.list,
        musicIndex:0,
        musicServer:theme.nav_music.server
    })
}

const GLOBAL_CONFIG = {
   music: !{music},
}

修改 utils.js 中和音乐相关的方法

  • 找到 js 中的getCustomPlayList方法，大概在860行左右。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
getCustomPlayList: function () {
    if (!window.location.pathname.startsWith("/music/")) {
      return;
    }
    const urlParams = new URLSearchParams(window.location.search);
    const userId = GLOBAL_CONFIG.music.musicId[GLOBAL_CONFIG.music.musicIndex];
    const userServer = GLOBAL_CONFIG.music.musicServer;
    const anMusicPageMeting = document.getElementById("anMusic-page-meting");
    if (urlParams.get("id") && urlParams.get("server")) {
      const id = urlParams.get("id");
      const server = urlParams.get("server");
      anMusicPageMeting.innerHTML = `<meting-js id="${id}" server=${server} type="playlist" type="playlist" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list" list-max-height="calc(100vh - 169px)!important"></meting-js>`;
    } else {
      anMusicPageMeting.innerHTML = `<meting-js id="${userId}" server="${userServer}" type="playlist" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list" list-max-height="calc(100vh - 169px)!important"></meting-js>`;
    }
    anzhiyu.changeMusicBg(false);
    anzhiyu.monitorMusicChange();
}
  • 找到 js 中的changeMusicList方法，大概在1000行左右。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
changeMusicList: async function () {
    if (GLOBAL_CONFIG.music.musicIndex == GLOBAL_CONFIG.music.musicId.length){
      GLOBAL_CONFIG.music.musicIndex = 0;
    }else {
      GLOBAL_CONFIG.music.musicIndex++;
    }
    const id = GLOBAL_CONFIG.music.musicId[GLOBAL_CONFIG.music.musicIndex];
    const anMusicPageMeting = document.getElementById("anMusic-page-meting");
    anMusicPageMeting.innerHTML = "";
    anMusicPageMeting.innerHTML = `<meting-js id="${id}" server="${musicServer}" type="playlist" mutex="true" preload="auto" theme="var(&#45;&#45;anzhiyu-main)" order="list" list-max-height="calc(100vh - 169px)!important"></meting-js>`;

    // 切换歌单确保歌单加载完成
    let timer = setInterval(() => {
      const anMusicPage = document.getElementById("anMusic-page");
      const metingAplayer = anMusicPage.querySelector("meting-js").aplayer;
      // 确保player加载完成
      if (metingAplayer) {
        clearInterval(timer);
        defaultPlayMusicList = metingAplayer.list.audios;

        anzhiyu.changeMusicBg(true);
        anzhiyu.monitorMusicChange();
      }
    }, 100);
}

监听歌曲的切换

这是为了实现切换歌曲，背景进行改变。
注：在初始化歌单时，可以实现背景随歌曲的变化而变化。如果切换歌单后，下面的方法就报错。
希望大佬指导一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
musicObserver:null,
 //监听音乐的切换
 monitorMusicChange:function (){
     // 选择需要观察变动的节点
     let page = document.getElementById("anMusic-page")
     const targetNode =page.getElementsByClassName("aplayer-pic");
     // 观察器的配置（需要观察什么变动）
     const config = { subtree: true,attributeFilter:['style'] };
     // 当观察到变动时执行的回调函数
     const callback = function(mutationsList, observer) {
        anzhiyu.changeMusicBg(true);
     };
   
     // 创建一个观察器实例并传入回调函数
     anzhiyu.musicObserver = new MutationObserver(callback);
     // 以上述配置开始观察目标节点
     anzhiyu.musicObserver.observe(targetNode, config);
 }