说说怎么在微信小程序上制作一个音乐播放器。

这篇文章是教大家怎么微信在小程序上制作一个音乐播放器? 教程简单易学,有需要的小伙伴就赶紧和酷牛教程小编一起来学习一下吧。

效果图:

在微信小程序上如何实现一个音乐播放器的制作呢?

关键代码

暂停/播放

playAndPause: function () {

var that = this

if (that.data.isPlaying) {

wx.pauseBackgroundAudio()

} else {

wx.playBackgroundAudio()

}

that.playSong()

that.setData({

isPlaying: !that.data.isPlaying

})

},

上一首

before: function () {

var that = this

that.setData({

currentIndex: 0,

marginTop: 0,

lrcHeight:200,

})

if (that.data.songIndex == 0) {

that.requestDataSong(that.data.datalist[that.data.datalist.length - 1].song_id)that.songLrc(that.data.datalist[that.data.datalist.length - 1].song_id)that.setData({songIndex: that.data.datalist.length - 1

})

} else {

that.requestDataSong(that.data.datalist[that.data.songIndex - 1].song_id)that.songLrc(that.data.datalist[that.data.songIndex - 1].song_id)that.setData({songIndex: that.data.songIndex - 1

})

}

},

歌曲播放

playSong: function () {

var that = this

let inv = setInterval(function () {

wx.getBackgroundAudioPlayerState({

success: function (res) {

if (res.status == 1) {

that.setData({

isPlaying: true,

songState: {

progress: res.currentPosition / res.duration * 100,currentPosition: that.timeToString(res.currentPosition),duration: that.timeToString(res.duration),}

})

var i = that.data.currentIndex

if (i < that.data.lry.length) {

if (res.currentPosition - 4 >= parseInt(that.data.lry[0])) {that.setData({currentIndex: i + 1

})

}

}

if (that.data.currentIndex >= 6) {

that.setData({

marginTop: -(that.data.currentIndex - 6) * 20,lrcHeight:200 + (that.data.currentIndex - 6) * 20})}

} else {

that.setData({

isPlaying: false

})

clearInterval(inv)

}

}

})

}, 1000)

},

以上就是怎么微信在小程序上制作一个音乐播放器?的全部内容了,大家都学会了吗?

本文来自投稿,不代表酷牛教程立场,如若转载,请注明出处:https://www.xukn.com/97458.html

(0)
上一篇 2019-08-22 10:26
下一篇 2019-08-22 10:53

相关推荐