0
点赞
收藏
分享

微信扫一扫

【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停


##音乐的播放和暂停
在播放按钮的点击事件里,不能手动去设置src,这样会导致音乐的暂停无法控制。而应该直接在audio标签内把src写好。

【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停_js

改写playMusic方法:

【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停_canvas_02

当暂停音乐的时候,同时也要把xuanzhuan样式类去掉。

##进度条

效果:

【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停_javascript_03


方法就是在mbox最后面加上一个div,作为进度条:

【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停_js_04


【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停_css_05

通过控制div的width 来显示歌曲的播放进度。

【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停_canvas_06


代码:

window.onload = function(){

//给音乐播放器(audio)添加一个timeupdate时间
document.getElementById("music").ontimeupdate = function(){

var currentTime = Math.floor(this.currentTime); //获取当前时间


var m = parseInt(currentTime / 60);//分钟
var s = parseInt(currentTime % 60);//秒钟
var time = (m<10?("0"+m):m)+":"+(s<10?("0"+s):s); //格式化

//console.log(time); //打印出来看看

// 百分比 = 当前时长 ÷ 总时长 × 100%
var total = this.duration;//总时长
//console.log(currentTime + '=======' + total);
//console.log( Math.floor(currentTime / total * 100) + "%" );


document.getElementsByClassName("progress")[0].style.width = Math.floor(currentTime / total * 100) + "%" ;

}

}

完成!


举报

相关推荐

0 条评论