微信小程序背景音乐播放和进度条

1、通过文档中的BackgroundAudioManager对音频进行操作
引入dayjs (这儿是我的dayjs位置)

import dayjs from '../../lib/dayjs.min.js'

在js文件的最顶部定义一个全部变量

let bg = wx.getBackgroundAudioManager() //全局变量

2、对 bg.src 和bg.title属性赋值
可以放在请求中 可以放在onLoad中

bg.src = res.data[0].url  //这里是音频url（存放自己的url）
bg.title = "播放音乐"		//title属性必须要有

3、绑定滑块value max属性 实现滑块的正常移动

html代码：

	<!-- 进度条 -->
	<view class="pro">
		<view>{{currentTime}}</view>  //左边显示的时间
		<view class="pro1">
			<slider bindchange="changed1" min="0" max="{{max}}" bindchanging="changing" value="{{value}}" block-size="12" />
		</view>
		<view>{{totalTime}}</view>//右边显示的总时间
	</view>

		</view>

js代码：
data代码

  data: {
    totalTime: '', //总时长
    max: 0, //滑块最大值
    value: 0, //进度条进程
    currentTime: 0, //当前时长
    flag: false //是否在拖动滑块
  },

定时器 建议放在onLoad中

    setInterval(() => {
    //判断滑块是否在推动
      if (this.data.flag === false) {  //滑块没有拖动
        let a = dayjs(bg.duration * 1000).format("mm:ss") //总时长 用dayjs对总时长进行处理
        let b = parseInt(bg.duration) //滑块最大值
        let c = dayjs(bg.currentTime * 1000).format('mm:ss') //当前时长
        let d = parseInt(bg.currentTime) //滑块值
        this.setData({
          totalTime: a, ///总时长 对数据进行处理后
          max: b, //滑块最大数
          currentTime: c,
          value: d,
        })
        console.log('定时器', this.data.currentTime)
      }
    }, 1000)

4、实现滑动中左边时间的改变

js代码

 changed1(e) { //滑动拖动完成后执行
    console.log('拖动后', e.detail.value)
    let a = e.detail.value
    this.setData({
      flag: false,
    })
    bg.seek(a)
  },
  //拖动滑块中
  changing(e) { 
    console.log('滑块数字', e.detail.value)
    let b = e.detail.value
    let a = dayjs(b * 1000).format("mm:ss")
    // console.log(a)
    this.setData({
      currentTime: a,
      flag: true
    })
  },