标签：缓存 log 获取 Vue let duration 播放 TimeRanges
遇到问题
在网页开发中，经常需要在网页中添加音乐模块，其中使用到的自然就是<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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。