vue中如何实现音频轮流播放的功能？

Question

小弟刚学前端，在写自己的demo时有一个需求。
点击START按钮，播放音频A，等待1秒，再播放音频B。如此循环
点击STOP按钮，停止播放

请问如何实现呢？谢谢

Answer 1

大概这样吧，代码直接写的，没跑过不知道会不会有问题，只提供个大概思路

创建一个LoopAudio类的对象，来控制开始结束，这样比较清晰

interface LoopListItem {
    audio: HTMLAudioElement,
    loopTime: number
}

class LoopAudio {

    private start = false;

    private activeIndex = 0;

    private loopID = 0;

    private loopList: LoopListItem[];

    constructor (loopList: LoopListItem[]) {
        this.loopList = loopList || [];
  }

  private loop() {
    this.playAudio(this.activeIndex, () => {
      let audioOption = this.loopList[this.activeIndex];

      if (audioOption) {
        audioOption.audio.pause();
      }

      this.activeIndex = (this.activeIndex + 1) % this.loopList.length;
      this.loop();
    });
    }

    startLoop () {
        if (!this.loopList.length || this.start) {
            return;
      }
      this.start = true;
      this.loop();
  }

  stopLoop() {
    if (!this.start) {
      return;
    }
    clearTimeout(this.loopID);
    this.loopID = 0;
    this.activeIndex = 0;
    this.start = false;
    this.loopList.forEach(audioOption => {
      audioOption.audio.pause();
    });
  }

  playAudio(index: number, nextFn?: Function) {
    let audioOption = this.loopList[index];
    if (!audioOption) {
      return;
    }
    let { audio, loopTime } = audioOption;
    if (!audio.duration) {
      return;
    }
    if (audio.currentTime >= audio.duration) {
      audio.currentTime = 0;
    }
    
    audio.play();

    if (nextFn) {
      this.loopID = setTimeout(nextFn, loopTime);
    }
  }
}