微信小程序做radio，可以拖动进度条

很简单的一个音乐播放器

data:{

src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',

currentTime: 0,

duration: 0,

result: '00:00',

isOpen:false,/**是否播放 */

}

onLoad: function (e) {

// 使用 wx.createAudioContext 获取 audio 上下文 context

this.audioCtx = wx.createAudioContext('myAudio')

var that=this;

wx.setNavigationBarTitle({

title: that.data.name

});

},

audioPlay: function () {

this.audioCtx.play()

this.setData({

isOpen: true

})

},

audioPause: function () {

this.audioCtx.pause()

this.setData({

isOpen: false

})

},

 

updata(e) {

var that = this;

// console.log((e.detail.currentTime / 100).toFixed(2))

let duration = e.detail.duration.toFixed(2) * 100,

currentTime = e.detail.currentTime.toFixed(2) * 100;

that.setData({

duration: duration,

currentTime: currentTime

})

that.formatSeconds(currentTime / 100);

},

sliderChange(e) {

var that = this

that.setData({

currentTime: e.detail.value

})

that.audioSeek(e.detail.value)

},

audioSeek: function (currentTime) {

this.audioCtx.seek(currentTime / 100)

},

 

wxml

 

<audio src="{{src}}" id="myAudio" bindtimeupdate="updata"></audio>

<view class="progress">

<text>{{result}}</text>

<slider bindchange="sliderChange" step="2" value="{{currentTime}}" max="{{duration}}" class="slider" selected-color="#ff5e5e"/>

<text>{{times}}</text>

</view>

<view class="audioOpen" bindtap="audioPlay" wx:if="{{!isOpen}}">

<image src="../../../../style/images/icon28.png"/>

</view>

<view class="audioOpen" bindtap="audioPause" wx:if="{{isOpen}}">

<image src="../../../../style/images/icon31.png"/>

</view>