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

柿霖不是林

音频播放常见的：
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]

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

蓝博兔

顶你啊，呵呵

張揚

确实是难得好帖啊，顶先

Ywenli

感谢分享

姜小胖童鞋

感谢分享~

格兰特船长

谢谢，学习！！

天很晴1504581029

很赞，期待一下

临风广告 小庄

刚接触小程序，多多学习吧

awake

确实是难得好帖啊，顶先

A blank sheet

想了解即速应用怎么实现这种音频展现形式