❝

Implement a wechat applet background audio playback function (BackgroundAudioManager)

❞

rendering

👌 Start

wxml

<view class='audiosBox'>
      <view class="audioOpen" bindtap="listenerButtonPlay" wx:if="{{! isOpen}}">
        <image style="width: 70rpx; height: 70rpx;" src="http://image/cur_play.png" />
      </view>
      <view class="audioOpen" bindtap="listenerButtonPause" wx:if="{{isOpen}}">
 <image style="width: 70rpx; height: 70rpx;" src="http://image/cur_pause.png" />  </view>  <view class='slid'>  <slider bindchange="sliderChange" block-size="12px" step="2" value="{{offset}}" max="{{max}}" selected-color="#4c9dee" />  <view>  <text class='times'>{{starttime}}</text> <! -- Progress time --><! -- <text class='times'>{{duration}}</text> --> <! -- Total duration --> </view>  </view>  </view> Copy the code

wxss

.audiosBox {
  width: 92%;
  margin: auto;
  height: 130rpx;
  display: flex;
 justify-content: space-between;  align-items: center;  background: #f6f7f7;  border-radius: 10rpx; }  /* Button size */.audioOpen {  width: 70rpx;  height: 70rpx;  border-radius: 50%;  display: flex;  align-items: center;  justify-content: center;  margin-left: 20rpx; }  image {  width: 30rpx;  height: 40rpx; }  .image2 {  margin-left: 10%; }  /* Progress bar length */.slid {  flex: 1;  position: relative; }  .slid view {  display: flex;  justify-content: space-between; }  .slid view>text:nth-child(1) {  color: #4c9dee;  margin-left: 6rpx; }  .slid view>text:nth-child(2) {  margin-right: 6rpx; }  slider {  width: 520rpx;  margin: 0;  margin-left: 35rpx; }  /* Horizontal layout */.times {  width: 100rpx;  text-align: center;  display: inline-block;  font-size: 24rpx;  color: # 999999;  margin-top: 5rpx; }  .title view {  text-indent: 2em;  }  Copy the code

js

const bgMusic = wx.getBackgroundAudioManager()

Page({

  data: {
 isOpen: false// Play switch starttime: '00:00', // The playing time duration: '00:00', // Total duration src: ' '// SRC address of the current audio isPlay: false// Whether it is played },  onUnload() { // Stop playing if you leave the current page var that = this That.listenerbuttonstop () // Stop the playback },  listenerButtonPlay: function () {  var that = this  if(! this.data.isPlay) {/ /!!!!!! You must add the title for ios playback otherwise an error will be reported and the music will not be played// The value of this block needs to be replaced by itself bgMusic.title = 'I am audio'  bgMusic.epname = 'I am audio'  bgMusic.src = 'I'm an audio link'  bgMusic.coverImgUrl = 'I'm an audio background.'  }   bgMusic.onTimeUpdate(() => { Bgmusic. duration Total duration bgMusic.currentTime Current Progress var duration = bgMusic.duration;  var offset = bgMusic.currentTime;  var currentTime = parseInt(bgMusic.currentTime);  var min = parseInt(currentTime / 60);  var max = parseInt(bgMusic.duration);  var sec = currentTime % 60;  if (sec < 10) {  sec = "0" + sec;  };  if (min < 10) {  min = "0" + min;  };  var starttime = min + ':'+ sec; / * 00:00 * / that.setData({  offset: currentTime,  starttime: starttime,  max: max,  changePlay: true. duration,  offset  })  }) // Listen to the playback end bgMusic.onEnded(() => {  that.setData({  starttime: '00:00'. isOpen: false. offset: 0  })  })  bgMusic.play()  that.setData({  isOpen: true. isPlay: true  })  }, // Pause the playback listenerButtonPause() {  var that = this  bgMusic.pause()  that.setData({  isOpen: false. })  },  listenerButtonStop() {  var that = this  bgMusic.stop()  }, // Progress bar drag sliderChange(e) {  var that = this  var offset = parseInt(e.detail.value);  bgMusic.play();  bgMusic.seek(offset);  that.setData({  isOpen: true. })  } })  Copy the code

❝

If the above do not understand, you can private message me Or 🐧 : 2320347018, thank you. The original 👉 point ME to check.

❞

Access to official documents 👉 click me to view.

Thank You

👌 End

This article is formatted using MDNICE