微信小程序音乐播放

　　最近在写一个艾美食艾音乐的微信小程序，其中有用到音乐播放的功能，基本播放切换功能已经实现，但是在反复切换歌曲、重新进入歌曲以及单曲循环、列表循环的测试过程中还是发生了bug，特此写一篇文章，捋一下思路.(功能写到后面小程序官方文档将音频这一块全都更新了...)

　　坑点：由于小程序主体部分没有app.wxml，这就导致小程序不能写一些公共的页面结构，如果有相同的部分，只能封装成组件再引入.

　　在我们点击歌曲列表中的某首歌的时候，会进入音乐播放界面，当我们退出音乐播放界面，歌曲仍然继续播放，但此时由于退出当前路由，页面data中的数据也已被销毁，当我们再次进入播放界面相当于重新进行页面加载，所以需要我们进行分情况判断，播放歌曲变的较为复杂.

　　一.存放公共数据

　　　　在我们进入音乐播放界面之前要存一下：

　　　　　　当前专辑信息：album(Object)

　　　　　　当前播放列表：playList(Array)

　　　　　　当前播放歌曲的index：playIndex(Number)

　　　　　　播放模式：mode(String)

　　　　　　封面旋转的角度：imgRotate(Number)

// app.js
globalData: {

    album: null, // 当前专辑信息

    playList: [], // 当前播放列表

    playIndex: 0, // 当前播放歌曲index

    mode: 'multiple', // 循环模式 multiple: 循环播放, single: 单曲循环

    imgRotate: 0, // 封面旋转角度
}

　　二.专辑列表

　　　　在专辑列表中点击某个专辑，进入该专辑的歌曲列表，同时将该专辑的信息存入globalData.

// music.js
gotoSongList(e) {

    let item = e.currentTarget.dataset.type

    app.globalData.album = item // 将专辑信息存入globalData

    wx.navigateTo({

      url: '../songlist/songlist'

    })

}

　　三.歌曲列表

　　　　在歌曲列表中点击播放某首歌时，进入歌曲播放界面，同时将该专辑的歌曲列表、当前播放歌曲的index 存入globalData.

// songlist.js

// 播放歌曲

  play(e) {

    app.globalData.playList = this.data.songList

    let index = e.currentTarget.dataset.index

    app.globalData.playIndex = index

    let url = '../player/player'

    wx.navigateTo({

      url: url

    })

}

　　四.歌曲播放页面

　　　　需要在data中存放一下信息：

　　　　　　当前歌曲信息：item(Object)

　　　　　　歌曲解析后的歌词：parseLyric(String)

　　　　　　当前播放进度点的歌词：lineLyric(String)

　　　　　　播放模式：mode(String)

　　　　　　封面旋转的角度：imgRotate(Number)

　　　　　　进度条的值：SliderValue(Number)

　　　　　　音频的长度：duration(Number)

　　　　　　音频的播放位置：currentPosition(Number)

　　　　　　播放状态：playStatus(Boolean)

const app = getApp();

var Base64 = require('../../utils/base64.js').Base64

var Lyric = require('../../utils/lyric-parse.js')

