眾所周知，微信官方自帶的音訊播放器是沒有進度條的，為了實現有進度條，並且拖動，只能自己寫一個了；

下面是演示圖

①頁面載入完成後，能夠直接顯示音訊的時長

②播放時，進度條變化，播放時間變化，拖動進度條可以跳轉到改進度播放

話不多說，直接上程式碼

首先是微信官方所提倡的程式碼片段的方式：

      如果不能用那麼請使用以下程式碼：

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>
    </view>
  </view>
</view>
 

wxss：

.flex{
  display: flex;
}
.audioPlayer{
  width: 100%;
  height: 400rpx;
  margin-bottom: 30rpx;
  box-sizing: border-box;
  padding: 20rpx 30rpx;
}
.player{
  width: 100%;
  height: 100%;
  position: relative;
}
.audioBack{
  width: 100%;
  height: 100%;
}
.audioControls{
  width: 100%;
  height: 80rpx;
  background: black;
  opacity: .8;
  position: absolute;
  bottom: 0;
  color: white;
  font-size: 6pt;
  line-height: 80rpx;
  text-align: center;
}
.audioControls .bottom{
  width: 60rpx;
  height: 100%;
}
.audioControls .bottom image{
  margin-top: 30%;
  margin-left: 30%;
  width: 40rpx;
  height: 40rpx;
}
.audioControls .slider{
  width: 520rpx;
  height: 100%;
}
.slider slider{
  width: 95%;
  margin-left: 4%;
  margin-right: 0;
}
.audioControls .time{
  width: 120rpx;
  height: 100%;
}
 

js：

const app = getApp()
const innerAudioContext = wx.createInnerAudioContext();
Page({
  data: {
    audiolist:[
      {
        audiosrc:'http://other.web.rh01.sycdn.kuwo.cn/resource/n2/16/17/450264753.mp3',
        coverimg:"https://goss.veer.com/creative/vcg/veer/800water/veer-146156021.jpg"
      }
    ],
    isPlayAudio: false,
    audioSeek: 0,
    audioDuration: 0,
    showTime1: '00:00',
    showTime2: '00:00',
    audioTime: 0
  },
  onLoad: function () {
    
  },
  onShow:function(){
    this.Initialization();
    this.loadaudio();
  },
  //初始化播放器，獲取duration
  Initialization(){
    var t=this;
    if (this.data.audiolist[0].audiosrc.length != 0) {
      //設定src
      innerAudioContext.src = this.data.audiolist[0].audiosrc;
      //執行一次
      innerAudioContext.play();
      innerAudioContext.pause();
      innerAudioContext.onCanplay(() => {
        //初始化duration
        innerAudioContext.duration
        setTimeout(function () {
          //延時獲取音訊真正的duration
          var duration = innerAudioContext.duration;
          var min = parseInt(duration / 60);
          var sec = parseInt(duration % 60);
          if (min.toString().length == 1) {
            min = `0${min}`;
          }
          if (sec.toString().length == 1) {
            sec = `0${sec}`;
          }
          t.setData({ audioDuration: innerAudioContext.duration, showTime2: `${min}:${sec}` });
        }, 1000)
      })
    }
  },
  //拖動進度條事件
  sliderChange(e) {
    var that = this;
    innerAudioContext.src = this.data.audiolist[0].audiosrc;
    //獲取進度條百分比
    var value = e.detail.value;
    this.setData({ audioTime: value });
    var duration = this.data.audioDuration;
    //根據進度條百分比及歌曲總時間，計算拖動位置的時間
    value = parseInt(value * duration / 100);
    //更改狀態
    this.setData({ audioSeek: value, isPlayAudio: true });
    //呼叫seek方法跳轉歌曲時間
    innerAudioContext.seek(value);
    //播放歌曲
    innerAudioContext.play();
  },
  //播放、暫停按鈕
  playAudio() {
    //獲取播放狀態和當前播放時間
    var isPlayAudio = this.data.isPlayAudio;
    var seek = this.data.audioSeek;
    innerAudioContext.pause();
    //更改播放狀態
    this.setData({ isPlayAudio: !isPlayAudio })
    if (isPlayAudio) {
      //如果在播放則記錄播放的時間seek，暫停
      this.setData({ audioSeek: innerAudioContext.currentTime });
    } else {
      //如果在暫停，獲取播放時間並繼續播放
      innerAudioContext.src = this.data.audiolist[0].audiosrc;
      if (innerAudioContext.duration != 0) {
        this.setData({ audioDuration: innerAudioContext.duration });
      }
      //跳轉到指定時間播放
      innerAudioContext.seek(seek);
      innerAudioContext.play();
    }
  },
  loadaudio() {
    var that = this;
    //設定一個計步器
    this.data.durationIntval = setInterval(function () {
      //當歌曲在播放時執行
      if (that.data.isPlayAudio == true) {
        //獲取歌曲的播放時間，進度百分比
        var seek = that.data.audioSeek;
        var duration = innerAudioContext.duration;
        var time = that.data.audioTime;
        time = parseInt(100 * seek / duration);
        //當歌曲在播放時，每隔一秒歌曲播放時間+1，並計算分鐘數與秒數
        var min = parseInt((seek + 1) / 60);
        var sec = parseInt((seek + 1) % 60);
        //填充字串，使3:1這種呈現出 03：01 的樣式
        if (min.toString().length == 1) {
          min = `0${min}`;
        }
        if (sec.toString().length == 1) {
          sec = `0${sec}`;
        }
        var min1 = parseInt(duration / 60);
        var sec1 = parseInt(duration % 60);
        if (min1.toString().length == 1) {
          min1 = `0${min1}`;
        }
        if (sec1.toString().length == 1) {
          sec1 = `0${sec1}`;
        }
        //當進度條完成，停止播放，並重設播放時間和進度條
        if (time >= 100) {
          innerAudioContext.stop();
          that.setData({ audioSeek: 0, audioTime: 0, audioDuration: duration, isPlayAudio: false, showTime1: `00:00` });
          return false;
        }
        //正常播放，更改進度資訊，更改播放時間資訊
        that.setData({ audioSeek: seek + 1, audioTime: time, audioDuration: duration, showTime1: `${min}:${sec}`, showTime2: `${min1}:${sec1}` });
      }
    }, 1000);
  },
  onUnload:function(){
    //解除安裝頁面，清除計步器
    clearInterval(this.data.durationIntval);
  }
})
 

