위 챗 애플 릿 사용자 정의 음악 진행 바 인 스 턴 스 코드

수요:음악 재생 단 추 를 표시 하고 진행 바 를 수 동 으로 끌 수 있 습 니 다.페이지 에 여러 개의 음악 이 포함 되 어 있 습 니 다.현재 음악 을 재생 할 때 다른 음악 재생 을 중단 합 니 다.
애플 릿 자체 태그 audio
애플 릿 이 자체 적 으로 가지 고 있 는 audio 라벨 은 고정된 스타일 을 포함 하고 최소 크기 입 니 다.현재 항목 에 도 name 과 author 필드 가 포함 되 어 있 지 않 기 때문에 audio 탭 을 포기 합 니 다.
실현 효과 도

음악 데이터 초기 화

<text>{{currentProcess}}</text>
<slider bindchange="" bindtouchstart="" bindtouchend="" max="{{totalProcessNum}}" min="0" value="{{currentProcessNum}}" disabled="{{canSlider}}"></slider>
<text>{{totalProcess}}</text>
<image src="{{audioListObj['q'+questionObj.id].imgUrl}}" data-audioId="q{{questionObj.id}}" bindtap="clickPlayAudio"></image> <!-- clickPlayAudio          -->

src: _this.data.questionObj.audio,
currentProcess: '--:--',//    currentProcessNum         
currentProcessNum: 0,//  
totalProcess: '--:--',
totalProcessNum: 1,
seek: -1,
imgUrl: '../../images/play.png',
canSlider: false //      ，               

재생 버튼 을 누 르 면 이벤트 가 발생 합 니 다.
설명:
•페이지 에 음악 이 많 기 때문에 사용자 가 재생 을 클릭 하고 오디 오 파일 을 불 러 옵 니 다.
•wx.getBackgroundAudioManager()대상 은 같은 시간 에 하나의 audio 파일 만 재생 합 니 다.src 를 다시 할당 할 때 파일 을 전환 합 니 다.
•onTimeUpdate 방법 을 이용 하여 실시 간 으로 재생 진 도 를 업데이트 합 니 다.
•onEnded 방법 은 오디 오 재생 이 끝 난 후 데이터 초기 화 이 벤트 를 처리 합 니 다.
•변수 clickPlayAudioFunction IsRuning 은 사용자 가 연속 으로 단 추 를 누 르 는 것 을 방지 합 니 다.

const _this = this;
 const _data = _this.data;
 //            
 if (_data.clickPlayAudioFunctionIsRuning){
  return ;
 }
 _this.setData({
  clickPlayAudioFunctionIsRuning: true
 })
 var _obj = _this.data.audioListObj;
 const audioId = $this.currentTarget.dataset.audioid;
 var backgroundAudioManager = wx.getBackgroundAudioManager();
 if (_this.data.audioListObj[audioId].imgUrl == '../../images/play.png'){
  console.log('       ')
  //             
  for (var j in _this.data.audioListObj) {
  if (j && _this.data.audioListObj[j]) {
   _this.data.audioListObj[j].imgUrl = '../../images/play.png';
  }
  }
  _this.setData({
  audioListObj: _this.data.audioListObj,
  })
  //        
  wx.stopBackgroundAudio();
  _obj[audioId].imgUrl = '../../images/paused.png';
  backgroundAudioManager.title = '  ';
  //        
  if (_this.data.audioListObj[audioId].currentProcessNum != 0){
  backgroundAudioManager.startTime = _this.data.audioListObj[audioId].currentProcessNum;
  }
  backgroundAudioManager.src = _this.data.audioListObj[audioId].src;
  _obj[audioId].canSlider = true;
  backgroundAudioManager.play();
  //             
  backgroundAudioManager.onEnded(function () {
  var _obj = _this.data.audioListObj;
  _obj[audioId].imgUrl = '../../images/play.png';
  _obj[audioId].currentProcess = 0;
  _obj[audioId].currentProcessNum = 0;
  _this.setData({
   audioListObj: _obj
  })
  })
  //            
  backgroundAudioManager.onTimeUpdate(function (callback) {
  _obj = _this.data.audioListObj;
  //     
  if (_obj[audioId] && _obj[audioId].totalProcess && (_obj[audioId].totalProcess == '--:--' || _obj[audioId].totalProcess == '00:00')) {
   console.log(_this.formatTime(backgroundAudioManager.duration))
   _obj[audioId].totalProcess = _this.formatTime(backgroundAudioManager.duration);
   _obj[audioId].totalProcessNum = backgroundAudioManager.duration;
   _this.setData({
   audioListObj: _obj
   })
  }
  if (!_this.data.isMovingSlider) {
   //    
   _obj[audioId].currentProcess = _this.formatTime(backgroundAudioManager.currentTime);
   _obj[audioId].currentProcessNum = backgroundAudioManager.currentTime;
   _this.setData({
   audioListObj: _obj
   })
  }
  })
 } else if (_this.data.audioListObj[audioId].imgUrl == '../../images/paused.png'){
  console.log('       ')
  _obj[audioId].imgUrl = '../../images/play.png'
  wx.pauseBackgroundAudio();
  backgroundAudioManager.pause();
 }
 _this.setData({
  audioListObj: _obj,
  clickPlayAudioFunctionIsRuning: false
 })

슬라이딩 진행 바 트리거 이벤트

const _this = this;
 const _data = _this.data;
 const _obj = _this.data.audioListObj;
 const position = $this.detail.value;
 const audioId = $this.currentTarget.dataset.audioid;
 var backgroundAudioManager = app.globalData.bgAudioListManager;
  _obj[audioId].currentProcess = _this.formatTime(position);
  _obj[audioId].currentProcessNum = position;

  //      
  if (_obj[audioId].imgUrl == '../../images/paused.png'){
  _obj[audioId].seek = position;
  if (_obj[audioId].seek != -1) {
   wx.seekBackgroundAudio({
   position: Math.floor(position),
   })
   _obj[audioId].seek = -1;
  }
  }
  _this.setData({
  audioListObj: _obj
  })

슬라이딩 시작 트리거 이벤트

this.setData({
  isMovingSlider: true
 });

종료 슬라이딩 트리거 이벤트

 this.setData({
  isMovingSlider: false
 });

총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 위 챗 애플 릿 이 음악 진도 바 를 사용자 정의 하 는 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!