vue页面有多个audio只能播放一个

<audio
  controls
  :src="item.src"
  class="mt10 audio4"
  :data-id="`audio3${item.id}`"
  @play="handlePlay(`audio3${item.id}`)"
></audio>
<script>
data(){
    return{
       // 当前播放的音频对象
      currentAudio: null,
      videoElement: [] // 创建一个数组
  }
},
methods:{
handlePlay(id) {
      this.videoElement = document.getElementsByTagName('audio')
      // console.log('aaaa', id, this.videoElement)
      Array.from(this.videoElement).forEach(item => {
        // console.log('bbbb', item.dataset.id)
        if (item.dataset.id == id) {
          item.play()
        } else {
          item.pause()
        }
      })
    },
    playOrPause(audio) {
    // 检查是否有其他音频正在播放
      if (this.currentAudio && this.currentAudio !== audio && !this.currentAudio.paused) 
      {
        this.currentAudio.pause();
      }
      // 设置当前播放的音频对象并切换状态
      this.currentAudio = audio;
      if (this.currentAudio.paused) {
        this.currentAudio.play();
      } else {
        this.currentAudio.pause();
      }
    },
    // 音频播放结束事件
    audioEnd(audio) {
      this.currentAudio = null;
    },

}
</script>