[SoundHub] 오디오 파일 파형 그리기

27 Jan 2018

Reading time ~3 minutes

SoundHub 프로젝트에 오디오 파형을 그려주는 기능을 추가하기 위해 직접 Javascript로 구현 해보기로 마음먹고 도전을 했으나 처참히 실패했다. 그래서 이미 구현되어있는 라이브러리를 가져와서 사용하기로 하고 찾아본 결과 Wavesurfer 라는 라이브러리가 좀 잘 되어있는 것 같아서 사용해보았다.

이번 포스트에서는 Wavesurfer 라이브러리를 사용하는 방법에 대해서 알아보도록 한다.

Wavesurfer 설치

Wavesurfer는 오픈소스 자바스크립트 라이브러리로 오디오 파일의 파형을 그려주는 기능을 한다.

Github 주소:

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

Github 저장소를 포크하거나 다운받아서 사용하면 된다.

라이브러리를 설치할 html 파일에서 wavesurfer.min.js 파일을 불러와주면 된다.

또는 아래와 같이 CDN(Content Delivery Network) 으로 설치해도 된다.

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

시작하기

설치를 했으면 먼저 파형을 그려줄 위치에 div 를 하나 만들고 id 를 부여해준다.

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

다음으로 자바스크립트에서 WaveSurfer 객체를 새로 생성한다.
WaveSurfer.create 함수에 몇 가지 옵션을 전달하여 생성하는데 이 때 container 옵션은 필수이며 어떤 오브젝트에 파형을 렌더링할 지를 결정하는 옵션이다.

var wavesurfer = WaveSurfer.create({
    // id="waveform" 인 오브젝트에 파형 생성
    // 필수 옵션
    container: '#waveform',
    // 선택 옵션들 
    waveColor: 'violet',
    progressColor: 'purple'
});

마지막으로 .load() 함수에 오디오 오브젝트를 전달하여 실행시키면 된다.

wavesurfer.load('audio.wav');

그럼 아래와 같이 전달된 오디오 파일의 파형이 그려지는 것을 볼 수 있다.

옵션

파형을 생성하는 create 메소드에 여러가지 옵션들을 전달하여 커스터마이징 할 수 있다.
사용가능한 모든 옵션들은 이곳에서 확인할 수 있다.

옵션	타입	기본값	설명
`audioContext`	object	none	미리 생성된 `AudioContext`를 사용하도록 함
`audioRate`	float	`1`	재생 속도. 정상속도는 1.
`barHeight`	number	1	웨이브 폼 막대들의 높이. 1 보다 높은 값을 주면 더 길어지고 그 반대는 작아진다.
`barWidth`	number	none	웨이브 폼 막대들의 넓이. 넓이에 따라 ▁ ▂ ▇ ▃ ▅ ▂ 처럼 생긴 막대를 생성하게 된다.
`container`	mixed	none	웨이브 폼이 그려질 오브젝트의 CSS 선택자 또는 HTML 요소를 전달한다. 유일한 필수 옵션.
`cursorColor`	string	`#333`	현재 위치를 나타내는 커서의 색상을 설정함.
`cursorWidth`	integer	`1`	커서의 넓이.
`fillParent`	boolean	`true`	부모 요소의 넓이를 가득 채워서 렌더링 할지 아니면`minPxPerSec` 옵션에 따라 렌더링할지를 선택함.
`height`	integer	`128`	웨이브 폼 전체의 높이
`hideScrollbar`	boolean	`false`	가로 스크롤바 표시 여부
`minPxPerSec`	integer	`50`	오디오 파일의 1초당 렌더링 될 픽셀 수의 최소값
`normalize`	boolean	`false`	`true` 이면 가장 큰 막대의 길이에 비례하여 막대 높이 설정
`progressColor`	string	`#555`	커서 왼쪽 영역의 파형 색상. 즉, 파형 중 재생된 부분의 색상
`responsive`	boolean	`true`	반응형 웨이브폼 여부
`scrollParent`	boolean	`false`	웨이브 폼이 부모 요소보다 길어서 넘치는 경우 스크롤바를 이용하도록 할 것인지 아니면 부모 요소의 길이에 맞게 줄여서 렌더링할 것인지를 설정.
`waveColor`	string	`#999`	커서 오른쪽 영역의 색상. 즉, 파형 중 재생되지 않은 부분의 색상

아래의 파형은 다음과 같은 옵션들로 렌더링한 결과이다.

barWidth: 3,
progressColor: '#E2B026',
cursorColor: 'transparent',
waveColor: '#333533'

메서드

로드된 WaveSurfer 객체에는 여러가지 메서드들을 호출하여 다양한 기능들을 구현할 수 있다.
모든 사용가능한 메소드들의 목록은 이곳에서 확인 가능하다.

메소드	설명
`play([start[, end]])`	커서가 있는 위치에서부터 음원을 재생함. start, end 값(초 단위)이 주어지는 경우 start 부터 end 까지만 재생함.
`pause()`	일시정지.
`playPause()`	재생 중이면 일시정지, 일시정지 중이면 재생.
`stop()`	정지.
`isPlaying()`	현재 재생 중일 경우 true, 아닌 경우 false를 리턴.
`getCurrentTime()`	커서의 현재 위치를 초단위로 리턴.
`getDuration()`	음원의 전체 길이를 초단위로 리턴.
`on(event, callback)`	event를 등록함. 등록한 event 발생시 callback 함수 실행.

아래 예제의 버튼들은 클릭되었을 시 각각 다음과 같은 메서드를 실행시킨다.

<button onclick="wavesurfer.play()">Play</button>
<button onclick="wavesurfer.pause()">Pause</button>
<button onclick="wavesurfer.stop()">Stop</button>
<button onclick="wavesurfer.playPause()">Play/Pause</button>

이벤트

WaveSurfer 객체에는 on 메소드를 통해 여러가지 이벤트를 등록시켜서 다양한 상황에 따른 동작을 설정해줄 수 있다.
on 메소드의 첫번째 인자로 등록시킬 이벤트를 문자열로 전달해주고 두 번째 인자로 해당 이벤트 발생 시 실행할 함수를 전달해주면 된다.

wavesurfer.on('이벤트', 함수);

등록 가능한 모든 이벤트 목록은 이곳에서 확인 가능하다.

이벤트	설명
`ready`	음원 로딩이 끝난 경우 발생.
`play`	음원 재생이 시작되는 경우 발생.
`audioprocess`	음원이 재생 중인 경우 지속적으로 발생. 음원 탐색 시에도 발생함.
`pause`	음원이 일시정지 될 경우 발생.
`finish`	음원이 끝까지 재생된 경우 발생.

아래의 예제는 ready, audioprocess, pause 이벤트를 등록한 것이다.

wavesurfer.on('ready', function () {
    document.getElementById("msg").innerText = 'Ready '
});

wavesurfer.on('audioprocess', function () {
    document.getElementById("msg").innerText = 'Audio Process ' + wavesurfer.getCurrentTime()
});

wavesurfer.on('pause', function () {
    document.getElementById("msg").innerText = 'Pause'
});

발생한 이벤트: 없음

Reference

wavesurfer.js: https://wavesurfer-js.org/