vue项目播放音频实例

最新推荐文章于 2025-02-24 00:00:00 发布

原创最新推荐文章于 2025-02-24 00:00:00 发布 · 723 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

24 篇文章

订阅专栏

一次只播放一个音频，可以切换，播放停止自动恢复

<template>
  <div>
    <div v-for="item in list" :key="item.name">
      <div>{{item.name}}</div>
      <div @click="play(item)">play-{{item.status}}</div>
      <div @click="pause(item)">playing-{{item.status}}</div>
      <audio controls="controls" class="bird-native-player" :src="item.src"></audio>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestAudio',
  data () {
    return {
      audio: null,
      nowPlay: null,
      list: [
        {
          name: '音频1',
          src: 'https://nas-national-prod.s3.amazonaws.com/ABETOW_1.song_AZkc_1.mp3?uuid=609927bb4e763',
          status: 'stop',
          audio: null
        },
        {
          name: '音频2',
          src: 'https://nas-national-prod.s3.amazonaws.com/AMEOYS_1.peeps_VAle_1.mp3?uuid=609927bc9f9c9',
          status: 'stop',
          audio: null
        }
      ]
    }
  },
  methods: {
    pause (item) {
      item.status = 'pause'
      item.audio.pause()
    },
    play (item) {
      item.audio = new Audio()
      if (this.nowPlay) {
        this.nowPlay.audio.pause()
        this.nowPlay.status = 'stop'
      }
      this.nowPlay = item
      item.audio.src = item.src
      let playPromise = null
      playPromise = item.audio.play()
      if (playPromise) {
        playPromise.then(() => {
          const timer = setInterval(() => {
            item.status = 'playing'
            if (item.audio.paused) {
              clearInterval(timer)
              item.status = 'pause'
            }
          }, 1000)
        }).catch((e) => {
          // 音频加载失败
          console.error(e)
        })
      }
    }
  },
  mounted () {
  }
}
</script>

<style scoped>

</style>