uniapp播放音乐更新进度条、拖动进度条更新音乐进度

首先使用的是uniapp的uni.createInnerAudioContext() 和 进度条组件<slider>

<template>
  <view>
		<view>{{ currentTime }}</view>
		 <slider v-model="sliderValue" @change="onSliderChange" max="100" style="width: 80%;" :block-size='blockSize' block-color='#A2ABAA' activeColor='#19C590'></slider>
		<view>{{ duration }}</view>
		<button @click="startAudio()">开始播放</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      duration: '',
	  currentTime: '',
	   juuaa: null, // 将 juuaa 声明在 data 中以便在多个方法中使用
	   intervalIDqw: null,
	   sliderValue: 0,
	   blockSize: 12, // 滑块大小
    };
  },
	onReady(){
		
		// ------------------------------
			this.juuaa = uni.createInnerAudioContext()
			this.juuaa.src = 'https://www.xmhigame.com/static/uploads/s54/out-4252dac2792c5f48628dfa25e51e6ae5.mp3'
			console.log('播放器：',this.juuaa)
			
			this.juuaa.onCanplay(() => {
			    let intervalID = setInterval(() => {
			      if (this.juuaa.duration !== 0) {
			        clearInterval(intervalID);
					this.duration = this.formatTime(this.juuaa.duration) // 总时长
					this.currentTime = this.formatTime(this.juuaa.currentTime) // 当前时长
					console.log("当前时长", this.currentTime)
			        console.log("音频时长", this.duration);
					if(this.currentTime === this.duration){
						// this.currentTime = 0
						clearInterval(intervalID);
					}
			      }
			    }, 500);
			})
			
			  this.juuaa.onTimeUpdate(() => {
			      this.currentTime = this.formatTime(this.juuaa.currentTime);
			      if (!this.dragging) { // 避免拖动滑块时自动更新
			             this.sliderValue = (this.juuaa.currentTime / this.juuaa.duration) * 100;
			           }
			    })
			
			
			
	},
	methods:{
		startAudio() {
		  if (this.juuaa) {
		    this.juuaa.play(); // 开始播放音频
		  }
		  let intervalIDs = setInterval(() => {
		    if (this.juuaa.duration !== 0) {
		      // clearInterval(intervalID);
		  	this.duration = this.formatTime(this.juuaa.duration) // 总时长
		  	this.currentTime = this.formatTime(this.juuaa.currentTime) // 当前时长
		  	console.log("当前时长", this.currentTime)
		      console.log("音频时长", this.duration);
		  	if(this.currentTime === this.duration){
		  		// this.currentTime = 0
		  		clearInterval(intervalIDs);
		  	}
		    }
		  }, 500);
		    // 启动定时器，每秒更新一次进度条位置
		          this.intervalIDqw = setInterval(() => {
		            if (this.juuaa.duration > 0) {
		              this.sliderValue = (this.juuaa.currentTime / this.juuaa.duration) * 100;
		            }
		          }, 1000);
		  
		},
		// 格式化时间的函数，将秒转换为分:秒格式
		formatTime(seconds) {
		  const minutes = Math.floor(seconds / 60);
		  const remainingSeconds = Math.floor(seconds % 60);
		  return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
		},
		
		
		onSliderChange(event) {
			const value = event.detail.value;
		  if (this.juuaa && this.juuaa.duration > 0) {
		    // 验证 value 是否是有效的百分比值（0-100之间）
		    if (isNaN(value) || value < 0 || value > 100) {
		      console.error("Invalid value:", value);
		      return;
		    }
		
		    // 计算新的位置
		    const newPosition = (value / 100) * this.juuaa.duration;
		
		    // 验证 newPosition 是否是有效的数字，不是 NaN，并且在有效范围内
		    if (!isNaN(newPosition) && newPosition >= 0 && newPosition <= this.juuaa.duration) {
		      // 设置音频播放位置
		      this.juuaa.seek(newPosition);
		      console.log("Seeking to position:", newPosition);
		      if (!this.dragging) { // 避免拖动滑块时自动更新
		        this.sliderValue = value;
		      }
		    } else {
		      console.error("Invalid newPosition:", newPosition);
		    }
		  }
		}





	}
}
</script>