实现一个微信小程序背景音频播放的功能 (BackgroundAudioManager)

❝

实现一个微信小程序背景音频播放的功能 (BackgroundAudioManager)

❞

👌 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>
          <!-- 进度时长 -->
          <!-- <text class='times'>{{duration}}</text> -->
          <!-- 总时长 -->
        </view>
      </view>
    </view>

wxss

.audiosBox {
  width: 92%;
  margin: auto;
  height: 130rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f6f7f7;
  border-radius: 10rpx;
}

/*按钮大小  */
.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%;
}

/*进度条长度  */
.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;
}

/*横向布局  */
.times {
  width: 100rpx;
  text-align: center;
  display: inline-block;
  font-size: 24rpx;
  color: #999999;
  margin-top: 5rpx;
}

.title view {
  text-indent: 2em;

}

js

const bgMusic = wx.getBackgroundAudioManager()

Page({

  data: {
    isOpen: false, //播放开关
    starttime: '00:00', //正在播放时长
    duration: '00:00', //总时长
    src: '', // 当前音频的src地址
    isPlay: false, // 是否播放了
  },
  onUnload() {
    // 如果离开当前页面就停止播放
    var that = this
    that.listenerButtonStop() //停止播放
  },
  listenerButtonPlay: function () {
      var that = this
      if (!this.data.isPlay) {
        // ！！！ ios 播放时必须加title 不然会报错导致音乐不播放
        // 这块的值需要自己替换哦
        bgMusic.title = '我是音频'
        bgMusic.epname = '我是音频'
        bgMusic.src = '我是一个音频链接'
        bgMusic.coverImgUrl = '我是一个音频背景图'
      }

      bgMusic.onTimeUpdate(() => {
        //bgMusic.duration总时长  bgMusic.currentTime当前进度
        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
        })
      })
      // 监听播放结束
      bgMusic.onEnded(() => {
        that.setData({
          starttime: '00:00',
          isOpen: false,
          offset: 0
        })
      })
      bgMusic.play()
      that.setData({
        isOpen: true,
        isPlay: true
      })
    },
    //暂停播放
    listenerButtonPause() {
      var that = this
      bgMusic.pause()
      that.setData({
        isOpen: false,
      })
    },
    listenerButtonStop() {
      var that = this
      bgMusic.stop()
    },
    // 进度条拖拽
    sliderChange(e) {
      var that = this
      var offset = parseInt(e.detail.value);
      bgMusic.play();
      bgMusic.seek(offset);
      that.setData({
        isOpen: true,
      })
    }
})

❝

如果上文有不明白的，可以私信我 Or 🐧 : 2320347018，感谢。 原文👉 点我查看。

❞

查阅 官方文档入口 👉 点我查看。

Thank You

👌 End

本文使用 mdnice 排版