首页 > 其他分享> > Vue音乐项目获取当前播放时间、总时间、缓存进度

Vue音乐项目获取当前播放时间、总时间、缓存进度

2022-07-17 04:00:07 作者：互联网

遇到问题

在网页开发中，经常需要在网页中添加音乐模块，其中使用到的自然就是<audio>元素了
最近，在一个项目当中使用到了<audio>元素，其中遇到了几个问题，就是如何获取<audio>的总时长、当前播放时间以及缓存进度

解决问题

在网上找了一些资料后，发现了以下三个属性：

1. duration

duration 属性用来获取音频的总时长

2. currentTime

currentTime 属性用来获取当前播放时间

3. buffered

buffered 属性获取表示当前音频已缓存部分的 TimeRanges 对象

通过计算 TimeRanges 对象的 length 属性就可以获取缓存时长
TimeRanges.end(TimeRanges.length - 1)

代码演示

点击查看代码

<template>
  <div>
    <audio src="https://music.163.com/song/media/outer/url?id=28802028.mp3" controls ref="audio"></audio>
    <br>
    <button @click="getDuration">获取总时长</button>
    <button @click="getCurrentTime">获取当前播放位置</button>
    <button @click="getBuffered">获取缓存位置</button>
  </div>
</template>

<script>
export default {
  methods: {
    getDuration () {
      let duration = this.$refs.audio.duration;
      console.log(duration);
    },
    getCurrentTime () {
      let currentTime = this.$refs.audio.currentTime;
      console.log(currentTime);
    },
    getBuffered () {
      // 获取表示当前音频已缓存部分的 TimeRanges 对象
      let TimeRanges = this.$refs.audio.buffered;
      console.log(TimeRanges);

      // 获取以缓存的时间
      let timeBuffered = TimeRanges.end(TimeRanges.length - 1);
      console.log(timeBuffered);

      // 获取缓存进度，值为0到1
      let bufferPercent = timeBuffered / this.$refs.audio.duration;
      console.log(bufferPercent);
    }
  },
};
</script>

<style>
</style>

标签：缓存,log,获取,Vue,let,duration,播放,TimeRanges
来源： https://www.cnblogs.com/bkzj/p/16479462.html