vue按顺序播放多个音频

        <div class="player">
            <audio class="audio"
                   id="player"
                   controls>您的浏览器不支持 audio 标签。</audio>
            <div class="mp3"
                 @click="handlePlay">
                <van-icon class="icon"
                          :name="isPlay ? 'pause' : 'play'" />
                <div class="play">{{ isPlay ? '暂停' : '播放' }}</div>
            </div>
        </div>

  data () {
    return {
      calledPhone: this.$route.query.calledPhone,
      callList: [],  // 音频列表
      playIdx: null,
      isPlay: false,
      isFirst: false
    }
  },
  methods: {
    handlePlay () {
      if (this.callList && !this.callList.length) return
      const player = document.getElementById('player')
      this.isPlay = !this.isPlay
      if (this.isPlay) {
        if (this.playIdx !== null) {
          player.play()
        } else {
          if (this.playIdx == null) {
            this.playIdx = 0
          }
          const musics = this.callList.map(item => {
            return item.talkMp3PlayPath // 音频资源路径
          })
          player.src = musics[this.playIdx]
          player.play()
          player.onended = () => {
            this.playIdx += 1
            if (this.playIdx < musics.length) {
              player.src = musics[this.playIdx]
              player.play()
              player.onerror = (e) => {
                this.isPlay = false
                this.playIdx = null
              }
            } else {
              this.playIdx = null
              this.isPlay = false
            }
          }
        }
      } else {
        player.pause()
      }
    }
  },

    .player {
        flex: 0 0 150px;
        padding-right: 30px;
        .audio {
            display: none;
        }
        .mp3 {
            display: flex;
            flex-direction: column;
            float: right;
            width: 90px;
            height: 90px;
            font-size: 16px;
            border-radius: 50%;
            box-shadow: 0 0 10px #999;
            background: #fff;
            text-align: center;
        }
        .icon {
            margin-top: 15px;
            font-size: 40px;
            color: #555;
        }
        .play {
            font-size: 14px;
            color: #555;
        }
    }

image.png image.png