.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)//获得的值是秒，需要转换成分钟 }) }) }
})微信小程序
