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


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 相关文章推荐
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
angular十大常见问题
Mar 07 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 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
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
PHP中的表达式简述
2016/05/29 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
跟老齐学Python之list和str比较
2014/09/20 Python
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
幼儿园国庆节活动方案
2014/02/01 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书