【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 条评论
登录 后参与评论

相关文章

来自专栏小狼的世界

em是否到了退出的时候

今天看到 YUI CSS 框架中的时,看到用了其用来表示宽度的时候,很多地方都用了 em,在调整字体大小的时候,用了百分比。官方的说法是这样的:

7720
来自专栏前端知识分享

第131天:移动web页面的排版与布局

html{  font-size:1mm;  }  .titleheight{  height:10rem; //这里等于10mm  width:11rem; ...

32210
来自专栏GreenLeaves

CSS-DOM介绍

三位一体的网页: 我们在浏览器里看到的网页其实是由以下三层信息构成的一个共同体: 1、结构层: 结构层是由HTML和XHTML之类的标记语言所构成的。所就是哪些...

19680
来自专栏我和未来有约会

用silverlight做动画-相机

用silverlight做动画-相机 适合初学者学习 做一个相机的动画 和做flash动画一样,准备好素材 将素材放入项目中 开始正式制作前为了方便以后重用,...

29040
来自专栏marsggbo

响应式布局简说

简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上,屏幕比较宽,就可以一行放2个Div。 到了手机上,或者Pad竖着拿的的时候,一行就...

22460
来自专栏xiaoxi666的专栏

博客开通(附本博客样式)

博客于今日开通,在这网络资源日益丰富的年代,曾经在这里得到了许多宝贵的资料以及众多经验。想想也该到了分享心得的阶段了,顺便记录下成长的经历,共勉。

20450
来自专栏九彩拼盘的叨叨叨

前端文章收藏

15120
来自专栏Android开发实战

Android自定义View系列 (从小白做起) 二: 相知

上一章节中,主要介绍了三个主要成分 1.LayoutInflater.inflate()的参数及其用法 2.四种构造函数的说明,以及使用的地方 3.工具Pain...

12930
来自专栏狮乐园

HTML is about meaning

HTML标签本身的意义是为了传递对于一个document元素的含义,所以再考虑使用正确的标签表达内容之前,考虑你的网页看起来怎么样为时过早,请将注意力集中到每一...

13230
来自专栏Android干货

浅谈GridLayout(网格布局)

42490

扫码关注云+社区

领取腾讯云代金券