微信小程序条形加载读取进度切换音频进度。简单实现（官方文档）_小程序背景播放设置播放进度重新加载音频-CSDN博客

本文链接：https://blog.csdn.net/qq_35349982/article/details/102740252

自定义实现音频播放，连接如下
https://blog.csdn.net/qq_35349982/article/details/102778340
这个是官方的音频
在这里插入图片描述

wxml文件。主要是 slider标签的属性

<view class="page">
  <view class="page__hd">
    <text class="page__title">audio</text>
    <text class="page__desc">音频</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap">
      <audio src="{{current.src}}" poster="{{current.poster}}" name="{{current.name}}" author="{{current.author}}" action="{{audioAction}}" bindplay="audioPlayed" bindtimeupdate="audioTimeUpdated" controls></audio>
    </view>
  </view>

  <view class="section section_gap">
    <text class="section__title">播放</text>
    <view class="body-view">
      <button bindtap="playAudio">播放</button>
    </view>
  </view>

  <view class="section section_gap">
    <text class="section__title">暂停</text>
    <view class="body-view">
      <button bindtap="pauseAudio">暂停</button>
    </view>
  </view>

  <view class="section section_gap">
    <text class="section__title">进度</text>
    <view class="body-view">
      <slider bindchange="timeSliderChanged"  bindchanging="Changed" value="{{sliderV}}" max="{{sliderMax}}" left-icon="cancel"  right-icon="success_no_circle"/>
    </view>
  </view>
</view>

js文件。主要是滑动的监听函数。设置一个bool值

Page({
  data: {
    bo:true,
    sliderV:0,
    sliderMax: 414,
    current: {
      poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
      name: '此时此刻',
      author: '许巍',
      src: 'https://img.kuang100.net/daoyou/yinping/1568713339138.mp3',
    },
    audioAction: {
      method: 'pause'
    }
  },
  audioPlayed: function (e) {
    console.log('audio is played')
  },

  audioTimeUpdated: function (e) {
    if (this.data.bo) {
    console.log("正在播放")
    //设置滚动条
    this.setData({
      sliderV: e.detail.currentTime,
      bo: true
    });
    this.duration = e.detail.duration;
    }
  },

  timeSliderChanged: function (e) {
    console.log("拖动完成")
    if (!this.data.bo){
      this.setData({
        bo:true,
        audioAction: {
          method: 'setCurrentTime',
          data: e.detail.value
        }
      });
    }
  
  },

  Changed: function(e) {
    console.log("正在拖动")
    this.setData({
      bo: false
    });
  },




  playAudio: function () {
    this.setData({
      audioAction: {
        method: 'play'
      }
    });
  },
  pauseAudio: function () {
    this.setData({
      audioAction: {
        method: 'pause'
      }
    });
  },
})