微信小程序自定义音乐进度条的实例代码


Posted in Javascript onAugust 28, 2018

需求:显示音乐播放按钮、可手动拖拽进度条;页面中含多个音乐,播放当前音乐时暂停其他音乐播放。

小程序自带标签 audio

小程序自带的audio标签含固定的样式,且有最小尺寸。目前项目也不含name和author字段,所以放弃audio标签。

实现效果图

微信小程序自定义音乐进度条的实例代码

初始化音乐数据

<text>{{currentProcess}}</text>
<slider bindchange="" bindtouchstart="" bindtouchend="" max="{{totalProcessNum}}" min="0" value="{{currentProcessNum}}" disabled="{{canSlider}}"></slider>
<text>{{totalProcess}}</text>
<image src="{{audioListObj['q'+questionObj.id].imgUrl}}" data-audioId="q{{questionObj.id}}" bindtap="clickPlayAudio"></image> <!-- clickPlayAudio 播放按钮触发事件 -->

src: _this.data.questionObj.audio,
currentProcess: '--:--',//显示 将currentProcessNum处理成时间形式展示
currentProcessNum: 0,//赋值
totalProcess: '--:--',
totalProcessNum: 1,
seek: -1,
imgUrl: '../../images/play.png',
canSlider: false //是否可以滑动,防止加载音乐时 用户滑动进度条

点击播放按钮触发事件

说明:

•因页面中音乐数量较多,所以只有当用户点击播放,再去加载audio文件。

•wx.getBackgroundAudioManager()对象,同一时间只会播放一个audio文件。当重新赋值src时,会切换文件。

•利用onTimeUpdate方法实时更新播放进度。

•onEnded方法处理audio播放完毕后的数据重新初始化事件。

•变量clickPlayAudioFunctionIsRuning用来防止用户连续点击按钮。

const _this = this;
 const _data = _this.data;
 //防止用户点击播放按钮太快
 if (_data.clickPlayAudioFunctionIsRuning){
  return ;
 }
 _this.setData({
  clickPlayAudioFunctionIsRuning: true
 })
 var _obj = _this.data.audioListObj;
 const audioId = $this.currentTarget.dataset.audioid;
 var backgroundAudioManager = wx.getBackgroundAudioManager();
 if (_this.data.audioListObj[audioId].imgUrl == '../../images/play.png'){
  console.log('转换至播放状态')
  //切换所有播放按钮为暂停状态
  for (var j in _this.data.audioListObj) {
  if (j && _this.data.audioListObj[j]) {
   _this.data.audioListObj[j].imgUrl = '../../images/play.png';
  }
  }
  _this.setData({
  audioListObj: _this.data.audioListObj,
  })
  //暂停正在播放音乐
  wx.stopBackgroundAudio();
  _obj[audioId].imgUrl = '../../images/paused.png';
  backgroundAudioManager.title = '测试';
  //设置音乐开始时间
  if (_this.data.audioListObj[audioId].currentProcessNum != 0){
  backgroundAudioManager.startTime = _this.data.audioListObj[audioId].currentProcessNum;
  }
  backgroundAudioManager.src = _this.data.audioListObj[audioId].src;
  _obj[audioId].canSlider = true;
  backgroundAudioManager.play();
  // 背景音频自然播放结束事件
  backgroundAudioManager.onEnded(function () {
  var _obj = _this.data.audioListObj;
  _obj[audioId].imgUrl = '../../images/play.png';
  _obj[audioId].currentProcess = 0;
  _obj[audioId].currentProcessNum = 0;
  _this.setData({
   audioListObj: _obj
  })
  })
  //背景音频播放进度更新事件
  backgroundAudioManager.onTimeUpdate(function (callback) {
  _obj = _this.data.audioListObj;
  //设置总时长
  if (_obj[audioId] && _obj[audioId].totalProcess && (_obj[audioId].totalProcess == '--:--' || _obj[audioId].totalProcess == '00:00')) {
   console.log(_this.formatTime(backgroundAudioManager.duration))
   _obj[audioId].totalProcess = _this.formatTime(backgroundAudioManager.duration);
   _obj[audioId].totalProcessNum = backgroundAudioManager.duration;
   _this.setData({
   audioListObj: _obj
   })
  }
  if (!_this.data.isMovingSlider) {
   //更新进度
   _obj[audioId].currentProcess = _this.formatTime(backgroundAudioManager.currentTime);
   _obj[audioId].currentProcessNum = backgroundAudioManager.currentTime;
   _this.setData({
   audioListObj: _obj
   })
  }
  })
 } else if (_this.data.audioListObj[audioId].imgUrl == '../../images/paused.png'){
  console.log('转换至暂停状态')
  _obj[audioId].imgUrl = '../../images/play.png'
  wx.pauseBackgroundAudio();
  backgroundAudioManager.pause();
 }
 _this.setData({
  audioListObj: _obj,
  clickPlayAudioFunctionIsRuning: false
 })

滑动进度条触发事件

const _this = this;
 const _data = _this.data;
 const _obj = _this.data.audioListObj;
 const position = $this.detail.value;
 const audioId = $this.currentTarget.dataset.audioid;
 var backgroundAudioManager = app.globalData.bgAudioListManager;
  _obj[audioId].currentProcess = _this.formatTime(position);
  _obj[audioId].currentProcessNum = position;

  //如果正在播放
  if (_obj[audioId].imgUrl == '../../images/paused.png'){
  _obj[audioId].seek = position;
  if (_obj[audioId].seek != -1) {
   wx.seekBackgroundAudio({
   position: Math.floor(position),
   })
   _obj[audioId].seek = -1;
  }
  }
  _this.setData({
  audioListObj: _obj
  })

开始滑动触发事件

this.setData({
  isMovingSlider: true
 });

结束滑动触发事件

this.setData({
  isMovingSlider: false
 });

总结

以上所述是小编给大家介绍的微信小程序自定义音乐进度条的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 拖拉缩放效果
Dec 10 Javascript
Javascript 学习笔记 错误处理
Jul 30 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
vue下载二进制流图片操作
Oct 26 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
JavaScript模拟实现自由落体效果
Aug 28 #Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 #Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 #Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 #Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 #Javascript
微信小程序多音频播放进度条问题
Aug 28 #Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 #Javascript
You might like
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
Vue渲染函数详解
2017/09/15 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
python实现字符串和字典的转换
2018/09/29 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
python内置模块collections知识点总结
2019/12/19 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
建筑施工实习自我鉴定
2013/09/19 职场文书
周年庆典主持词
2014/04/02 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
门店业绩提升方案
2014/06/08 职场文书
反对邪教标语
2014/06/30 职场文书
毕业生工作求职信
2014/06/30 职场文书
运动会演讲稿300字
2014/08/25 职场文书
户籍证明书标准模板
2014/09/10 职场文书
完整版商业计划书
2014/09/15 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书