在课堂基础上拓展了一个功能 进度条可以通过点击事件 变换歌曲播放进度
也就是鼠标点在进度条哪里,进度条就会到哪里,然后歌曲的播放时间也会对应的到这里。
其他代码跟老师的一样 只是在监听事件后面拓展了一个鼠标在进度条按下的时候的一个监听函数
代码如下:
//实现可以点击变换歌曲进度的进度条
//设置一个鼠标按下去的监听
//jin-du-tiao-passed 这个类对应的是 进度条底层的那个 监听鼠标在底层的进读条按下的时候
$('#jin-du-tiao').mousedown(
function (e) {
// console.log('鼠标按下了');
//获得鼠标按下的坐标
// console.log(e.pageX - $('#jin-du-tiao').offset().left);
var chang_du=e.pageX - $('#jin-du-tiao').offset().left;
//把这个值变成百分比
// console.log(chang_du/910);
//设置鼠标属性的长度等于我们点击的这个值
$('.jin-du-tiao-passed').width((chang_du/910)*100 + '%')
//现在在来解决播放时间的问题
//播放时长的百分比要等于我这百分比
// chang_du/910 这个是0到100的百分比
//audio.currentTime 这个是当前的秒数 假如歌曲是275秒
// 总秒数*百分比 就是他的百分比 让这个当前播放事件等于这个百分比 也就是ok了
audio.currentTime=totalTime*(chang_du/910);
// console.log(audio.currentTime); //这个是秒数 看看对不对 结果ok
}
)
感觉这个思路下 添加一个快进快退的按钮 来控制歌曲播放进度也可以实现了