<audio/>标签样式修改
修改原因:
不同手机展示的样式不同,特别是IOS 和安卓区别很大,需要统一样式。
修改后样式:
修改理解:
1>“点击播放”和"点击暂停" 调用原生audio.play() 和 audio.pause()来对进度条进行操作
2>总时长加载:解析 audio.duration 来获取总时长,会有部分浏览器兼容问题,下面列举部分兼容方式。
3>点击跳转进度:获取当前的 鼠标点击位置【e.pageX】 - 进度条.offsetLeft【相对于它的直接父元素 的 偏移量】,使用 translateX 改变 “蓝色小球”的播放进度位置。
4>拖拽跳转进度:监听 onTouchStart 、 onTouchMove 和 onTouchEnd
5> 目前缺点:
A.只有点击 进度条 才能跳转进度,建议扩大面积
B.拖拽需要松手的时候才有效果
C.部分 安卓 UC浏览器,不能愉快的加载时间,只能点击播放才能加载【已经做了其他的兼容】
核心代码:
转换音频时长显示
/**
* 工具类
*/
//转换音频时长显示
transTime(time) {
let duration = parseInt(time);
let minute = parseInt(duration / 60);
let sec = duration % 60 + '';
let isM0 = ':';
if (minute == 0) {
minute = '00';
} else if (minute < 10) {
minute = '0' + minute;
}
if (sec.length == 1) {
sec = '0' + sec;
}
return minute + isM0 + sec
}
获取视频总长
loadVideo() {
let self = this;
let audio = this.refs.audioTag;
let du