微信小程序怎么使用slider實現音頻進度條

這篇文章主要介紹了微信小程序怎么使用slider實現音頻進度條的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇微信小程序怎么使用slider實現音頻進度條文章都會有所收獲，下面我們一起來看看吧。

微信小程序的slider組件，效果如圖：

長的跟進度條還是蠻相似的。

下面上代碼 

 slider是進度條，bindchange是slider的拖動事件，playtime 已播放時間，alltime 總時間

<view class='slider'>
    <slider bindchange='sliderChange' activeColor='red' block-size="12" value='{{audioTime}}' />
</view>
<view class='time'>
    {{playtime}} / {{alltime}}
</view>

首先要初始化一個音頻播放器，然后要獲取音頻的總時長duration，然后需要把這個時長轉換成00:00這樣的格式顯示

var _self = this;
var innerAudioContext = this.data.innerAudioContext;
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}`;
      }
      _self.setData({
         audioDuration: duration,
         alltime: `${min}:${sec}`
      });
   }, 1000)
})

下面就是開始播放的時候設置一個定時器，每一秒更新進度條的百分比，顯示當前播放的時間，停止的時候把計時器停止就可以了，這樣播放就完成了

//設置一個計步器
clearInterval(this.data.durationIntval);
    this.data.durationIntval = setInterval(function () {
      //當音頻在播放時執行
      if (_self.data.playing) {
        //獲取音頻的播放時間，進度百分比
        var seek = _self.data.audioSeek;
        var duration = innerAudioContext.duration;
        //當音頻在播放時，每隔一秒音頻播放時間+1，并計算分鐘數與秒數
        var min = parseInt((seek + 1) / 60);
        var sec = parseInt((seek + 1) % 60);
        if (min.toString().length == 1) {
          min = `0${min}`;
        }
        if (sec.toString().length == 1) {
          sec = `0${sec}`;
        }        
        //當進度條完成，停止播放，并重設播放時間和進度條        
        var time = _self.data.audioTime;
        time = parseInt(100 * seek / duration);
        if (time >= 100) {
          innerAudioContext.stop();
          _self.setData({
            audioSeek: 0,
            audioTime: 0,
            audioDuration: duration,
            playing: 0,
            playtime: `00:00`,
          });
          return false;
        } else {
          //正常播放，更改進度信息，更改播放時間信息
          _self.setData({
            audioSeek: seek + 1,
            audioTime: time,
            audioDuration: duration,
            playtime: `${min}:${sec}`
          });
        }
      }
      console.log(_self.data);
    }, 1000);

下面就是要處理進度條的拖動事件，這個就比較簡單了，就是獲取進度條的百分比，轉換成相應的播放時間，跳轉到音頻相應的時間進行播放就可以了

var _self = this;
    //獲取進度條百分比
    var value = e.detail.value;
    _self.setData({
      audioTime: value
    });
    var duration = _self.data.audioDuration;
    //根據進度條百分比及歌曲總時間，計算拖動位置的時間
    value = parseInt(value * duration / 100);
    console.log(value);
    //更改狀態
    _self.setData({
      audioSeek: value
    });
    var innerAudioContext = _self.data.innerAudioContext;
    //調用seek方法跳轉音頻時間
    innerAudioContext.seek(value);
    //播放音頻
    innerAudioContext.play();

關于“微信小程序怎么使用slider實現音頻進度條”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“微信小程序怎么使用slider實現音頻進度條”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。