728x90
wavesurfuer.js
wavesurfuer.js 는 Web Audio API 및 HTML5 Canvas를 사용하는 사용자 정의 가능한 파형 오디오 시각화 라이브러리입니다. 브라우저에서 오디오 데이터와 시각적으로 상호 작용할 수 있는 유연한 방법을 제공합니다.
시작하기
패키지를 설치하고 가져온다
npm install --save wavesurfer.jsimport 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
wavesurfer-js.org
<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/
728x90
