js 음악 재생 제어 바 실현

머리말
html 5 에서 audio 라벨 을 제공 합 니 다.이 라벨 은 오디 오 재생 을 실현 합 니 다.그 전에 오디 오 와 비디오 재생 에 관심 이 많 았 고 오디 오 와 비디오 재생 모듈 을 스스로 실현 하려 고 했 습 니 다.이것 도 이 글 이 작성 한 취지 입 니 다.최근 에 시간 이 걸 려 서 Audio 재생 제어 바 를 실현 하 였 습 니 다.이 작은 모듈 실현 에서 도 이전에 접 하지 못 했 던 지식 을 배 웠 다.
오디 오 실현 사고
브 라 우 저 원본 에서 제공 하 는 audio 의 스타일 은 비교적 간단 하고 그다지 예 쁘 지 않 습 니 다.원본 에서 제공 하 는 스타일 은 다음 과 같 습 니 다.

자동 으로 실 현 된 음악 재생 컨트롤 바 의 효 과 는 다음 과 같다.

이 음악 재생 제어 바 가 실현 하 는 기능 은 다음 과 같다.

음악 재생(가장 기본 적 인)

여러 곡 의 음악의 수 동 전환 과 자동 전환 으로 순환 재생

진도 표 클릭 재생 진도 의 변화

진도 바 드래그 재생 진도 의 변화

볼 륨 바 꾸 기

볼 륨 드래그 변경

구체 적 인 실현 효과:

다음은 구체 적 인 기능 의 실현 에 대해 구체 적 으로 전개 하고 실 현 된 음악 재생 통제 진 도 는 주로 학습 사용 이 며 호환성 을 고려 하지 않 았 다.다음은 각 기능 의 실현 방향 을 설명 한다.
전체
전체 음악 재생 의 제어 바 텀 은 브 라 우 저 audio 태그 로 이 루어 집 니까?audio api 를 호출 하여 전체적인 기능 을 실현 합 니 다.다음은 현재 제어 바 의 html 구조 입 니 다.

<div class="audio">
 <audio></audio>
 <div class="audio-controller">
 <span class="audio-prev"></span>
 <span class="audio-state"></span>
 <span class="audio-next"></span>
 </div>
 <div class="audio-bar">
 <span class="audio-time-current"></span>
 <div class="audio-progress">
  <div>
  <div></div>
  <div></div>
  </div>
  </div>
 <span class="audio-time-duration"></span>
 </div>
 <div class="audio-volume">
 <span class="audio-volume-icon"></span>
 <div class="audio-volume-adjust">
  <div>
  <div></div>
  <div></div>
  </div>
 </div>
 </div>
</div>

audio-controller:재생 을 제어 하고 노래 를 전환 하 는 영역 입 니 다.
audio-bar:시간 과 노래 진도 의 영역 입 니 다.
audio-volume:볼 륨 조절 영역 입 니 다.
재생 영역
이 지역 은 음악의 재생,일시 정지,전환(이전 곡,다음 곡)을 실현 합 니 다.이 부분 은 설명 할 필요 가 없습니다.사실은 audio api 에서 play(),pause()로 재생 과 일시 정 지 를 실현 합 니 다.노래의 전환 은 바로 배열 요소 의 변화 이 고 src 주 소 를 수정 하 는 것 입 니 다.
진도 영역
이 구역 은 전체 모듈 의 핵심 부분 으로 이 구역 의 주요 기능 점 은:

진도 효과 실현

미끄럼 효과 실현

먼저 진도 실현,사고방식 은:
1.진도 조 는 두 개의 div 로 구성 되 어 있다.

//               
<div>
 //           
 <div></div>
</div>

2.진도 바 를 클릭 하면 최근 부모 요소 에 비해 x 축 방향 오프셋 을 가 져 옵 니 다.
3.오프셋 은 내부 div 의 실제 너비 로 배경 색 을 설정 합 니 다.
4.슬라이더 의 위 치 는 left 의 값 을 설정 하지만 left 의 값 은:오프셋-슬라이더 너비/2 입 니 다.
미끄럼 의 실현,이 모듈 작성 에서 html 5 의 드래그 api 를 사용 하지 않 고 mousedown,mousemove,mouseup 으로 이 루어 집 니 다.구체 적 으로
구현 코드:

 //     
 bar.addEventListener('mousedown', function(e) {
 e.stopPropagation();
 //                X  
 options.clientX = e.clientX;
 //    
 options.left = this.offsetLeft;
 options.max = bgNode.offsetWidth - this.offsetWidth / 2;
 options.isDrag = true;
 });
 document.addEventListener('mousemove', function(e) {
 e.stopPropagation();
 if (options.isDrag) {
  let currentClientX = e.clientX,
  left = options.left,
  max = options.max,
  initClientX = options.clientX,
  barHalfWidth = bar.offsetWidth / 2,
  fgWidth = 0,
  //           (x      )
  to = Math.max(0, Math.min(max, left + (currentClientX - initClientX)));

  bar.style.left = to + 'px';
  if (to > barHalfWidth) {
  fgWidth = to + barHalfWidth;
  }
  fgNode.style.width = Math.max(0, fgWidth) + 'px';
  options.offsetX = Math.max(0, fgWidth);
 }
 });

 bgNode.parentNode.addEventListener('mouseup', function(e) {
 e.stopPropagation();
 if (options.isDrag) {
  //        
  tools.timeUpdateOrVolumeUpdate(options.offsetX, type);
  options.isDrag = false;
 }
 });

쉽게 말 하면:
mousemove 에서 현재 마우스 가 문서 에 있 는 X 축 방향 위치-초기 위치+요소 의 초기 오프셋 을 가 져 옵 니 다.
진 도 는 실제 div 의 너비 로 표 시 됩 니 다.동적 으로 width 의 값 과 슬라이더 의 left 값 을 바 꾸 어 진도 효 과 를 실현 합 니 다.
여기 서 주의해 야 할 것 은:
현재 진도 바 의 총 너비 와 오디 오 총 시간 간 의 비례 관 계 를 계산 하여 서로 다른 오디 오 시간 점 에 대응 하 는 진도 의 길 이 를 계산 하 는 것 이 기본 입 니 다.
사실 이것 도 매우 계산 하기 쉽다.
비율:width/duration
지정 한 시간의 너비:(width/duration)*currentTime
음량 조절 의 실현 은 진도 와 비슷 하 며 주로 volume 의 실현 을 바 꾸 는 것 이다.
다음은 이 모듈 에 존재 하 는 문제점 을 말씀 드 리 겠 습 니 다.
슬라이더 효 과 는 때때로 자 연 스 럽 고 원활 하지 못 하 다.
오디 오 파일 처리 시간 이 부족 합 니 다.
시작 할 때 진도 가 안 좋았어 요.
코드 회의 에서 제Github에 전 달 됐 습 니 다.이 모듈 은 앞으로 개선 이 필요 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.