.wxml:<!– 播放区域 –> <view class=’play-area’> <!– <view class=’play-line’> –> <view class=’play-line-time1′>{{now_time?now_time:’00:00′}}</view> <slider class=’play-line-slider’ bindchange=”listenerSlider” block-size=”15″ value=”{{slider_value}}” activeColor=”#1a94e1″ backgroundColor=”#d5d5d5″/> <view class=’play-line-time2′>{{AudioDetail.audio_length}}</view> <!– </view> –> </view>.js:const innerAudioContext = wx.createInnerAudioContext();//创建音频容器Page({ /** * 页面的初始数据 */ data: { slider_value: 0//设置初始滑块位置为0 }, /** * 生命周期函数–监听页面加载 */ onLoad: function (options) { this.setData({ slider_value: 0, now_time: 0 }); innerAudioContext.seek(0);//设置音频初始位置为0 this.getAudioDetail();//获取一品 this.audioListen(); }, /** * 生命周期函数–监听页面卸载 */ onUnload: function () { innerAudioContext.pause();//退出页面时,暂停音频 }, /** * 监听slider */ listenerSlider: function (e) { //获取滑动后的值 console.log(e.detail.value); var per = e.detail.value / 100; var long = per * this.data.audio_length; this.setData({ now_time: util.formatSeconds2(long) }) innerAudioContext.seek(long);//通过滑块控制音频进度 }, /** * 获取音频详情 */ getAudioDetail: function () { var that = this; util.ajax({ url: util.getApiUrl(“xiaoe/getAudioDetail”), data: { resource_id: that.data.res_id } }, function (data) { innerAudioContext.src = data.audio_url; innerAudioContext.autoplay = true; innerAudioContext.play(); that.setData({ audio_length: data.audio_length//设置音频总时长 }); data.audio_length = util.formatSeconds2(data.audio_length); that.setData({ AudioDetail: data }); }, this); }, /** * 监控音频进度 */ audioListen: function () { var that = this; innerAudioContext.onPlay(() => { console.log(‘开始播放’) }) //必须先执行onPlay方法,才能继续执行onTimeUpdate方法 innerAudioContext.onTimeUpdate(function (res) { var per = (innerAudioContext.currentTime / innerAudioContext.duration) * 100;//获取当前播放时间所对应的slider位置 that.setData({ slider_value: per,//设置slider滑块所在位置 now_time: util.formatSeconds2(innerAudioContext.currentTime)//获得的值是秒,需要转换成分钟 }) }) }})微信小程序
微信小程序:slider插件与音频的联动
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序:slider插件与音频的联动
最新评论
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务
优秀的团队
好服务,值得信赖
不错的服务