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

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

##音乐的播放和暂停

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

0.png

改写playMusic方法:

1.png


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

##进度条

效果:

2.png

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

3.png

4.png

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

4.png

代码:

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

完成!

相关文章
|
9月前
技术经验分享:AVFoundation播放视频时显示字幕,切换音轨
技术经验分享:AVFoundation播放视频时显示字幕,切换音轨
63 0
|
10月前
文字转语音后的音频结束以后,再播放一段时间的背景音乐。什么方案能实现
【2月更文挑战第13天】文字转语音后的音频结束以后,再播放一段时间的背景音乐。什么方案能实现
100 2
|
10月前
uniapp制作录音播放功能
uniapp制作录音播放功能
291 0
|
10月前
|
XML Java 调度
Android开发音效增强中铃声播放Ringtone及声音池调度SoundPool的讲解及实战(超详细 附源码)
Android开发音效增强中铃声播放Ringtone及声音池调度SoundPool的讲解及实战(超详细 附源码)
426 0
LabVIEW播放提示声音或者音乐
使用LabVIEW播放提示声音或者音乐,可在LabVIEW中右键鼠标:函数→声音→输出,选择相应的函数,如下图所示:
|
移动开发 前端开发
【H5 音乐播放实例】第三节 音乐详情页制作(3)
【H5 音乐播放实例】第三节 音乐详情页制作(3)
108 0
|
移动开发 前端开发 容器
【H5 音乐播放实例】第二节 音乐详情页制作(2)
【H5 音乐播放实例】第二节 音乐详情页制作(2)
|
移动开发 前端开发 JavaScript
【H5 音乐播放实例】第一节 音乐详情页制作(1)
【H5 音乐播放实例】第一节 音乐详情页制作(1)
167 0
|
移动开发 前端开发
【H5 音乐播放实例】第五节 音轨制作
【H5 音乐播放实例】第五节 音轨制作
143 0

热门文章

最新文章