搭配slider 组件 ,利用原生audio的属性和方法重写样式

1. 写个样式.
2. 监听url变化 初始化
3. 绑定播放, 拖动进度条,拖动音量, 静音按钮等事件

const audioRef = ref(null) // 绑定audio标签
const playProcess = ref(0)  // 进度条绑定的值
const volume = ref(1) // 音量绑定的值
const current = ref('00:00') // 当前时间
const duration = ref('00:00')  // 总时间
audioRef.value.loop = false // 关闭循环播放 
load()  // 等音频都加载完了以后，再赋值, 我暂时没有用这个方法
play()
pause()
current
duration
监听 loadedmetadata 监听 赋值duration volume volumeHistory 
监听 timeUpdate 来赋值playProcess 和 current
ended
function play() {
	audioRef.value.play()
	playFlag.value = true // 控制播放icon的切换.
}
// 拖动进度条的回调
function changeProcess() {
	参考文章里面写了三个判断,感觉没必要...
	auidioRef.value.current = auidioRef.value.duration * playProcess.value / 100 从当前位置开始播放
	currentTime.value = formatSecond(auidioRef.value.current)
}

// 音量的change事件的回调
function changleVolume(){
	音量不为0时再保存音量历史(为的是取消静音)
	if(volume.value !== 0) {
		volumeHistory.value = volume.value
	}
	if(volume.value === 0) {
		audioRef.value.volume = 0;
		volumeFlag.value = false  切换静音图标
	} else if(volume.value > 0 && volume.value <= 0) {
		audio.volume = volume.value / 100
		volumeFlag.value = true
	}
}
// 点击静音
切换图标
当前有声音, 录音静音和给slider 赋值 0 
当前静音, 恢复音量和 给slider 赋值 volumeHistory 
注意一下, 音量的最大是1, slider 的最大值是100;

秒转时分秒

// 也可以使用padStart(2, 0) 用来补 0 
 function formatSecond(t) {
        let h = parseInt((t / 60 / 60) % 24)
        h = h < 10 ? '0' + h : h
        let m = parseInt((t / 60) % 60)
        m = m < 10 ? '0' + m : m
        let s = parseInt(t % 60)
        s = s < 10 ? '0' + s : s
        return `${h}:${m}:${s}`
      }
      console.log(formatSecond(6))
      console.log(formatSecond(66))
      console.log(formatSecond(666))
      console.log(formatSecond(66666))

参考

【知识整理】audio样式的重写