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

2024-07-13 14:57| 来源: 网络整理| 查看: 265

遇到问题

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

解决问题

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

1. duration

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

2. currentTime

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

3. buffered

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

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

代码演示点击查看代码获取总时长获取当前播放位置获取缓存位置 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); } }, };

【本文地址】

公司简介

联系我们