很简单的一个音乐播放器
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>