html-audio标签样式重写思路

https://github.com/1014156094/vue-audio-player/blob/master/packages/index.vue
有个大bug, 播放断断续续的,可能是通过进度条计算的时候有错误, 然后就又参考上面这个库写的.


搭配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样式的重写

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值