[JS] 오디오파형 라이브러리 wavesurfuer.js

wavesurfuer.js

wavesurfuer.js 는 Web Audio API 및 HTML5 Canvas를 사용하는 사용자 정의 가능한 파형 오디오 시각화 라이브러리입니다. 브라우저에서 오디오 데이터와 시각적으로 상호 작용할 수 있는 유연한 방법을 제공합니다.

 

시작하기

패키지를 설치하고 가져온다

npm install --save wavesurfer.js

import WaveSurfer from 'wavesurfer.js'

또는 라이브러리를 전역 WaveSurfer변수로 내보내는 UMD 스크립트 태그를 삽입하세요.

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

 

wavesurfer 인스턴스를 생성하고 다양한 옵션을 전달합니다 .

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#4F4A85',
  progressColor: '#383351',
  url: '/audio.mp3',
})

 

플러그인 중 하나(예: regions 플러그인)를 가져오려면 :

import Regions from 'wavesurfer.js/plugins/regions'

또는 내보낼 스크립트 태그로 다음을 수행합니다 

<script src="https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.min.js"></script>

 

wavesurfer 옵션

• container: HTMLElement | string- 필수: 파형이 렌더링될 HTML 요소 또는 선택기입니다.
• height: number | 'auto'- 픽셀 단위의 파형 높이 또는 컨테이너 높이를 채우는 "자동"
• waveColor: string | string[] | CanvasGradient- 파형의 색상
• progressColor: string | string[] | CanvasGradient- 진행 마스크의 색상
• cursorColor: string- 플레이팩 커서의 색상
• cursorWidth: number- 커서 너비
• barWidth: number- 다음과 같이 막대가 있는 파형을 렌더링합니다. ▂ ▇ ▃ ▅ ▂
• barGap: number- 막대 사이의 간격(픽셀 단위)
• barRadius: number- 막대의 둥근 테두리
• barHeight: number- 파형의 수직 스케일링 인자
• barAlign: 'top' | 'bottom'- 수직 막대 정렬
• minPxPerSec: number- 오디오의 초당 최소 픽셀(예: 확대/축소 수준)
• fillParent: boolean- 파형을 늘려 컨테이너를 채웁니다. 기본적으로 true입니다.
• url: string- 오디오 URL
• peaks: Array<Float32Array | number[]>- 사전 계산된 오디오 데이터
• duration: number- 미리 계산된 기간
• media: HTMLMediaElement- 미디어 요소를 만드는 대신 기존 미디어 요소를 사용하세요.
• autoplay: boolean- 로드 시 오디오 재생
• interact: boolean- 파형 클릭을 비활성화하려면 false를 전달합니다.
• hideScrollbar: boolean- 스크롤바 숨기기
• audioRate: number- 오디오 속도
• autoScroll: boolean- 컨테이너를 자동으로 스크롤하여 뷰포트의 현재 위치를 유지합니다.
• autoCenter: boolean- autoScroll이 활성화된 경우 재생 중에 커서를 파형 중앙에 유지합니다.
• sampleRate: number- 샘플링 속도 디코딩. 재생에는 영향을 주지 않습니다. 기본값은 8000입니다.
• splitChannels: WaveSurferOptions[]- 각 오디오 채널을 별도의 파형으로 렌더링
• normalize: boolean- 파형을 전체 높이로 늘립니다.
• plugins: GenericPlugin[]- 시작 시 초기화할 플러그인 목록
• renderFunction: (peaks: Array<Float32Array | number[]>, ctx: CanvasRenderingContext2D) => void- 사용자 정의 렌더링 기능
• fetchParams: RequestInit- fetch 메소드에 전달할 옵션

 

wavesurfer 이벤트

• load: [url: string]- 오디오 로딩이 시작될 때
• loading: [percentage: number]- 오디오가 로드되는 경우
• decode: [duration: number]- 오디오가 디코딩된 경우
• ready: [duration: number]- 오디오가 디코딩되어 재생할 수 있는 경우
• redraw: []- 파형을 그릴 때
• play: []- 오디오 재생이 시작될 때
• pause: []- 오디오가 일시 정지될 때
• finish: []- 오디오 재생이 끝나면
• timeupdate: [currentTime: number]- 오디오 위치 변경 시 재생 중에 계속해서 발생합니다.
• audioprocess: [currentTime: number]- timeupdate의 별칭이지만 오디오가 재생될 때만 해당됩니다.
• seeking: [currentTime: number]- 사용자가 새로운 위치를 찾고 있는 경우
• interaction: [newTime: number]- 사용자가 파형과 상호 작용할 때(클릭하거나 드래그하는 경우)
• click: [relativeX: number]- 사용자가 파형을 클릭할 때
• drag: [relativeX: number]- 사용자가 커서를 드래그할 때
• scroll: [visibleStartTime: number, visibleEndTime: number]- 파형을 스크롤(패닝)할
• zoom: [minPxPerSec: number]- 확대/축소 수준이 변경될 때
• destroy: []- 파형이 파괴되기 직전에 이벤트를 정리할 수 있습니다.

 

플러그인

• Regions – 오디오 지역에 대한 시각적 오버레이 및 마커
• Timeline – 파형 아래에 노치와 시간 라벨을 표시합니다.
• Minimap  – 기본 파형의 스크롤 막대 역할을 하는 작은 파형
• Envelope – 페이드인 및 페이드아웃 효과를 추가하고 볼륨을 제어하는 ​​그래픽 인터페이스
• Record – 마이크의 오디오를 녹음하고 파형을 렌더링합니다.
• Spectrogram – 오디오 주파수 스펙트럼 시각화(@akreal 작성)
• Hover – 파형 호버에 수직선과 타임스탬프를 표시합니다.

 

Examples

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

wavesurfer.js | audio waveform player JavaScript library

<div id="waveform">
  <!-- the waveform will be rendered here -->
</div>

<script type="module">
import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#4F4A85',
  progressColor: '#383351',
  url: '/audio.mp3',
})

wavesurfer.on('interaction', () => {
  wavesurfer.play()
})
</script>

 

 

 

 

정리 출처 : https://wavesurfer-js.org/docs/