手游百科网 |手游库 |手机版 |网站地图
所在位置:首页 > 资讯教程 > 软件教程 > 详情

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

文章来源:网络作者:忘爱。发布时间:2026-05-23 13:24:20

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

  效果图:

  关键代码

  暂停/播放

  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)

  },

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

GM盒子下载
GM盒子下载

福利:免费送首充,上线送VIP,免费领元宝和代金券 大小: 55M

玩法:GM特权送VIP

相关新闻
同类推荐
最新问答
手游新品榜
热门推荐
魔药杂货铺什么时候出 公测上线时间预告

魔药杂货铺什么时候出 公测上线时...