html

<div class="text_audio"  v-if="audio_url">
   <div class="audio_info">
         <div class="audio_schedule_box"
                 @touchstart='progressTouchstart'
                  @touchend='progressTouchend'
                  @touchmove='progressTouchmove'>
              <div class="audio_schedule" :style="{width:audioPosition+'%'}"></div>
          </div>
         <div class="audio_time">
                <span>{{currentTime}}</span>
                <span>{{duration || '00:00'}}</span>
         </div>
    </div>
    <div class="audio_play" @click="playAudio">
           <image src="../../static/images/articleDetailPlay.png" v-if="isPlay"></image>
           <image src="../../static/images/articleDetailPause.png" v-else></image>
    </div>
</div>

  data(){
    return{
         // 创建的音频实例
         audio:null,
         // 当前音频播放时间点
         currentTime:'00:00',
         // 音频时长
         duration:'',
         // 音频播放位置
         audioPosition:0,
         // 是否第一次播放
         isFirstPlay:false,
         // 是否播放
         isPlay:false,
         // 起点位置left
         positionL:0,
         // 起点位置right
         positionR:0,
         // 移动的位置
         clientX:0,
         // 滚动距离顶部位置
         scrollTop:0,
         audio_url: "https://img.taotaoling.com/files/4afeeddff5e01e16ed59a6bab3a831d0.mp3"
      }
    },
    methods:{
           progressTouchstart(e){
                if(!this.audio) return;
                this.audio.pause();
                // 获取audio_schedule_box 在页面的位置
                let info = uni.createSelectorQuery().in(this).select('.audio_schedule_box');
                info.boundingClientRect((data)  => {
                    this.positionL = Number(data.left);
                    this.positionR = Number(data.right);
                    this.clientX = Number(e.touches[0].clientX);
                    let num = this.clientX - this.positionL;
                    this.audio.seek(num);
                    // 获取元素信息
                }).exec()

            },
            progressTouchmove(e){
                //计算手指滑动的距离
                if(!this.audio) return;
                this.audio.pause();
                this.clientX = Number(e.touches[0].clientX);
                let num = this.clientX - this.positionL;
                if(this.clientX < 0 ||  this.clientX > this.positionR) {
                    num = this.positionR;
                }
                this.audio.seek(num);
            },
            progressTouchend(e){
                if(this.isPlay){
                    this.audio.play();
                }
            },
            playAudio(){
                this.videoContext.pause();
                if(this.isFirstPlay && this.articleData.audio_url) {
                    /**
                     *  解决 uni.getBackgroundAudioManager() 暂停无效问题
                     * */
                    this.createAudio();
                    this.isPlay  = true;
                    this.isFirstPlay = false;
                }else {
                    // 点击播放暂停按钮
                    if(this.audio.paused){
                        this.audio.play();
                        this.isPlay  = true;
                    }else {
                        this.audio.pause();
                        this.isPlay = false;
                    }
                }
            },
            createAudio(){
                this.audio = uni.getBackgroundAudioManager();
                // 一定要赋值 否则会报错
                this.audio.title = '标题';
                this.audio.src = this.audio_url;
                this.audio.onPlay((e) => {
                    this.duration = this.transTime(this.audio.duration);
                });
                this.audio.onTimeUpdate((e) => {
                    // 获取音频当前事件
                    this.currentTime = this.transTime(this.audio.currentTime);
                    // 音频进度条
                    this.audioPosition = Math.round(this.audio.currentTime / this.audio.duration * 10000) / 100.00
                });
                this.audio.onEnded((res) => {
                    this.isFirstPlay = true;
                    this.isPlay  = false;
                });
                this.audio.onError((res) => {
                    wx.showToast({
                        title: "音频加载失败",
                        icon: "none",
                    });
                });
            },
            transTime(time) {
                let duration = parseInt(time);
                let minute = parseInt(duration/60);
                let sec = duration%60+'';
                let isM0 = ':';
                if(minute == 0){
                    minute = '00';
                }else if(minute < 10 ){
                    minute = '0'+minute;
                }
                if(sec.length == 1){
                    sec = '0'+sec;
                }
                return minute+isM0+sec
            },
      }

     onHide(){
          if(this.audio) {
                this.audio.stop();
            }
     },
     onUnload(){
            if(this.audio) {
                this.audio.stop();
            }
     },

css

 .text_audio {
     height: 167px;
     background: #F2F2F2;
     border-radius: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 60px 0 26px;
     margin-top: 40px;
    .audio_info {
        width: 467px;
        position: relative;
        .audio_schedule_box {
            width: 431px;
            height: 24px;
            background: #000000;
            opacity: 0.3;
            border-radius: 12px;
            display: flex;
            align-items: center;
            padding: 0 5px;
            margin: auto;
            overflow: hidden;
           .audio_schedule {
            height: 16px;
            border-radius: 8px;
            overflow: hidden;
            background: linear-gradient(43deg, #FEDD95, #FFE8BF);
            transition:all .1s;
           }
      }
      .audio_time {
            position: absolute;
            bottom: -35px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            color: #333333;
            font-weight: bold;
            font-size: 22px;
       }
     }
       .audio_play {
            width: 60px;
            height: 60px;
            image {
                width: 100%;
                height: 100%;
            }
         }
     }

音频.png