音乐app各部分笔记（一）

7-11 播放器播放时间获取和更新

1.audio 有一个 ontimeupdate事件 播放过程中 随时触发 

　　vue里面就是  @timeupdate   事件中有默认参数 e  通过e.target 能获得当前dom

2. audio 有个属性  currentTime 表示当前播放时间  也可赋值去改变播放当前位置

3. 或零 =  Math.floor    都是向下取整

　　计算时间搓为几分几秒

　　

  format(interval){

        interval = interval | 0 //或0 相当于向下取整 Math.floor

        const minute = interval / 60 |0

        const second = (interval % 60) < 10? '0'+  (interval % 60):  (interval % 60); // 当<10 需要补零

        return `${minute}:${second}`

     }

7-12 播放器progress-bar进度条组件实现(上)

　　在player.vue中引入 进度条组件 通过播放中的变量 this.currentTime  / 总时长  (computed 中) 将百分比传给进度条组件 然后进度条就可以通过进度条client长度*百分比得到偏移量 

　　得到偏移量就能监测歌曲播放进度 设置各个偏移量 按钮跟随偏移量

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 百分比 (自动偏移量)

　　　　　在拖动进度条的过程中 要禁止自动偏移量