audio样式改造
将整数转换成 时：分：秒的格式
function realFormatSecond(second) {
var secondType = typeof second
if (secondType === 'number' || secondType === 'string') {
second = Math.floor(second)
var hours = Math.floor(second / 3600)
second = second - hours * 3600
var mimute = Math.floor(second / 60)
second = second - mimute * 60
return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
} else {
return '0:00:00'
}
}
audio原生事件和方法
canplaythrough 事件 // 录音准备就绪后触发
ended 事件 // 录音播放结束后触发
loadedmetadata 事件 // 当加载语音流元数据完成后，会触发该事件的回调函数 可以用于获取语音总时长（e.target.duration）
onTimeupdate 事件 // timeupdate事件大概每秒一次，用来更新音频流的当前播放时间 获取当前时间（e.target.currentTime）
play() 方法 // 开始播放音频
pause() 方法 // 暂停播放
muted 属性（布尔值 ） // 是否静音
currentTime 属性 // 当前播放时间
volume 属性 // 当前播放音量
进度条由 element 的 slider滑块组件修改
max 属性 // 进度条总长度
format-tooltip 属性 // 函数类型，可实时返回进度条的value值，用于拖拽进度条时实时获取拖动的值
change 事件 // 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发） 可以用于进度条拖拽或点击后修改音频播放的时间
改造过程：
1.通过 loadedmetadata 事件获取音频总时长，双向绑定展示总时长，给进度条总长度max属性赋值
2.通过 onTimeupdate 事件实时获取当前音频，双向绑定动态修改当前展示的播放时间以及进度条当前值
3.点击或拖拽进度条触发 change 事件，修改进度条当前值，以及audio当前播放时间 （this.$refs.audio.currentTime）
4.音量控制修改同进度条，但是不需要自动改变
遇到问题： 拖拽进度条时会发现一个小bug
当拖动进度停住鼠标延迟大概一秒左右松开，进度会回到原来的位置，而快速拖动和点击进度条则不会出现这个问题
拖动滚动条延迟一小会松开，自动播放绑定的值又会变化一次，导致最后一次变化的值覆盖了原来的值，使用官方的input方法也是一样。
解决方法1：
监听进度条 mouseup 鼠标抬起事件，获取鼠标抬起时的value值，再手动触发进度条的 change 事件来改变当前播放的时间
但是测试后发现频率过大时还是会偶尔出现进度条回弹的bug
解决方法2：
按下鼠标拖动时，将音频停止播放，鼠标抬起时从最新的时间开始播放
