微信小程序自定義音頻組件，自定義滾動條，單曲循環，循環播放 小程序自定義音頻組件，帶滾動條

1,app,json裏面配置

 "requiredBackgroundModes": [
    "audio",
    "location"
  ],

2，app.js裏面配置

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

3,index.js裏面的代碼

const APP = getApp()
const AUDIOMANAGER = getApp().globalData.global_bac_audio_manager.manage
const AUDIO = getApp().globalData.global_bac_audio_manager


Page({
  /**
   * 頁面的初始數據
   */
  data: {
    is_play: 1,//是否播放音樂
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this
    that.setData({
      preArticleId: 0,//是否存在上一首
      nextArticleId: 1,//是否存在下一首
      is_loop: true,//是否循環播放
      is_play: true,//是否正在播放
    })
    AUDIOMANAGER.onPlay(() => {
      setTimeout(() => {
        that.setData({
          is_loading: true
        })
      }, 300)
    })
    let response = {
      preArticleId: 0,
      nextArticleId: 1,
      urlCompressed: 'http://www.wgx0725.com/music1.mp3',
      articleName: '測試音樂',
      lessonName: '專輯名',
      poster: 'http://www.1810.com.cn/static/uploadfile/file/2019-02-19/5c6bd0b57f8dc.jpg',
    }

    // 如果不是從懸浮按鈕播放，就重新賦值
    if (options.articleId == AUDIO.id && AUDIO.is_play) {
      wx.seekBackgroundAudio({
        position: Math.floor(AUDIO.time)
      })
    } else {
      audio_background_play(response)
    }

    // 置灰上一首下一首
    if (response.preArticleId == 0) {
      that.setData({
        is_first_page: true
      })
    }
    if (response.nextArticleId == 0) {
      that.setData({
        is_last_page: true
      })
    }
    //背景音頻播放進度更新事件
    AUDIOMANAGER.onTimeUpdate(() => {
      if (!that.data.is_moving_slider) {
        that.setData({
          current_process: format(AUDIOMANAGER.currentTime),
          slider_value: Math.floor(AUDIOMANAGER.currentTime),
          total_process: format(AUDIOMANAGER.duration),
          slider_max: Math.floor(AUDIOMANAGER.duration)
        })
      }
      AUDIO.time = AUDIOMANAGER.currentTime
    })

    // 背景音頻播放完畢
    AUDIOMANAGER.onEnded(() => {
      if (that.data.is_loop) {
        that.next()
      } else {
        // 單曲循環
        that.setData({
          slider_value: 0,
          current_process: '00:00',
        })
        audio_background_play(response)
      }
    })
  },
 

  // 拖動進度條，到指定位置
  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: 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
    });
  },
  // 點擊播放暫停
  audio_play: function () {
    let that = this
    if (this.data.is_play) {
      that.setData({
        is_play: false
      })
      wx.pauseBackgroundAudio()
    } else if (!this.data.is_play && this.data.is_ended) { // 這裏是判斷如果循環播放結束，沒有下一首，重新播放 is_ended  是否是最後一首
      audio_background_play(that.data.audio_article)
      that.setData({
        is_play: true,
        is_ended: false
      })
    } else if (!this.data.is_play) {
      that.setData({
        is_play: true
      })
      wx.playBackgroundAudio()
    }
    AUDIO.is_play = !AUDIO.is_play
  },
  // 點擊是否循環
  play_loop: function () {
    let that = this
    if (this.data.is_loop) {
      that.setData({
        is_loop: false
      })
    } else {
      that.setData({
        is_loop: true
      })
    }
  },
  // 上一首
  prev: function () {
    let that = this
    if (that.data.preArticleId != 0) {
      //存在上一首，那麼就更改當前的播放id，並且重新獲取當前id是否存在上一首和下一首
      wx.redirectTo({
        url: '/pages/audio_article/audio_article?articleId=' +
          that.data.audio_article.preArticleId
      })
    }
  },
  // 下一首
  next: function () {
    let that = this
    if (that.data.nextArticleId != 0) {
      let response = {
        preArticleId: 0,
        nextArticleId: 1,
        urlCompressed: 'http://www.wgx0725.com/music2.mp3',
        articleName: '測試音樂2',
        lessonName: '專輯名2',
        poster: 'http://www.1810.com.cn/static/uploadfile/file/2019-02-19/5c6bd0b57f8dc.jpg',
      }
      // 單曲循環
      that.setData({
        slider_value: 0,
        current_process: '00:00',
      })
      audio_background_play(response)

    } else { // 如果是最後一首
      that.setData({
        is_play: false,
        slider_value: 0,
        current_process: '00:00',
        is_ended: true
      })
      AUDIO.is_play = false
    }
  },
  onUnload: function () {
    // 動態切換懸浮按鈕的動態
    if (AUDIO.is_play) {
      APP.globalData.is_active = true
    } else {
      APP.globalData.is_active = false
    }
  },
  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
  },
  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
  }
})

