[React] wavesurfer.js 라이브러리 사용 썰(+ aws cors 설정)

KimJelly·2023년 2월 27일

React-library

목록 보기

1/1

With wavesurfer.js you can create anything from an HTML5 audio player to a sophisticated DJ application.
(..ㄹㅇ진짜임)
출처 : https://wavesurfer-js.org/

개쩌는 라이브러리다.
음원을 분석해 파형을 웹에 나타내는 작업을 해야했는데, 처음엔 직접 하나하나 뜯어 구현할 생각에 기간 걱정을 했다. 그러다 서치를 통해 이 라이브러리를 발견했는데 구세주가 따로 없었다. react에 이를 적용했던 방법에 대해 기억나는대로 적어보려한다.

🥸 적용했던 기억을 더듬어보자

index.html

먼저 index.html에 아래 스크립트를 추가해줬다.

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

AudioCard.js

그 다음, 아래처럼 오디오 카드 구역을 설정해준다.

// wavesurfer
...
import WaveSurfer from "wavesurfer.js";

...
const waveform = useRef(null);
return(
  ...
  <div ref={waveform}></div>
  ...
)
...

id나 useState를 사용해도 되지만, 즉시 적용을 위해 ref를 사용해줬다.

const wavesurfer = useRef(null);
const audioURL = "audio/audio.mp3";
const [colorType, setColorType] = useState(null);

useEffect(() => {
	if(waveform.current){
      // waveform.current가 읽혀지면 시작됨
      wavesurfer.current = 
        WaveSurfer.create({
          container: waveform.current, // ref로 연결했기 때문에 current로 연결해주기
          barWidth: 4, // 막대 하나의 width값
          barHeight: 1,
          barGap: 2,
          progressColor: colorType,
          waveColor: '#eee',
      	});
      wavesurfer.current.load(audioURL);
    }
},[])