会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 128425个问题
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 1楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 3楼


在课堂基础上拓展了一个功能  进度条可以通过点击事件 变换歌曲播放进度

也就是鼠标点在进度条哪里,进度条就会到哪里,然后歌曲的播放时间也会对应的到这里。


其他代码跟老师的一样  只是在监听事件后面拓展了一个鼠标在进度条按下的时候的一个监听函数 

代码如下:

            //实现可以点击变换歌曲进度的进度条
            //设置一个鼠标按下去的监听
             //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
                }
            )




image.png



感觉这个思路下 添加一个快进快退的按钮 来控制歌曲播放进度也可以实现了

image.png

WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 4楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 5楼

2023-04-13.png2023-04-13.png

WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 7楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 8楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 9楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 10楼

image.png

WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 11楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 12楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 13楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 14楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 15楼

百战程序员微信公众号

百战程序员微信小程序

©2014-2024 百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637