云音乐项目，切歌方式（顺序，随机，单曲），歌曲结束后控制下一首歌是哪一首

本文链接：https://blog.csdn.net/qq_42765776/article/details/128054787

本文介绍了如何通过JavaScript管理音乐播放模式，利用switch-case判断切换顺序、随机和单曲循环，并结合微信小程序的订阅发布机制，实现实时歌曲切换及减少请求次数。优化了事件处理与音乐控制流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

c首先要改变字体图标的样式，先定义一个变量做为标识切歌方式（0：顺序，1：随机，2单曲）和对应class名，点击了图标，则改为切歌方式的标识，再根据标识改对应的class名

let { cssPlayType , playType } = this.data;
    switch (playType){
      case 0:
        playType = 1;
          break;
      case 1:
        playType = 2;
          break;
      case 2:
        playType = 0;
    }
    if(playType === 0){
      cssPlayType = 'icon-24gl-repeat2'
    }else if(playType === 1){
      cssPlayType = 'icon-24gl-shuffle'
    }else if(playType === 2){
      cssPlayType = 'icon-24gl-repeatOnce2'
    }
this.setData({
      cssPlayType,
      playType
    })

之后在wx自带的监听音乐播放结束的函数中，判断是什么状态，再给另一个页面使用订阅与分布，告诉要返回的歌曲id是哪一个，（因为是在另一个页面中发过请求，为了减少请求次数）

// 自然结束
    this.backgroundAudioManager.onEnded(()=>{
      // this.musicController(isPlay, musicId, musicLink)
      // 有三种模式：顺序 ，随机 ， 单曲
      let { playType } = this.data;

      PubSub.subscribe('musicId',(msg,musicId)=>{
        // 获取音乐的详情
        this.getSongDetail(musicId);
        // 再播放音乐
        this.setData({
          isplay:true
        })
        this.musicControl(true,musicId)
  
        // 取消订阅
        PubSub.unsubscribe('musicId')
      })
      // 当此时的模式为顺序时
      if(playType === 0){
        PubSub.publish('switchType','next')
        // 再更新页面的进度条和当前时间
        this.setData({
          currentWidth:0,
          currentTime:'00:00'
        })

      }else if(playType === 1){
        // 当当前模式为随机播放时
        PubSub.publish('switchType','random')
        // 再更新页面的进度条和当前时间
        this.setData({
          currentWidth:0,
          currentTime:'00:00'
        })
      }else if(playType === 2){
        // 当当前模式为单曲循环时
        // 当当前模式为随机播放时
        PubSub.publish('switchType','same')
        // 再更新页面的进度条和当前时间
        this.setData({
          currentWidth:0,
          currentTime:'00:00'
        })
      }
      
    })

上一首与下一首也差不多

// 点击切歌的回调
  handleSwithch(e){
    // 切歌的类型
    let type = e.currentTarget.id;
    // 把当前的音乐关了
    this.backgroundAudioManager.stop()
    // 要先订阅，来自recommendSong页面的数据
    PubSub.subscribe('musicId',(msg,musicId)=>{
      // 获取音乐的详情
      this.getSongDetail(musicId);
      // 再播放音乐
      this.setData({
        isplay:true
      })
      this.musicControl(true,musicId)
      // 取消订阅
      PubSub.unsubscribe('musicId')
    })
    // 发布给recommendSong页面，把切歌类型传过去
    PubSub.publish('switchType',type)
  
  },

但是这个项目是通过订阅与发布来做的，我觉得还有完善的空间。