微信小程序：slider插件与音频的联动

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