专栏首页web编程技术分享【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停

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

音乐的播放和暂停

在播放按钮的点击事件里,不能手动去设置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) + "%" ;

    }

}

完成!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js常用方法和一些封装(1)1.字符串相关2.数组相关

    剽悍一小兔
  • very-easyUI 框架快速上手文档

    这是我自己闲暇之余封装的一个工具,当然还有一大堆BUG,但是对于自己接接小活还是挺方便的,分享出来。后面会慢慢持续更新。

    剽悍一小兔
  • JavaScript: 零基础轻松学闭包(2)

    剽悍一小兔
  • 编写地道的Go代码

    作者:iCaptain 链接:https://www.jianshu.com/p/29543b642485 來源:简书

    追马
  • Go 语言并发编程系列(十二)—— sync 包系列:原子操作

    我们在前两篇教程中讨论了互斥锁、读写锁以及基于它们的条件变量。互斥锁是一个同步工具,它可以保证每一时刻进入临界区的协程只有一个;读写锁对共享资源的写操作和读操作...

    学院君
  • Java程序员面试失败的5大原因

    下面是Java程序员面试失败最有可能的5大原因,当然也许这5点原因适用于所有的程序员,所以,如果你是程序员,请认真阅读以下内容。

    哲洛不闹
  • 面试官问你“有什么问题问我吗?”,你该如何回答?

    我还记得当时我去参加面试的时候,几乎每一场面试,特别是HR面和高管面的时候,面试官总是会在结尾问我:“问了你这么多问题了,你有什么问题问我吗?”。这个时候很多人...

    乔戈里
  • 面试官问你“有什么问题问我吗?”,你该如何回答?

    我还记得当时我去参加面试的时候,几乎每一场面试,特别是HR面和高管面的时候,面试官总是会在结尾问我:“问了你这么多问题了,你有什么问题问我吗?”。这个时候很多人...

    乔戈里
  • Java程序员面试失败的5大原因

    下面是Java程序员面试失败最有可能的5大原因,当然也许这5点原因适用于所有的程序员,所以,如果你是程序员,请认真阅读以下内容。

    Java团长
  • 【专业技术】Java面试技巧

    下面是Java程序员面试失败最有可能的5大原因,当然也许这5点原因适用于所有的程序员,所以,如果你是程序员,请认真阅读以下内容。 ? #1 说得太少 尤其是那些...

    程序员互动联盟

扫码关注云+社区

领取腾讯云代金券