找回密码
 立即注册

扫一扫,访问微社区

查看: 15952|回复: 33

音乐视屏播放,歌词展示,暂停/播放/上一首/下一首

 火... [复制链接]
发表于 2017-3-17 12:51:27 | 显示全部楼层 |阅读模式
年前写的demo,年假家里没有网,就放下了..回来这几天抓紧时间完善了下.分享给大家哦,(歌词动态展示待优化),还有电台那里的接口暂时没有找到.找到后我再添加上去,新的一年,大家一起努力哦!,新年第一帖undefined主要功能: 歌曲暂停播放,上一首,下一首,当前歌曲播放完成后自动播放下一首,歌词动态展示
效果图:


关键代码
暂停/播放


[mw_shl_code=html,true]playAndPause: function () {
   var that = this
   if (that.data.isPlaying) {
     wx.pauseBackgroundAudio()
   } else {
     wx.playBackgroundAudio()
   }
   that.playSong()
   that.setData({
     isPlaying: !that.data.isPlaying
   })
},[/mw_shl_code]


上一首
[mw_shl_code=html,true]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
    })
  }
},[/mw_shl_code]

歌曲播放

[mw_shl_code=html,true]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)
  },[/mw_shl_code]


游客,如果您要查看本帖隐藏内容请回复

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

0

主题

3

回帖

30

金钱

新人求带

积分
0
发表于 2017-4-7 20:10:38 | 显示全部楼层
正需要,支持楼主大人了!

0

主题

8

回帖

18

金钱

新人求带

积分
0
发表于 2017-4-18 10:16:04 | 显示全部楼层
这个赞,稳,赞一个

0

主题

4

回帖

24

金钱

新人求带

积分
0
发表于 2017-4-22 03:05:19 | 显示全部楼层
正需要,支持楼主大人了!

0

主题

3

回帖

17

金钱

新人求带

积分
0
发表于 2017-9-22 21:58:55 | 显示全部楼层
嗯,很不错
回复

使用道具 举报

0

主题

7

回帖

38

金钱

新人求带

积分
0
发表于 2017-12-29 10:32:33 | 显示全部楼层
啥也不说了,感谢楼主分享哇!

0

主题

3

回帖

24

金钱

新人求带

积分
0
发表于 2018-4-29 01:15:41 | 显示全部楼层
6666666666666666666666666

0

主题

39

回帖

140

金钱

新人求带

积分
0
发表于 2018-4-29 09:34:36 | 显示全部楼层
支持一下
回复

使用道具 举报

0

主题

22

回帖

22

金钱

新人求带

积分
0
发表于 2018-8-11 21:03:20 | 显示全部楼层
vgggggggggggggggggggggggggggggggg

0

主题

15

回帖

40

金钱

新人求带

积分
0
发表于 2018-10-23 12:02:41 | 显示全部楼层

正需要,支持楼主大人了!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1  

GMT+8, 2024-4-24 12:30 , Processed in 0.139290 second(s), 31 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表