본문 바로가기

개발/Web

wavesurfer.js

1. wavesurfer 설치

1-1. script 로드

<script src="https://unpkg.com/wavesurfer.js"></script>

1-2. github 저장소 포크 or 다운로드

https://github.com/katspaugh/wavesurfer.js

1-3. CDN (Content Delivery Network)

<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.4.0/wavesurfer.min.js"></script>

 

1-4. wavesurfer 을 사용할 컨테이너 생성

<div id="waveform"></div>

1-5. javascript 에서 wavesurfer 객체 인스턴스 생성

var wavesurfer = WaveSurfer.create({
	container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple'
});

1-6. 오디오 로드

wavesurfer.load('audio.wav');

2. wavesurfer create option

옵션 타입 기본값 설명
audioRate float 1 오디오 플레이 속도 조절, 숫자가 낮을 수록 느린 재생 속도
audioContext object none 미리 생성된 AudioContext 의 사용 여부
audioScriptProcessor object none 미리 생성된 ScriptProcessorNode 의 사용 여부
autoCenter boolean true 스크롤 바가 있는 경우 프로그래스를 중앙으로 파형 배치
backend string WebAudio WebAudio, MediaElement 나 MediaElementWebAudio, MediaElement 가 지원되지 않는 브라우저에 대한 대체
backgroundColor string none waveform 컨테이너의 배경색 변경
barGap number none 파형 사이의 간격
barHeight number 1 파형 막대의 높이
barMinHeight number null 파형 막대를 그리기 위한 최소 높이 
barRadius number 0 막대의 둥근 정도
barWidth number none 파형의 두께
closeAudioContext boolean false destory 메서드가 호출되면 모든 오디오 컨텍스트를 닫고 무효화합니다.
container mixed none 파형을 그려야하는 CSS 선택자 혹은 HTML 요소, 필수값
cursorColor string #333 재생 헤드 위치를 나타내는 커서의 색상
cursorWidth int 1 커서의 넓이 (픽셀 단위)
drawingContextAttributes object {desynchronized: true} 캔버스 2d 도면 컨텍스트 속성 지정 
fillParent boolean true 전체 컨테이너를 채우거나 따라 그리는 여부 mixPxPerSec
forceDecode boolean false 확대,축소 시 웹 오디오를 사용하여 오디오를 강제 디코딩하여 더 자세한 파형을 얻음
height int 128 파형의 높이
hideScrollbar boolean false 수평 스크롤바의 표시 여부
interact boolean true 초기화시 마우스 상호작용 활성화 여부
loopSelection boolean true 선택한 지역의 반복을 활성화
maxCanvasWidth int 4000 단일 캔버스의 최대 너비, 픽셀 단위
mediaControls boolean false (backend 와 함께 사용)
미디어 요소에 대한 기본 컨트롤을 활성화
mediaType string audio 'audio', 'video'
backend 와 사용
minPxPerSec int 50 오디오 초당 최소 픽셀 수
normalize boolean false true 일 경우 최대 피크로 정규화
partialRender boolean false PeakCache를 사용하여 큰 파형의 렌더링 속도 향상
pixelRatio int window.devicePixelRatio 더 빠른 렌더링을 위한 설정
plugins array [] 인스턴스화 중 등록할 플러그인의 정의 배열
progressColor string #555 커서 이전에 있는 파형의 채우기 색상
regionsMinLength number null 지역의 기본 minLength(초) 
지역 생성시 minLength 해당 지역에 대한 매개변수를 지정하여 이를 재정의 가능
removeMediaElementOnDestroy boolean true false 플레이어가 파괴될 때 DOM에 미디어 요소를 유지할 경우 설정
logMediaElement 메서드를 통해 기존 미디어 요소를 재사용 할 때 유용 
renderer object MultiCanvas 커스텀 렌더러 삽입 설정
responsive boolean or float false true 시 파형 크기를 조정하도록 설정
창크기가 조정될 경우 100ms 타임 아웃으로 디바운스
이 매개변수가 숫자이면 해당 시간 초과를 나타냄
scrollParent boolean false 긴 파형으로 컨테이너를 스크롤할지 여부
false 시 컨테이너 너비로 축소
skipLength float 2 skipForward() 및 skipBackward() 메서드를 사용하여 건너 뛸 시간 설정(초단위)
splitChannels boolean false 오디오 채널에 대해 별도 파형 렌더링
waveColor string #999 커서 이후의 파형 채우기 색상
xhr object {} XHR 옵션
예시: 
let xhr = { cache: 'default', mode: 'cors', method: 'GET', credentials: 'same-origin', redirect: 'follow', referrer: 'client', headers: [ { key: 'Authorization', value: 'my-token' } ]};

 

# 참고자료

https://wavesurfer-js.org/

'개발 > Web' 카테고리의 다른 글

wavesurfer events (이벤트)  (0) 2020.09.18
wavsurfer.js method(메서드)  (0) 2020.09.18
카카오톡 공유 api 사용  (0) 2020.09.14
Throttle, Debounce  (0) 2020.09.02
CSS Pro-Processor(전처리기) SASS, SCSS, LESS  (0) 2020.08.23