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


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 Tab 导航插件 (23个)
Jun 11 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
jquery操作select大全
Apr 25 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
微信小程序接入腾讯云验证码的方法步骤
Jan 07 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中函数rand和mt_rand的区别比较
2012/12/26 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
详解javascript replace高级用法
2019/02/17 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
layer.prompt输入层的例子
2019/09/24 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
python连接数据库的方法
2017/10/19 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
Python面向对象之继承代码详解
2018/01/29 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
《沉香救母》教学反思
2014/04/19 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
应届毕业生自荐信
2015/03/04 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python