我使用的是wepy的框架，然后代码如下。。。包括拖拉进度条播放，暂停，播放，等功能，样式模仿的是网易云音乐光盘转动效果，可将黑圆圈换成一个光盘图片就更好看了

<style lang="less">
.audio-poster {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 76rpx;
  height: 76rpx;
  box-sizing: border-box;
  margin: 10rpx;
  background: #101010;
  border-radius: 50%;
  .poster-img {
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
  }
}
.audio-box {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: #f2f2f2;
  padding: 10rpx 0;
  align-self: flex-start;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.progress-bar {
  display: flex;
  align-items: center;
  .progress-now {
    width: 70rpx;
    text-align: center;
    font-size: 24rpx;
  }
  .progress-line {
    position: relative;
    width: 426rpx;
    display: flex;
    align-items: center;
    .progress-line-active {
      display: inline-block;
      width: 0rpx;
      font-size: 0;
      border-top: 1px solid #e51c23;
    }
    .progress-circle {
      position: absolute;
      left: 0rpx;
      width: 30rpx;
      height: 30rpx;
      box-sizing: border-box;
      background: #e51c23;
      border-radius: 50%;
    }
    .progress-line-total {
      display: inline-block;
      width: 226rpx;
      font-size: 0;
      border-top: 1px solid #bbb;
    }
  }
  .audio-title {
    position: absolute;
    top: 20rpx;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24rpx;
  }
  .play-button {
    color: #e51c23;
    margin-left: 16rpx;
    font-size: 48rpx;
  }
}
</style>
<template>
  <view class="audio-box">
    <view class="audio-poster" style=" {{playState?'animation: fucks 2s infinite linear;':''}}  ">
      <image class="poster-img" src="http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000"/>
    </view>
    <view class="progress-bar">
      <text class="audio-title">东京塔</text>
      <text class="progress-now">{{currentTime}}</text>
      <view class="progress-line">
        <text class="progress-line-active" style="width:{{circleLeft}}rpx"/>
        <text class="progress-circle"   @touchmove.stop="dragMove" @touchstart.stop="dragStart"  style="left:{{circleLeft}}rpx"></text>
        <text class="progress-line-total" style="width:{{426-circleLeft}}rpx"/>
      </view>
      <text class="progress-now">{{duration}}
      </text>
      <text wx:if="{{!playState}}" @tap="play" class="fa fa-play play-button" />
      <text wx:if="{{playState}}" @tap="pause" class="fa fa-pause play-button" />
    </view>
  </view>
</template>
<script>
import wepy from 'wepy';
let startPageX = 0;
export default class NewAudio extends wepy.component {
  props = {};
  data = {
    playState: true,
    innerAudioContext: wepy.createInnerAudioContext(),
    currentTime: '00:00',
    duration: '00:00',
    circleLeft: 0
  };
  methods = {
    play: () => {
      this.innerAudioContext.play();
      this.playState = true;
      this.$apply();
    },
    pause() {
      this.innerAudioContext.pause();
      this.playState = false;
      this.$apply();
    },
    stop() {
      this.innerAudioContext.stop();
    },
    dragStart(e) {
      startPageX = e.touches[0].clientX;
    },
    dragMove(e) {
      // console.log(e.touches[0].clientX);
      let newLeft = 0;
      if (
        (this.circleLeft >= startPageX - e.touches[0].clientX &&
          startPageX - e.touches[0].clientX >= 0) ||
        (this.circleLeft <= 396 + startPageX - e.touches[0].clientX &&
          startPageX - e.touches[0].clientX <= 0)
      ) {
        newLeft = (e.touches[0].clientX - startPageX) * 2;
        startPageX = e.touches[0].clientX;
        this.circleLeft = newLeft + this.circleLeft;
        let newPosition = this.innerAudioContext.currentTime;
        newPosition = this.circleLeft / 396 * this.innerAudioContext.duration;
        this.innerAudioContext.seek(newPosition);
        this.$apply();
        if (this.innerAudioContext.paused) {
          this.innerAudioContext.play();
          this.playState = true;
          this.$apply();
        }
      }
    },
    updateTime: () => {
      this.circleLeft =
        this.innerAudioContext.currentTime /
        this.innerAudioContext.duration *
        396;
      this.currentTime = `${
        Math.round(this.innerAudioContext.currentTime / 60) < 10
          ? `0${Math.round(this.innerAudioContext.currentTime / 60)}`
          : `${Math.round(this.innerAudioContext.currentTime / 60)}`
      }:${
        Math.round(this.innerAudioContext.currentTime % 60) < 10
          ? `0${Math.round(this.innerAudioContext.currentTime % 60)}`
          : `${Math.round(this.innerAudioContext.currentTime % 60)}`
      }`;
      this.duration = `${
        Math.round(this.innerAudioContext.duration / 60) < 10
          ? `0${Math.round(this.innerAudioContext.duration / 60)}`
          : `${Math.round(this.innerAudioContext.duration / 60)}`
      }:${
        Math.round(this.innerAudioContext.duration % 60) < 10
          ? `0${Math.round(this.innerAudioContext.duration % 60)}`
          : `${Math.round(this.innerAudioContext.duration % 60)}`
      }`;
      this.$apply();
      setTimeout(this.methods.updateTime, 1000);
    }
  };
  onLoad() {
    this.innerAudioContext = wepy.createInnerAudioContext();
    this.innerAudioContext.src =
      'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46';

    this.innerAudioContext.onPlay(() => {
      this.methods.updateTime();
    });
    this.innerAudioContext.autoplay = true;
    this.innerAudioContext.onError(res => {
      console.log(res.errMsg);
      console.log(res.errCode);
    });
  }
}
</script>

wx：18362981113 经测试可正常使用，有问题可联系我哦~~