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/