微信小程序音頻背景播放

因爲微信小程序官方將音頻的樣式固定死了，每每再工做中和UI設計師設計出來的樣式不符，故通常都採用背景音頻播放來實現自定義的UI樣式的音頻播放，即便用官網API提供的BackgroundAudioManager進行操做 也能夠去官網https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.play.html查看詳情

第一步，在對應的wxml頁面添加以下代碼，eg，放在index.wxml中

<view class='audioMeaage'>
        <view bindtap='playAudio1'>
          <image wx:if="{{!audioImg}}" class='playIcom' src='{{palyIcon}}'></image>
          <image wx:else class='playIcom' src='{{pausIcon}}'></image>
        </view>
        <view class='sliderWrap'>
          <view class='audioNames'>{{audioTitle}}</view>
          <view class='progressWrap'>
            <slider class="slider2"
              bindchange="hanle_slider_change" 
              bindtouchstart="handle_slider_move_start" 
              bindtouchend="handle_slider_move_end"
              min="0" 
              block-size="10" 
              max="{{slider_max}}" 
              activeColor="#ffd038"
              block-color="#ffd038"
              backgroundColor="#f2f2f2" 
              value="{{slider_value}}" 
            />
            <view class='proTime'>{{current_process}}/{{total_process}}</view>
          </view>
        </view>
      </view>

第二步，對應的index.js，注意這裏的playAudio方法是點擊之後從後臺獲取音頻的url和標題等信息的

//獲取應用實例
const app = getApp() const AUDIOMANAGER = getApp().globalData.global_bac_audio_manager.manage const AUDIO = getApp().globalData.global_bac_audio_manager
Page({
  data: {
    audioImg:false,
    palyIcon: "./../../images/home_img_vedio_play.png",
    pausIcon:"./../../images/home_img_vedio_play2.png",
    audioFlag: false,
    is_moving_slider: false,
    current_process:"",
    slider_value: "",
    total_process: "",
    slider_max: "",
    audioTitle:"",
  },
    playAudio: function(e){
    const item = e.currentTarget.dataset.url
    AUDIOMANAGER.src = item.link_url
    AUDIOMANAGER.title = item.tit // 音頻標題

    AUDIO.is_play= true
    //背景音頻播放進度更新事件
    const that = this
    that.setData({
      audioFlag: true,
      audioTitle: item.tit,
      audioImg: true
    })
    AUDIOMANAGER.onTimeUpdate(() => {
      if (!that.data.is_moving_slider) {
        that.setData({
          current_process: that.format(AUDIOMANAGER.currentTime),
          slider_value: Math.floor(AUDIOMANAGER.currentTime),
          total_process: that.format(AUDIOMANAGER.duration),
          slider_max: Math.floor(AUDIOMANAGER.duration)
        })
      }
      AUDIO.time = AUDIOMANAGER.currentTime
    })

    // 背景音頻播放完畢
    AUDIOMANAGER.onEnded(() => {
        // 單曲循環
        that.setData({
          slider_value: 0,
          current_process: '00:00',
          total_process: that.format(AUDIOMANAGER.duration)
        })
    })
  },
  // 拖動進度條，到指定位置
  hanle_slider_change(e) {
    const position = e.detail.value
    this.seekCurrentAudio(position)
  },
  // 拖動進度條控件
  seekCurrentAudio(position) {
    // 更新進度條
    let that = this
    wx.seekBackgroundAudio({
      position: Math.floor(position),
      success: function () {
        AUDIOMANAGER.currentTime = position
        that.setData({
          current_process: that.format(position),
          slider_value: Math.floor(position)
        })
      }
    })
  },
  // 進度條滑動
  handle_slider_move_start() {
    this.setData({
      is_moving_slider: true
    });
  },
  handle_slider_move_end() {
    this.setData({
      is_moving_slider: false
    });
  },
  // 時間格式化
  format: function(t) {
    let time = Math.floor(t / 60) >= 10 ? Math.floor(t / 60) : '0' + Math.floor(t / 60)
    t = time + ':' + ((t % 60) / 100).toFixed(2).slice(-2)
    return t
  },
    // 播放音頻
  playAudio1: function(){
    console.log(9799875)
    console.log(AUDIO.is_play)
    if(AUDIO.is_play) {
      AUDIOMANAGER.pause()
      AUDIO.is_play = false
      this.setData({
        audioImg: false
      })
    } else {
      AUDIOMANAGER.play()
      AUDIO.is_play = true
      this.setData({
        audioImg: true
      })
    }

  },
})

第三步，因爲index.js裏引入了app.js的方法或者屬性了，其實就是將AUDIO的方法提出來了，放在了一個公用的裏面，本身單獨創建公用文件或者直接寫在app.js裏都是能夠的，這裏將其放在app.js中，能夠對應這修改globalData裏的屬性

globalData: {
    userInfo: null,
    global_bac_audio_manager: {
      manage: wx.getBackgroundAudioManager(),
      is_play: false,
      id: '',
      play_time: '',
      article_id: '',
    }
  }

 index.wxss

.audioMeaage{
  height: 124rpx;
  display: flex;
  align-items: center;
}
.proTime{
  font-size: 20rpx;
  color: #888888;
}
.progressWrap{
  display: flex;
  align-items: center;
}
.playIcom{
  width: 84rpx;
  height: 84rpx;
}
.slider{
  /* width: 502rpx; */
  
}
.slider1{
  width: 466rpx;
  margin:0 29rpx 0 8rpx;
}
.slider2{
  width: 466rpx;
  margin:0 29rpx 0 19rpx;
}