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

剽悍一小兔

发布于 2018-07-04 15:38:04

6340

发布于 2018-07-04 15:38:04

文章被收录于专栏：web编程技术分享web编程技术分享

音乐的播放和暂停

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

改写playMusic方法：

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

进度条

效果：

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

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

代码：

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) + "%" ;

    }

}

完成！

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.06.26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

audio