vue 音乐播放器实现循环当前和顺序播放的切换

主要根据的是audio的ended事件，该事件MDN定义如下

该事件在播放结束时触发，我们给这个事件绑定方法来控制当音乐结束接着播放下一首还是循环播放

<audio
      :src="playSong"
      ref="audioController"
      @canplay="getSonginf"
      @timeupdate="timeUpdate"
      @ended="playModel"
    ></audio>

playModel() {
      // 如果当前模式是循环播放
      if (this.playMode == "loop") {
        this.pause();
        this.isPlaying = false;
        // 将当前的播放时间置为0即可从头开始
        this.audioController.currentTime = 0;
        this.play();
        this.isPlaying = true;
      } else {
        // 否则调用切换下一首的函数
        this.playNext();
      }
    },

切换的逻辑如下该方法绑定的是切换按钮

changeModel() {
      if (this.playMode == "loop") {
        this.playMode = "inorder";
      } else if (this.playMode == "inorder") {
        this.playMode = "loop";
      }
    },