vue中audio实现微信语音播放动画

最新推荐文章于 2025-03-25 11:53:13 发布

chi1130

最新推荐文章于 2025-03-25 11:53:13 发布

阅读量5.4k

点赞数 4

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/chi1130/article/details/100677056

版权

Vue 专栏收录该内容

28 篇文章

订阅专栏

预览

在这里插入图片描述

思路

拿到时长做倒计时，时长 = （时长 + 1 ） * 100; destroy的时候清除一下

代码

<div style="display:none">
  <audio controls="controls" ref="audio">
    <source :src="url || ''" type="audio/mpeg" />
  </audio>
</div>
<div class="voice-bg" @click="handlePlay">
  <img
    v-if="isPlaying"
    src="./../../assets/images/goods/voice-play.gif"
    alt=""
  />
  <img
    v-else
    src="./../../assets/images/goods/voice.png"
    alt=""
  />
  <span>{{ duration || 0 }}"</span>
</div>

data() {
  return {
    url: '',
    timer: null,
    isPlaying: false,
    currentTime: 0,

  }
},
methods:{
  handlePlay() {
    let audio = this.$refs.audio;
    if (!this.isPlaying) {
      audio.play();
      this.isPlaying = true;
      this.watchEnd();
    } else {
      audio.pause();
      clearTimeout(this.timer);
      this.isPlaying = false;
      audio.currentTime = 0;
    }
  },
  watchEnd() {
    let that = this;
    this.timer = setTimeout(() => {
      that.isPlaying = false;
    }, (that.duration + 1) * 1000);
  },
},
beforeDestroy() {
  clearTimeout(this.timer);
}

资料

关于获取audio信息接口

七牛云????

this.$axios.get(`${this.info.url}?avinfo`).then(res => {
  let { streams } = res.data;
  this.duration = parseInt((streams && streams[0].duration) || 0);
});

UI图片

下载地址
 isPlaying gif
isPause png