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


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 相关文章推荐
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
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
汉字转化为拼音(php版)
2006/10/09 PHP
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
Python中用altzone()方法处理时区的教程
2015/05/22 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
Python中模块string.py详解
2017/03/12 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
深入学习python多线程与GIL
2019/08/26 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
公共事业管理本科生求职信
2013/10/07 职场文书
大学生实习思想汇报
2014/01/12 职场文书
网络技术专业推荐信
2014/02/20 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
经销商会议开幕词
2016/03/04 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers