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


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学习笔记之jQuery的动画
Dec 22 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
vue实现移动端拖动排序
Aug 21 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取整数函数常用的四种方法小结
2012/07/05 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
初识Node.js
2015/03/20 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
python中dir函数用法分析
2015/04/17 Python
Python实现多线程抓取妹子图
2015/08/08 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
大学活动邀请函
2014/01/28 职场文书
七夕情人节促销方案
2014/06/07 职场文书
社团活动总结怎么写
2014/06/30 职场文书
先进班集体申报材料
2014/12/26 职场文书
中秋节主题班会
2015/08/14 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS