微信小程序 带可拖动进度条和时间显示的音频播放器

已更新更为强大版本的具有背景播放功能的播放器，以下为传送门：

https://blog.csdn.net/qq_42228034/article/details/100578572

此版本仅具有参考意义

周知，微信官方自带的音频播放器是没有进度条的，为了实现有进度条，并且拖动，只能自己写一个了；

下面是演示图

①页面加载完成后，能够直接显示音频的时长

②播放时，进度条变化，播放时间变化，拖动进度条可以跳转到改进度播放

话不多说，直接上代码

首先是微信官方所提倡的代码片段的方式：

wechatide://minicode/0tLe2xmA7x2O

      如果不能用那么请使用以下代码：

wxml：

<view class='audioPlayer'>
  <view class='player'>
    <image src='{
  {audiolist[0].coverimg}}' class='audioBack'></image>
    <view class='audioControls'>
      <view class='flex'>
        <view class='bottom' catchtap='playAudio'>
          <!-- 按钮 -->
          <view wx:if="{
  {isPlayAudio}}">
            <image src='../../assets/pause.png' />
          </view>
          <view wx:else>
            <image src='../../assets/play.png' />
          </view>
        </view>
        <view class='slider'>
          <slider bindchange='sliderChange' activeColor='red' block-size="12" value='{
  {audioTime}}' />
        </view>
        <view class='time'>
          {
  {showTime1}}/{
  {showTime2}}
        </view>
      </view>