@smrcdev/drawaudio v1.0.2

drawaudio

drawaudio with HTML5 Canvas

Installation

npm i @smrcdev/drawaudio --save

How to Use

*Vue에서 사용가능하며, 다른 프레임워크에서는 동작을 보장하지 않음

1. import { load } from 'drawaudio';
2. HTML상에 웨이브폼을 그려줄 빈 div를 하나 만들어 준다 ex) <div id="waveform-drawer>
3. 위에서 만든 div를 load 함수에 다음과 같이 넣어준다 ex) const area = document.getElementById('waveform-drawer')
4. 다음과 같이 설정값들을 세팅한 뒤 load 에 넣어준다 const settings = { area: area, width: 512, height: 256, trackColor: 'rgba(51,51,51,1)', displayedColor: 'rgba(255,0,0,1)' } load(this.audioData, settings)

Options

area: 웨이브폼을 그려줄 영역 width: 전체 캔버스의 가로 길이 height: 전체 캔버스의 세로 길이 trackColor: 트랙의 색깔 displayedColor: 웨이브폼의 색깔