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

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

小程序自带标签 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
 });

总结

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

时间: 2018-08-28

微信小程序自定义组件实现环形进度条

本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下 微信小程序自定义组件官方教程 环形进度条的组件已经放在github上 环形进度条效果图 创建步骤 1.在根目录创建名为components的文件夹,用来放需要引用的自定义组件. 2.创建名为canvas-ring的文件夹,用来放环形进度条自定义组件. 3.鼠标指着canvas-ring的文件夹 鼠标右键 "新建 Component" 取名canvas-ring. 结构图: 环形进度条组件的代码 canva

微信小程序实现实时圆形进度条的方法示例

前言 最近工作中为了做一个录制按钮,研究了下小程序的实时圆形进度条实现,下面这篇文章就来给大家详细的介绍了实现的方法示例,废话不多说,先来看看效果图吧. 效果图如下 初始状态 点击中间按钮开始绘制 绘制过程 绘制结束 实现思路 建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条. WXML代码 <view class="wrap"> <view class="circle-box"> <canvas class

微信小程序实现下载进度条的方法

我们经常会在APP下载中看到下载进度条,这个进度条是为了和用户交互,告知用户当前的进度,不然让用户一直处于等待,用户等超过1分钟就会崩溃的,今天代码君就教大家如何在小程序中也制作下载进度条 progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress属性介绍 属性名 作用 参数值 percent 进度百分比0~100 show-info 在进度条右侧显示百分比 true/false 默认false active 进度条从左往右的动画 true/false

微信小程序实现圆形进度条动画

本文实例为大家分享了微信小程序动画之圆形进度条,供大家参考,具体内容如下 上图: 代码: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanvasContext('canvasArcCir'); Page({ data: { }, drawCircle: function () { clearInterval(varName); function drawArc(s, e) { ctx

微信小程序多音频播放进度条问题

真的脑子疼,小程序的音频组件居然没有进度控制的功能,网上的方法又很少,逻辑通了就好写了. 1.所有音频播放.停止按钮使用状态切换控制 2.当点击某个音频播放时,首先将所有音频的状态置为停止状态,然后将当前音频置为播放状态 3.滚动条插件配合音频控件一起使用 4.播放状态时滚动条的长度随音频进度变化而变化,时间也要显示 5.拖动滚动条时,音频的当前时间随滚动条变化而变化 1.wxml <text class="left_text">{{item.currentProcess}

微信小程序实现原生步骤条

本文实例为大家分享了微信小程序实现原生步骤条的具体代码,供大家参考,具体内容如下 效果 (步骤条颜色不对是录制工具的问题) 思路 其实与轮播图类似,使用了两个并排的轮播容器,在滑动监听后,给图片加上移动和缩放动画. 扩展 可以用于标签页的切换. vue与微信小程序有类似的地方,所以微信小程序做出的效果,原理也可用于vue在网页上的应用. 代码 wxml <view class='window'> <view class='content' bindtouchstart='touchS'

微信小程序画布圆形进度条显示效果

本文实例为大家分享了微信小程序画布圆形进度条展示的具体代码,供大家参考,具体内容如下 效果图: 代码: wxml <!--pages/test/test.wxml--> <canvas style="width: 300px; height: 200px;" canvas-id="canvasid"></canvas> js // pages/test/test.js var context = new wx.createCanv

详解微信小程序——自定义圆形进度条

微信小程序 自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 }, onReady: function () { // 页面渲染完成 var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文con

微信小程序之圆形进度条实现思路

需求概要 小程序中使用圆形倒计时,效果图: 思路 使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval让彩色圆环逐步绘制. 解决方案 第一步先写结构 一个盒子包裹2个canvas以及文字盒子: 盒子使用相对定位作为父级,flex布局,设置居中: 一个canvas,使用绝对定位作为背景,canvas-id="canvasProgressbg" 另一个canvas,使用相对定位作为进度条,canvas-id="canvasProgress"

微信小程序实现时间进度条功能

关于答题类,或者一些游戏环节的小程序需要用到时间进度条,该功能怎么实现?看下面源码 <view class='out' style='margin-top:10px'> <view class='in' style='width:{{progressWidth}}%'></view> </view> <view class='caozuo'> <text>{{progressTime}}秒</text> <text

微信小程序实现流程进度的图样式功能

最近正在做微信小程序,需要实现一个流程进度的图样式如下面 需求: 没完成的灰色小圆点表示 完成的使用蓝色小圆点设置 当前状态使用有外圈的小圆点表示 实现起来比较简单,实现思路,使用一个列表实现,列表中的每一个item的样式如下图 使用win10画板画的不好看 图上的意思就是每个item 前面有一段线条 中间是个圆圈然后后面有一段线条.之所以这样是因为下面的文字需要居中显示在圆圈的下面.如果不需要文字的话可以一个圆圈后面跟一条直线会更简单一点. 按照上面的图片,html布局为下面 <view cl

微信小程序 配置顶部导航条标题颜色的实现方法

微信小程序 配置顶部导航条标题颜色的实现方法 关于小程序导航顶部配置都写在.json文件中. { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "bac