Page({

  data: {

    item: {}, // 当前歌曲信息

    parseLyric: '', // 歌曲解析后的歌词

    lineLyric: '', // 当前播放进度点的歌词

    mode: '', // 播放模式

    imgRotate: 0, // 封面旋转的角度

    sliderValue: 0, // 进度条的值

    duration: 0, // 音频的长度（单位：s）

    currentPosition: 0, // 音频的播放位置（单位：s）

    playStatus: 0, // 播放状态

    timee: 0, // 定时器 根据歌曲进度改变slider进度

    coverImg: '', // 封面图片

    isDel: false, // 当前列表是否只有一首歌曲

  },

  onLoad() {

    let item = app.globalData.playList[app.globalData.playIndex]

    let album = app.globalData.album

    // 获取背景音频信息

    const backgroundAudioManager = wx.getBackgroundAudioManager()

    console.log(backgroundAudioManager, 'backgroundAudioManager')

    if (backgroundAudioManager.src == item.src) { // 继续听歌

      console.log('继续听歌')

    } else { // 播放新歌

      app.globalData.imgRotate = 0

      console.log('播放新歌')

      backgroundAudioManager.title = item.name

      backgroundAudioManager.epname = album.name

      backgroundAudioManager.singer = item.author

      backgroundAudioManager.coverImgUrl = album.poster

      // 设置了 src 之后会自动播放

      backgroundAudioManager.src = item.src

    }

    let lyric = Base64.decode(item.lyric)

    this.setData({

      item: item,

      coverImg: album.poster,

      playStatus: !backgroundAudioManager.paused,

      duration: this.stotime(backgroundAudioManager.duration),

      currentPosition: this.stotime(backgroundAudioManager.currentTime),

      parseLyric: new Lyric(lyric, this.handleLyric),

      mode: app.globalData.mode,

      imgRotate: app.globalData.imgRotate

    })

    this.data.parseLyric.seek(backgroundAudioManager.currentTime*1000)

    console.log(this.data.playStatus, 'playStatus')

    if (backgroundAudioManager.paused) {

      this.data.parseLyric.togglePlay()

    } else if (!this.data.timee) {

      this.toRotate()

    }

    backgroundAudioManager.onPlay(this.onPlay) // 监听背景音频播放事件

    backgroundAudioManager.onPause(this.onPause) // 监听背景音频暂停事件

    backgroundAudioManager.onTimeUpdate(this.onTimeUpdate) // 监听背景音频播放进度更新事件

    backgroundAudioManager.onEnded(this.onEnded) // 监听背景音频自然播放结束事件

    wx.setNavigationBarTitle({

      title: item.name

    })

    console.log(app.globalData.playList.length, 'app.globalData.playList.length')

    if (app.globalData.playList.length == 1) {

      this.setData({

        isDel: true

      })

    }

  },

  handleLyric({lineNum, txt}) { // 歌词回调

    console.log(lineNum, txt, 'txt')

    this.setData({

      lineLyric: txt

    })

  },

  onPlay() {

    const backgroundAudioManager = wx.getBackgroundAudioManager()

    console.log('onPlay')

    console.log(backgroundAudioManager.duration, 'backgroundAudioManager.duration')

    this.setData({

      playStatus: true

    })

    this.data.parseLyric.seek(backgroundAudioManager.currentTime*1000)

    this.toRotate()

  },

  onPause() {

    clearInterval(this.data.timee)

    this.data.parseLyric.stop()

    console.log('onPause')

    this.setData({

      playStatus: false

    })

  },

  switch() { // 切换歌曲播放状态

    if (this.data.playStatus) { // 切换为暂停状态

      const backgroundAudioManager = wx.getBackgroundAudioManager()

      backgroundAudioManager.pause()

    } else { // 切换为播放状态

      const backgroundAudioManager = wx.getBackgroundAudioManager()

      backgroundAudioManager.play()

    }

  },

  onTimeUpdate() {

    const backgroundAudioManager = wx.getBackgroundAudioManager()

    let sliderValue = backgroundAudioManager.currentTime / backgroundAudioManager.duration * 100

    this.setData({

      currentPosition: this.stotime(backgroundAudioManager.currentTime),

      sliderValue: sliderValue,

      duration: this.stotime(backgroundAudioManager.duration)

    })

    // this.data.parseLyric.seek(backgroundAudioManager.currentTime*1000)

  },

  toRotate() {

    this.data.timee && clearInterval(this.data.timee)

    this.data.timee = setInterval(() => {

      app.globalData.imgRotate  = app.globalData.imgRotate + 0.8

      this.setData({

        imgRotate: app.globalData.imgRotate

      })

    }, 35)

  },

  onEnded() {

    console.log('onEnded')

    this.setData({

      playStatus: false

    })

    if (this.data.mode == 'multiple') {

      this.cutNext()

    } else {

      const backgroundAudioManager = wx.getBackgroundAudioManager()

      // 设置了 src 之后会自动播放

      backgroundAudioManager.src = this.data.item.src

    }

  },

  slideChange(e) { // 拖动滑块

    let value = e.detail.value

    this.setData({

      sliderValue: value

    })

    const backgroundAudioManager = wx.getBackgroundAudioManager()

    let currentTime = (value / 100) * backgroundAudioManager.duration

    backgroundAudioManager.seek(currentTime)

    this.data.parseLyric.seek(currentTime*1000)

  },

  cutPrev() { // 上一首

    this.delSongChange('prev')

  },

  cutNext() { // 下一首

    this.delSongChange('next')

  },

  delSongChange(type) { // 切换歌曲

    if (this.data.duration !== 0 && !this.data.isDel) {

      if (app.globalData.playList.length > 1) {

        clearInterval(this.data.timee)

      }

      this.data.duration = 0

      this.data.parseLyric.stop()

      if (type == 'prev') {

        if (app.globalData.playIndex > 0) {

          app.globalData.playIndex --

        } else {

          app.globalData.playIndex = app.globalData.playList.length - 1

        }

      } else {

        if (app.globalData.playIndex < app.globalData.playList.length - 1) {

          app.globalData.playIndex ++

        } else {

          app.globalData.playIndex = 0

        }

      }

      let item = app.globalData.playList[app.globalData.playIndex]

      wx.setNavigationBarTitle({

        title: item.name

      })

      const backgroundAudioManager = wx.getBackgroundAudioManager()

      backgroundAudioManager.title = item.name

      backgroundAudioManager.singer = item.author

      // 设置了 src 之后会自动播放

      backgroundAudioManager.src = item.src

      let lyric = Base64.decode(item.lyric)

      this.setData({

        item: item,

        playStatus: !backgroundAudioManager.paused,

        parseLyric: new Lyric(lyric, this.handleLyric)

      })

      this.data.parseLyric.seek(backgroundAudioManager.currentTime*1000)

      console.log(this.data.playStatus, 'playStatus')

      if (backgroundAudioManager.paused) {

        this.data.parseLyric.togglePlay()

      }

    }

  },

  // 改变播放模式

  changeMode() {

    if (this.data.mode == 'multiple') {

      this.setData({

        mode: 'single'

      })

    } else {

      this.setData({

        mode: 'multiple'

      })

    }

    app.globalData.mode = this.data.mode

  },

  // 时间格式转换

  stotime(s) {

    let t = ''

    if (s > -1) {

      let min = Math.floor(s / 60) % 60;

      let sec = Math.floor(s) % 60

      if (min < 10) { t += '0' }

      t += min + ':'

      if (sec < 10) { t += '0' }

      t += sec

    }

    return t

  },

  onUnload() { // 页面卸载

    const backgroundAudioManager = wx.getBackgroundAudioManager()

    backgroundAudioManager.onTimeUpdate()

    backgroundAudioManager.onPlay()

    backgroundAudioManager.onPause()

    this.data.parseLyric.stop()

    clearInterval(this.data.timee)

  },

})

巴特西

微信小程序音乐播放

最新文章

热门文章