7-11 播放器播放时间获取和更新
1.audio 有一个 ontimeupdate事件 播放过程中 随时触发
vue里面就是 @timeupdate 事件中有默认参数 e 通过e.target 能获得当前dom
2. audio 有个属性 currentTime 表示当前播放时间 也可赋值去改变播放当前位置
3. 或零 = Math.floor 都是向下取整
计算时间搓为几分几秒
7-12 播放器progress-bar进度条组件实现(中)
值得注意的事 自定义
滑动 button时 需要 前置变量 用来判断当前点击是否是在button上面 如果不是按钮上面便不执行 这个条件可以屏蔽上面的监听 一个是自动 一个是手动
touchend 中前置变量需要重置 通过touch事件来定位滚动条长度 至于音频播放进度的同步 会派发percentChange
touchend事件 中 通过滑动 派发 percentChange 事件 派发出 百分比 给player.vue 通过总时长*百分比 赋值给audio的 currentTime属性 定位播放进度
7-12 播放器progress-bar进度条组件实现(下)
点击进度条背景
总结 : 从player.vue中传入 progress-bar.vue中的百分比 为当前时长/总时长 (自动 偏移量)
从progress-bar.vue中传入 player.vue 为 当前偏移量/总长度 百分比(手动偏移量)
然后在 player.vue中 用总时长*百分比 = 当前时长 只要监听 当前时长就可再次返回给 progress-bar.vue 百分比 (自动偏移量)
在拖动进度条的过程中 要禁止自动偏移量