wxml裡面的兩張圖片是在assets目錄下的2個圖片，一張為播放，一張為暫停

下面是私貨：

       在我進行開發的時候，還沒有搭建自己的伺服器，線上音源很難找，後面找到兩篇帖子講的是如何獲取酷我音樂的音樂真實路徑；我根據那兩篇帖子，寫了一個簡單的nodeJs的demo；（以下為nodejs程式碼）

      首先進入酷我音樂，開啟歌曲詳情播放頁面，找到位址列中的神祕數字

     使用node或者webstorm等執行下方js，在位址列輸入 localhost:8080?id=神祕數字

      單擊回車，頁面就會顯示歌曲的真實路徑，然後就可以在自己想引用的地方使用了；

     （本方法編輯於2018/09/19）

//酷我音樂，音樂路徑抓取
//網址：http://www.kuwo.cn
var http = require('http');
var url=require('url');
var reg1=/<mp3dl>/;
var reg2=/<\/mp3dl>/;
var reg3=/<mp3path>/;
var reg4=/<\/mp3path>/;


http.createServer(function(req,res1){
    if(req.url!='/favicon.ico'){
        //音樂的id,先進入歌曲詳情播放頁，在位址列中http://www.kuwo.cn/yinyue/40425292?catalog=yueku2016   在yinyue/ 後方 ？ 前方的數字, 如 40425292
        var musicId=req.url.split('=');
        musicId=musicId[1];
        var url = 'http://player.kuwo.cn/webmusic/st/getNewMuiseByRid?rid=MUSIC_'+musicId;
        http.get(url, function(res) {
            var html = '';
            // 獲取頁面資料
            res.on('data', function(data) {
                html += data;
            });
            // 資料獲取結束
            res.on('end', function() {
                var mp3dl=html.split(reg1);
                mp3dl=mp3dl[1].split(reg2);
                var mp3path=html.split(reg3);
                mp3path=mp3path[1].split(reg4);
                var outPut='http://'+mp3dl[0]+'/resource/'+mp3path[0];
                res1.end(outPut);
            });
        }).on('error', function() {
            console.log('獲取資料出錯！');
        });
    }
}).listen(8001);