在开始之前，需要了解uniapp开发中使用的两个组件：audio音频组件和slider滑动选择器组件。接下来，我们可以参考以下步骤来实现音频进度条的设计。
在页面中添加audio组件在页面的template中使用audio标签添加音频组件，并设置src为音频文件的路径。
添加进度条slider组件添加slider组件，并设置绑定的v-model值为当前播放时间，用于控制进度条的位置。
设置音频进度条样式使用css样式来设置slider的样式，包括进度条颜色、进度条滑块样式、进度条最大值和最小值等。
实现音频进度条的更新使用uniapp中的setinterval函数来更新进度条的位置，根据当前播放时间和总播放时间计算出当前进度条位置。
实现进度条的拖动功能当用户拖动进度条时，可以使用slider的@change事件来获取当前拖动的值，并使用audio组件的seek方法跳转到相应的播放位置。
最终代码如下：
<template> <view> <audio :src="audiosrc" @timeupdate="updatetime"></audio> <slider v-model="currenttime" :max="duration" @change="changetime"></slider> </view></template> <script> export default { data() { return { audiosrc: 'your-audio-src', duration: 0, currenttime: 0, timeupdate: null } }, mounted() { this.initaudio() }, methods: { initaudio() { let audio = uni.createinneraudiocontext() audio.src = this.audiosrc audio.ontimeupdate(() => { this.duration = audio.duration this.currenttime = audio.currenttime }) audio.play() this.timeupdate = setinterval(() => { this.currenttime = audio.currenttime }, 500) }, updatetime(e) { this.currenttime = e.detail.currenttime this.duration = e.detail.duration }, changetime(e) { let audio = uni.createinneraudiocontext() audio.src = this.audiosrc audio.seek(e.detail.value) } } }</script><style scoped> .uni-slider-wrapper { height: 8px; border-radius: 4px; background-color: #ccc; } .uni-slider-track { height: 8px; border-radius: 4px; background-color: #1cbbb4; } .uni-slider-thumb { border-radius: 12px; background-color: #1cbbb4; }</style>
这样，我们就可以在uniapp中实现音频进度条的设计，让用户更方便地掌控音频播放的进度。
以上就是uniapp音频进度条怎么做的详细内容。