// 時間格式化
function format(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
}
// 音頻播放
function audio_background_play(response) {
  AUDIOMANAGER.src = response.urlCompressed ? response.urlCompressed : response.audioLink // 音頻的數據源，默認爲空字符串，當設置了新的 src 時，會自動開始播放 ，目前支持的格式有 m4a, aac, mp3, wav
  AUDIOMANAGER.title = response.articleName // 音頻標題
  AUDIOMANAGER.epname = response.lessonName // 專輯名
  AUDIOMANAGER.singer = '****' // 歌手名
  AUDIOMANAGER.coverImgUrl = response.poster // 封面圖url
}

4，index.wxml 代碼

<!--音頻播放html-->
 <view class="audio">
    <image class="bg" src="../../images/background.png"></image>
   <text class='txt'>測試音樂</text>
    <view class="control-process">
        <text class="current-process">{{current_process}}</text>
        <slider class="slider" 
            bindchange="hanle_slider_change" 
            bindtouchstart="handle_slider_move_start" 
            bindtouchend="handle_slider_move_end" 
            min="0" 
            block-size="16" 
            max="{{slider_max}}" 
            activeColor="#fff" 
            backgroundColor="rgba(255,255,255,.3)" 
            value="{{slider_value}}"
        />
        <text class="total-process">{{total_process}}</text>
    </view>
    <view class="icon-list ">
        <image bindtap="prev" mode="widthFix" src="{{is_first_page?'../../images/audio_prev_no.png':'../../images/audio_prev.png'}}" class="audio-icon"></image>
        <image mode="widthFix" src="{{is_play? '../../images/audio_play.png': '../../images/audio_paused.png'}}" class="audio-icon audio-play" bindtap="audio_play"></image>
        <image bindtap="next" mode="widthFix" src="{{is_last_page?'../../images/audio_next_no.png':'../../images/audio_next.png'}}" class="audio-icon"></image>
        <image mode="widthFix" class="launch" src="{{is_loop ? '../../images/audio_loop.png': '../../images/audio_un_loop.png'}}" bindtap="play_loop"></image>
    </view>
</view>

5，index.wxss代碼

/* pages/detail/detail.wxss */
page {
  background-color: rgb(218, 226, 230);
}


.audio {
    position:fixed;
    width:750rpx;
    height:185rpx;
    padding:2rpx 32rpx 5rpx;
    box-sizing:border-box;
    text-align:center;
    overflow:hidden;
    background:rgba(88, 199, 233, 0.89);
    bottom:0px;
    z-index: 999;
}
.audio .bg {
    position: absolute;
    top: 0;
    left: -100%;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 300%;
    height: 300%;
    z-index: -1;
    filter: blur(40rpx);    
}
.audio .txt{
  height:20px;
display:block;
line-height:20px;
font-size:12px;
color:#ddd;
padding-bottom:-20px;
margin-bottom:-20px;

}
.editor {
    padding: 32rpx;
    box-sizing: border-box;
    color: #333;
    font-size: 28rpx;
    background: #fff;
}
.editor view {
    max-width: 100% !important;
}

.audio .poster {
    width: 238rpx;
    height: 336rpx;
}
/* 音頻滾動條start */
.control-process {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.control-process .slider {
    width: 526rpx;
}
.control-process text {
    font-size: 24rpx;
    color: #fff;
}
/* 音頻滾動條end */
.audio .icon-list {
    position: relative;
    margin: 0 auto;
    line-height: 66rpx;
}

.audio .icon-list .audio-icon + .audio-icon {
    margin-left: 72rpx;
}

.audio .icon-list .pattern {
    position: absolute;
    right: 20rpx;
}

.audio image {
    width: 50rpx;
    height: 50rpx;
    vertical-align: middle;
}
.audio .launch{position:absolute;
margin-left:20px;
margin-top:5px;
}
.audio .audio-play {
    width: 50rpx;
    height: 50rpx;
}

.audio .pattern {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 44rpx;
    height: 44rpx;
}