본문 바로가기

개발/Web

wavesurfer events (이벤트)

wavesurfer 인스턴스 생성 후 다음 이벤트를 사용 가능

 

예시)

wavesurfer.on('pause', function () {
    wavesurfer.params.container.style.opacity = 0.9;
});

1. 이벤트 목록

audioprocess - 오디오 재생중, 재생 커서 위치 지정시 이벤트 발동

dblclick - 인스턴스 더블클릭시 이벤트 발동
destroy - 인스턴스 파괴시 이벤트 발동

error - 오류 발생시 이벤트 발동, 콜백은 문자열 형식의 오류 메시지를 수신

finish - 재생이 끝나면 이벤트 발동

interaction - 파형과 상호작용시 이벤트 발동

loading - 가져오기, 드래그 앤 드롭 등으로 로드 시 계속 이벤트 발동, 콜백은 [0..100] 퍼센트로도 진행률 계산하여 수신

mute - 음소거 설정 변경 시 이벤트 발동, 콜백은 새로운 음소거 상태를 수신

pause - 오디오 일시 정지시 이벤트 발동

play - 오디오 재생시 이벤트 발동

ready - 오디오 로드 되고 디코딩 후 파형이 그려지기 전 이벤트 발생 (MediaElement 사용), waveform-ready 참조

scroll - 스크롤바가 움직일 때 발동, 콜백은 ScrollEvent 객체를 수신

seek - 재생 커서 위치 변경 시 발동, 콜백은 float 형식으로 진행률을 수신 [0..1]

volume - 볼륨 변경시 발동, 콜백은 int 형식으로 새 볼륨을 수신 

waveform-ready - MediaElement 백엔드를 사용할 때 파형이 그려진 후 이벤트 발동, WebAudio 백엔드를 사용하는 경우 사용할 수 있으며 ready 이벤트를 사용 가능

zoom - 확대, 축소 시 발동, 콜백은 int 형의 minPxPerSec을 수신

 

# 참고자료

wavesurfer-js.org/docs/events.html

반응형

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

[Javascript] 장식자(Decorator)  (0) 2020.11.16
Nginx CORS 활성화  (0) 2020.09.26
wavsurfer.js method(메서드)  (0) 2020.09.18
wavesurfer.js  (0) 2020.09.17
카카오톡 공유 api 사용  (0) 2020.09.14