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

完成!

相关文章
|
2月前
|
移动开发 监控 小程序
mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
27 0
|
2月前
文字转语音后的音频结束以后,再播放一段时间的背景音乐。什么方案能实现
【2月更文挑战第13天】文字转语音后的音频结束以后,再播放一段时间的背景音乐。什么方案能实现
16 2
|
5月前
uniapp制作录音播放功能
uniapp制作录音播放功能
75 0
|
5月前
|
XML Java 调度
Android开发音效增强中铃声播放Ringtone及声音池调度SoundPool的讲解及实战(超详细 附源码)
Android开发音效增强中铃声播放Ringtone及声音池调度SoundPool的讲解及实战(超详细 附源码)
61 0
|
11月前
|
小程序 API UED
微信小程序|音频音乐播放控制
微信小程序|音频音乐播放控制
288 0
|
移动开发 前端开发
【H5 音乐播放实例】第三节 音乐详情页制作(3)
【H5 音乐播放实例】第三节 音乐详情页制作(3)
|
移动开发 前端开发 容器
【H5 音乐播放实例】第二节 音乐详情页制作(2)
【H5 音乐播放实例】第二节 音乐详情页制作(2)
|
12月前
|
移动开发 前端开发
【H5 音乐播放实例】第五节 音轨制作
【H5 音乐播放实例】第五节 音轨制作
101 0
|
移动开发 前端开发 JavaScript
【H5 音乐播放实例】第一节 音乐详情页制作(1)
【H5 音乐播放实例】第一节 音乐详情页制作(1)