yuminge-app/yun-min-program-plugin-master/packageI/newMedia/components/audioPlay/audioPlay.wxml

<!--packageI/newMedia/components/audioPlay/audioPlay.wxml-->


<view class="audio-player">
  <view class="audio-play_button {{!playingFlag ? 'iconfont icon-member_look' : ''}} {{!playFlag ? 'gray' : ''}}"
    bindtap="handPlayAudio">
    <image wx:if="{{playingFlag}}" style="width:1rem;height:1rem;margin-top:0.2rem;"
      src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/audio.svg"></image>
  </view>
  <view class="audio-play_progress">
    <view class="audio-play_progress-bar" wx:if="{{playFlag && drag}}" bindtouchstart="{{tools.touchStart}}"
        bindtouchmove="{{tools.touchmove}}" bindtouchend="{{tools.touchEnd}}">
        <template is="sliderBar"></template>
    </view>
    <view class="audio-play_progress-bar" wx:else >
      <template is="sliderBar"></template>
    </view>
    <view class="audio-play_time">
      <view class="audio-play_time-item" change:currentTime="{{tools.changeCurrentTime}}" currentTime="{{currentTime}}">
        {{tools.getAudioCurrent(currentTime)}}</view>
      <view class="audio-play_time-item" style="flex:1;" bindtap="getAudioFile" wx:if="{{openUpload}}">点击选择音频文件上传</view>
      <view class="audio-play_time-item">{{tools.getAudioTotal(duration)}}</view>
    </view>
  </view>
</view>

<template name="sliderBar">
  <view class="audio-play_progress-slider"></view>
      <view class="audio-play_progress-current"></view>
      <view class="audio-play_progress-total"></view>
</template>

<wxs module="tools">
  var countWidth = 300; //播放条总宽度 
  var slideLeft = 0;  //当前位置,点击的位置
  var duration = 0; //总时长
  var currentTime = 0;//当前时长
  var progressCurrent = 0;

  var _parsetAudioTime = function (ns) {
    ns = parseInt(ns);
    var i = parseInt(ns / 60);
    var s = ns % 60;
    return _minute(i) + ":" + _minute(s);
  }

  var _getProgress = function () {
    if (currentTime == 0 || duration == 0) return 0;
    var progress = parseInt(currentTime / duration * 100);
    return progress;
  }

  var _minute = function (ns) {
    if (ns < 10) {
      ns = "0" + ns;
    }
    return ns;
  }

  var changeCurrentTime = function (newValue, oldValue, ownerInstance, instance) {
    var sliderNode = ownerInstance.selectComponent(".audio-play_progress-slider");
    var currentNode = ownerInstance.selectComponent(".audio-play_progress-current");
    var left = _getProgress();
    if(left == progressCurrent) return;
    progressCurrent = left;
    sliderNode.setStyle({
      "left": (left - 1) + "%"
    })
    currentNode.setStyle({
      "width": left + "%"
    })
  }

  var getAudioCurrent = function (ns) {
    currentTime = ns;
    return _parsetAudioTime(ns);
  }
  var getAudioTotal = function (ns) {
    console.log("getAudioTotal", ns)
    duration = ns;
    return _parsetAudioTime(ns);
  }




  var touchStart = function (event, ins) {
    ins.callMethod("startDrag");
    var totalNode = ins.selectComponent(".audio-play_progress-total");
    var sliderNode = ins.selectComponent(".audio-play_progress-slider");
    var currentNode = ins.selectComponent(".audio-play_progress-current");
    var totalClientRect = totalNode.getBoundingClientRect();
    var slideClientRect = sliderNode.getBoundingClientRect();
    countWidth = totalClientRect.width;
    // 获取事件触发点的坐标数据
    var touch = event.touches[0] || event.changedTouches[0]
    //存储坐标数据，后期使用
    var moveE = ins.getState();
    moveE.startX = touch.pageX;
    moveE.startY = touch.pageY;

    slideLeft = parseInt(touch.pageX - totalClientRect.left);
    console.log(touch.pageX-totalClientRect.left)
    var left = parseInt((touch.pageX-totalClientRect.left) / countWidth * 100);
    sliderNode.setStyle({
      "left": (left - 1) + "%"
    })
    currentNode.setStyle({
      "width": left + "%"
    })
    console.log('inss', ins.setStyle)
  }
  var touchmove = function (event, ins) {
    //组件实例
    var sliderNode = ins.selectComponent(".audio-play_progress-slider");
    var currentNode = ins.selectComponent(".audio-play_progress-current");
    console.log(JSON.stringify(sliderNode.getBoundingClientRect()))
    // 获取拖动点的坐标数据
    var touch = event.touches[0] || event.changedTouches[0]
    //拿出拖动开始时存储的数据
    var moveE = ins.getState();

    //计算拖动点与拖动开始时的触发点之间的横坐标之差
    var gap = touch.pageX - moveE.startX + slideLeft;

    var left = parseInt(gap / countWidth * 100);
    left = left >= 100 ? 100 : left;
    left = left <= 0 ? 0 : left;


    sliderNode.setStyle({
      "left": (left - 1) + "%"
    })
    currentNode.setStyle({
      "width": left + "%"
    })
  }
  var touchEnd = function (event, ins) {
    var currentNode = ins.selectComponent(".audio-play_progress-current");
    var width = currentNode.getBoundingClientRect().width;
    var limit = (width / countWidth) * duration;
    console.log("limit", limit, width)
    ins.callMethod("endDrag", limit);
  }






  module.exports = {
    getAudioTotal: getAudioTotal,
    changeCurrentTime: changeCurrentTime,
    getAudioCurrent: getAudioCurrent,
    touchStart: touchStart,
    touchmove: touchmove,
    touchEnd: touchEnd
  }

</wxs>