找回密码
 立即注册

扫一扫,访问微社区

查看: 12294|回复: 20

微信小程序学习用demo推荐:破音万里:音频播放,音乐列表

 火.. [复制链接]
发表于 2017-2-24 17:11:32 | 显示全部楼层 |阅读模式
音频播放常见的:
1:各类循环
2:暂停,继续
3:上一首,下一首





[mw_shl_code=html,true]let bsurl = 'https://poche.fm/api/app/playlists'
var common = require('../../../utils/util.js');

let seek = 0
let defaultdata = {
  winWidth: 0,
  winHeight: 0,
  listHeight: 0,
  // tab切换
  currentTab: 0,
  // 播放列表
  playlists: [],
  tracks: [],
  coverImgUrl: "../../../imgs/icon.jpg",
  nowPlayingTitle:"请选择歌曲",
  nowPlayingArtist: "",
  playing:false,
  playtime: '00:00',
  duration: '00:00',
  percent: 1,
  lrc: [],
  lrcindex: 0,
  showlrc: false,
  disable: false,
  downloadPercent: 0,
  curIndex: 0,
  initial: true,
  shuffle: 1,
  music: {}
}
//获取应用实例
let app = getApp()
Page({
  data: defaultdata,
  onLoad: function(options) {
    var that = this;

    wx.request({
      url: bsurl,
      success: function (res) {
        that.setData({

          listHeight: res.data.length * 230,
          playlists: res.data,
          loadingHide:true
        })
      }
    })
    //获取系统信息
    wx.getSystemInfo( {
      success: function( res ) {
        that.setData( {
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        })
      }
    })
    // 获取上次播放数据
    let index = wx.getStorageSync('curIndex')
    let tracks = wx.getStorageSync('tracks')
    if (tracks) {
      let track = tracks[index]
      that.setData( {
        curIndex: index,
        tracks: tracks,
        coverImgUrl:track.cover,
        nowPlayingArtist: track.artist,
        nowPlayingTitle: track.name,
      })
    }

    //监听停止,自动下一首
    wx.onBackgroundAudioStop(function(){
      that.playnext();
    })

  },
  bindChange: function(e) {
    var that = this;
    that.setData( { currentTab: e.detail.current });
  },
  swichNav: function(e) {
    var that = this;
    if( this.data.currentTab === e.target.dataset.current ) {
      return false;
    } else {
      that.setData( {
        currentTab: e.target.dataset.current
      })
    }
  },
  // 跳转下一页
  tracks: function(event) {
    var index = event.currentTarget.id
    var playlist = this.data.playlists[index]
    var p = playlist.id
    var title = playlist.title
    wx.navigateTo({
        url: '../tracks/index?id=' + p + '&title=' + title
    })
  },
  // 接收点击数据
  changeData: function(tracks, index) {
    var curMusic = tracks[index]
    this.setData({
      curIndex: index,
      tracks: tracks,
      coverImgUrl:curMusic.cover,
      nowPlayingArtist: curMusic.artist,
      nowPlayingTitle: curMusic.name,
      playing: true,
      music: curMusic
    })
    app.globalData.curplay.id = curMusic.id
    //存储当前播放
    wx.setStorageSync("curIndex", index)
    wx.setStorageSync("tracks", tracks)
    app.seekmusic(1)
  },
  //播放方法
  playingtoggle:function(){
    var that = this
    if (this.data.initial) {
      // this.play(this.data.tracks, this.data.curIndex)
      this.setData({
        initial: false
      })
      app.seekmusic(1)
      return
    }
    if (this.data.playing) {
      that.setData({
        playing: false
      })
      app.stopmusic(1)
    } else {
      app.seekmusic(1, function () {
        that.setData({
          playing: true
        })
      }, app.globalData.currentPosition)
    }
  },
  playnext: function (e) {
    if (this.data.initial) {
      this.setData({
        initial: false
      })
    }
    let shuffle = this.data.shuffle
    let count = this.data.tracks.length
    let lastIndex = parseInt(this.data.curIndex)

    if (shuffle == 3) {
      //随机播放
      lastIndex = Math.floor(Math.random() * count)
    } else if (shuffle == 1) {
      if (lastIndex == count - 1) {
        lastIndex = 0
      } else {
        lastIndex = lastIndex + 1
      }
    }
    this.changeData(this.data.tracks, lastIndex)
  },
  playprev: function (e) {
    if (this.data.initial) {
      this.setData({
        initial: false
      })
    }
    let shuffle = this.data.shuffle
    let lastIndex = parseInt(this.data.curIndex)
    let count = this.data.tracks.length
    if (shuffle == 3) {
      //随机播放
      lastIndex = Math.floor(Math.random() * count)
    } else if (shuffle == 1) {
      if (lastIndex == 0) {
        lastIndex = count - 1
      } else {
        lastIndex = lastIndex - 1
      }
    }
    this.changeData(this.data.tracks, lastIndex)
  },
  playshuffle: function() {
    if (this.data.shuffle == 1) {
      this.setData({
        shuffle: 2
      })
      return
    }
    if (this.data.shuffle == 2) {
      this.setData({
        shuffle: 3
      })
      return
    }
    if (this.data.shuffle == 3) {
      this.setData({
        shuffle: 1
      })
    }
  },
  onShow: function () {
    var that = this
    app.globalData.playtype = this.data.shuffle
    common.playAlrc(that, app);
    seek = setInterval(function () {
      common.playAlrc(that, app);
    }, 1000)
  },
})[/mw_shl_code]


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

本帖子中包含更多资源

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

×

0

主题

9

回帖

59

金钱

新人求带

积分
0
发表于 2017-5-13 13:21:06 | 显示全部楼层
顶你啊,呵呵

1

主题

50

回帖

83

金钱

新人求带

积分
0
发表于 2017-7-7 15:34:46 | 显示全部楼层
确实是难得好帖啊,顶先

0

主题

245

回帖

63

金钱

新人求带

积分
0
发表于 2017-8-21 17:01:52 | 显示全部楼层
感谢分享
回复

使用道具 举报

0

主题

1

回帖

31

金钱

新人求带

积分
0
发表于 2017-8-22 17:57:02 | 显示全部楼层
感谢分享~
回复

使用道具 举报

0

主题

7

回帖

85

金钱

新人求带

积分
0
发表于 2017-8-22 20:42:53 | 显示全部楼层
谢谢,学习!!
回复

使用道具 举报

0

主题

4

回帖

68

金钱

新人求带

积分
0
发表于 2017-9-12 15:59:58 | 显示全部楼层
很赞,期待一下

0

主题

4

回帖

50

金钱

新人求带

积分
0
发表于 2017-9-12 17:16:08 | 显示全部楼层
刚接触小程序,多多学习吧

0

主题

7

回帖

38

金钱

新人求带

积分
0
发表于 2017-12-29 11:15:22 | 显示全部楼层
确实是难得好帖啊,顶先

0

主题

5

回帖

61

金钱

新人求带

积分
0
发表于 2018-1-12 18:04:38 | 显示全部楼层
想了解即速应用怎么实现这种音频展现形式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-3-29 06:34 , Processed in 0.121737 second(s), 28 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

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