小程序音频播放相关

javascript 复制代码

let innerAudioContext = null
let backgroundAudioManager  = null
let isPlay = false

page之上定义，不用随时setData会有延迟。注意：页面上用到的要在data里面写，不在页面上展示js直接用的可以在上面定义全局

判断是否支持基础库

javascript 复制代码

isCanUseBgAudio = wx.canIUse('getBackgroundAudioManager')

需要兼容不支持的基础库使用-createInnerAudioContext（不支持播放速度）

背景悬浮框直接使用- getBackgroundAudioManager（支持播放速度）

javascript 复制代码

<view class="slider">
   <slider bindchange="sliderChange" bindchanging="sliderChange" value="{{sliderValue}}" min="0" max="{{maxSliderValue}}" block-size="12"/>
</view>
 <span bind:tap="prePlay">上一段</span>
 <span bind:tap="palyAudio">{{textPlay}}</span>
 <span bind:tap="nextPlay">下一段</span>

javascript 复制代码

if (isCanUseBgAudio){
      innerAudioContext = wx.createInnerAudioContext({
        useWebAudioImplement: true
      })
      backgroundAudioManager = wx.getBackgroundAudioManager()
      backgroundAudioManager.onEnded(() => {
        console.log("音乐播放结束");
        if (this.data.currentIndex != (this.data.currentList.length -1)){
          this.nextPlay()
        } else {
          console.log('最后结束')
        }
      })

      backgroundAudioManager.onTimeUpdate(() => {
        if (backgroundAudioManager.paused) {
          return;
        }
        const duration = backgroundAudioManager.duration; // 音频总时长
        const currentTime = backgroundAudioManager.currentTime; // 当前播放时长
        const currentSecond = util.formatSeconds(backgroundAudioManager.currentTime)
        this.setData({
          sliderValue: currentTime,
          maxSliderValue: duration,
          currentSecond: currentSecond
        })
      })

      backgroundAudioManager.onPause(() => {
        isPlay = false
        this.setData({
          textPlay: '播放',
        })
      })
      backgroundAudioManager.onPlay(() => {
        isPlay = true
        this.setData({
          textPlay: '暂停',
        })
      })
      backgroundAudioManager.onNext(() => {
        // 监听用户在系统音乐播放面板点击下一曲事件
        this.nextPlay()
      })
      backgroundAudioManager.onPrev(() => {
        // 监听用户在系统音乐播放面板点击上一曲事件
        this.prePlay()
      })
 } else {
 	innerAudioContext = wx.createInnerAudioContext({
        // useWebAudioImplement: true
      })
      innerAudioContext.src = url
      console.log('2222', url)
      // this.playType(item, url)
      innerAudioContext.play() // 播放

      innerAudioContext.onError((ee) => {
        // 监听音频播放错误事件
        console.log('errr',ee)
      })

      innerAudioContext.onEnded(() => {
        console.log("音乐播放结束");
        if (this.data.currentIndex != (this.data.currentList.length -1)){
          this.nextPlay()
        } else {
          console.log('最后结束')
        }
      })

      innerAudioContext.onTimeUpdate(() => {
        if (innerAudioContext.paused) {
          return;
        }
        const duration = innerAudioContext.duration; // 音频总时长
        const currentTime = innerAudioContext.currentTime; // 当前播放时长
        const currentSecond = util.formatSeconds(innerAudioContext.currentTime)
        // console.log('duration---', duration, currentTime, currentSecond)
        // sliderValue = currentTime
        this.setData({
          sliderValue: currentTime,
          maxSliderValue: duration,
          currentSecond: currentSecond
        })
      })

      innerAudioContext.onPause(() => {
        isPlay = false
        this.setData({
          textPlay: '播放',
        })
      })
      innerAudioContext.onPlay(() => {
        isPlay = true
        this.setData({
          textPlay: '暂停',
        })
      })
 }

暂停播放

javascript 复制代码

palyAudio(){
    if(isPlay){
      isPlay = false
      if (isCanUseBgAudio) {
        backgroundAudioManager.pause()
      }
      
      innerAudioContext.pause()
      this.setData({
        textPlay: '播放'
      })
    } else {
      isPlay = true
      if (isCanUseBgAudio) {
        backgroundAudioManager.play()
      } else {
        innerAudioContext.play()
      }
      this.setData({
        textPlay: '暂停'
      })
    }

javascript 复制代码

playType(item, url){
    if(isCanUseBgAudio){
    //backgroundAudioManager给src附完值不需要play自动播放
      backgroundAudioManager.src = url 
      backgroundAudioManager.title = item.title
      backgroundAudioManager.coverImgUrl =  poster
    } else {
    // innerAudioContext附完值需要play播放，另没有title
      innerAudioContext.src = url
      // innerAudioContext.title = item.title
      innerAudioContext.play() 
      console.log('innerAudioContext', innerAudioContext)  
    }
  },

util.js里面的formatSeconds

javascript 复制代码

function formatSeconds (value) {
  var secondTime = parseInt(value)
  var minuteTime = 0
  var hourTime = 0
  if(secondTime < 10) {
    return `00:0${secondTime}`
  }
  if (secondTime < 60) {
    return `00:${secondTime}`
  }
  minuteTime = parseInt(secondTime / 60)
  secondTime = parseInt(secondTime % 60)
  if (minuteTime > 60) {
    hourTime = parseInt(minuteTime / 60)
    minuteTime = parseInt(minuteTime % 60)
  }
  var result = formatNumber(parseInt(secondTime))
  if (minuteTime > 0) {
    result = '' + formatNumber(parseInt(minuteTime)) + ':' + result
  }
  if (hourTime > 0) {
    result = '' + formatNumber(parseInt(hourTime)) + ':' + result
  }
  return result
}

另附加参考：https://blog.csdn.net/xingchen_xc/article/details/139067665