微信小程序做radio,可以拖动进度条
很简单的一个音乐播放器
data:{
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?gu,
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}}" ></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>
- 上一篇 »微信小程序时间标签与范围联动设计实现
- 下一篇 »微信小程序,制作属于自己的Icon图标