怎么在微信小程序上制作一个音乐播放器？
这篇文章是教大家怎么微信在小程序上制作一个音乐播放器? 教程简单易学，有需要的小伙伴就赶紧和小编一起来学习一下吧。
效果图:
关键代码
暂停/播放
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)
},
以上就是怎么微信在小程序上制作一个音乐播放器?的全部内容了，大家都学会了吗?
- 怎么在AutoCAD中查看全部的内容？
- 别弃我2026-08-03 00:31:12
- 如何在AutoCAD中选框选图形？在AutoCAD中选框选图形的方法
- 栗子2026-08-03 00:31:10
- 如何在AutoCAD中画箭头符号？
- 对味2026-08-03 00:30:52
- 怎么在AutoCAD中绘制三维立体室内图？
- 别认怂2026-08-03 00:30:48
- 怎么给AutoCAD中的3d图形填充颜色？
- 花心症2026-08-03 00:30:42
- 如何解决AutoCAD启动很慢的问题？
- 凉人心2026-08-03 00:30:38
- QQMac版如何修改备注？QQMac版修改备注的方法
- 留井2026-08-03 00:30:35
- QQ手机版怎么取消个性签名与空间同步？
- 何必等2026-08-03 00:30:31
- 如何在AutoCAD中设置底图？AutoCAD设置底图的方法
- 阑珊2026-08-03 00:30:31
- QQ手机版如何设置井柏然字体？设置井柏然字体的方法
- 棼谷2026-08-03 00:30:28
