[React] 오디오 이퀄라이저"EQ(Equalizer)"구현하기(@dschoon/react-waves라이브러리) - Vitrual Studio기준

구현 예시 사진(배경X)

목차

이퀄라이저 (EQ)란?

구현 예시

React Wave 사용 과정

• React Wave 설치
• React Wave 컴포넌트 사용

 

1. 이퀄라이저 (EQ)란?

• "EQ"는 "이퀄라이저"의 줄임말로, 음악이나 오디오의 주파수 대역별로 음량을 조절하는 기술입니다. 이를 시각화한 것을 "음악 시각화 EQ"라고 합니다. 주로 음악 시각화 프로그램이나 앱에서 사용되며, 음악의 주파수 구성을 시각적으로 확인하거나 변화를 보여줄 때 활용합니다.
  
  

2. 구현 예시

• 이 프로젝트에서는 React 라이브러리를 사용하여 오디오 주파수를 시각화하는 과정을 구현할 것입니다. 이것은 음악의 주파수 대역을 시각적으로 표현하는 것입니다. 여기서는 DB와의 연동 등 다양한 추가 기능은 고려하지 않습니다. 컴포넌트의 개수는 적을 것이며, 주로 오디오 시각화에 초점을 맞출 것입니다.

 

3. React Wave 사용 과정

• "React Wave"는 웹 애플리케이션에서 오디오 시각화를 위한 React 컴포넌트 라이브러리입니다. 오디오 웨이브폼을 그려주는 이 라이브러리를 사용하는 과정을 알아보겠습니다.

 

3.1. React Wave 설치

• 먼저 프로젝트 폴더에서 터미널을 열고, 다음 명령어로 React Waves 라이브러리를 설치합니다. (반드시 프로젝트 폴더에서 설치해야 합니다.)
• 설치에서 오류가 난다면 "--force 옵션"을 추가하여 강제로 설치할 수 있습니다. 하지만 충돌이 일어날 수 있으므로 주의해야 합니다.

https://www.npmjs.com/package/@dschoon/react-waves

@dschoon/react-waves

위에 라이브러리를 참고하시면 되겠습니다.

 

Yarn

yarn add @dschoon/react-waves

npm

npm install @dschoon/react-waves

 

3.2. React Wave 컴포넌트 사용

• "React Wave"는 "웹 애플리케이션"에서 오디오 시각화를 위한 React 컴포넌트 라이브러리입니다. 아래의 예시 코드를 통해 사용 방법을 설명하겠습니다.

프로젝트 구조

1. public 폴더
   • index.html
   • audio_file.mp3
2. src 폴더
   • App.jsx
   • App.css
   • index.js

App.jsx

import React, { useState } from 'react';
import { ReactWaves } from '@dschoon/react-waves';

function App() {
  const [playing, setPlaying] = useState(false); // 오디오 재생 상태 관리

  // 재생 버튼 클릭 시 오디오 재생 함수
  const playAudio = () => {
    setPlaying(true); // playing 상태를 true로 설정하여 재생 상태로 변경
  };
  
  return (
    <div className="App">
      <h1>React Waves</h1>
      <button onClick={playAudio}>Play</button> {/* 재생 버튼 */}
      <ReactWaves
        audioFile="/audio_file.mp3" // 시각화할 오디오 파일 경로(public폴더에 있다고 가정)
        options={{
          barWidth: 2, // 웨이브의 바(진행 상태 바) 너비를 설정합니다.
          cursorWidth: 1, // 커서(재생 위치를 나타내는 선)의 너비를 설정합니다.
          height: 200, // 웨이브 시각화의 높이를 설정합니다.
          hideScrollbar: true, // 스크롤바가 UI를 방해하지 않도록 합니다.
          responsive: true, // 반응형 디자인이 활성화되면 웨이브가 화면 크기에 동적으로 조정됩니다.
          progressColor: '#f8ad00', // 진행 상태 바의 색상을 설정합니다.
          waveColor: '#ffffff', // 웨이브의 색상을 설정합니다.
        }}
        playing={playing} // 오디오 재생 상태 여부
      />
    </div>
  );
}

export default App;

• 위의 코드에서 audio_file.mp3는 시각화할 오디오 파일의 경로입니다. 이 파일은 프로젝트 폴더에 포함되거나, URL을 사용하여 외부 파일을 참조할 수 있습니다.
• 위의 구성을 통해 React 애플리케이션에서 오디오 주파수를 시각화하는 EQ 컴포넌트를 구현할 수 있고, 주석 처리된 progressColor, waveColor 통해 UI를 디자인할 수 있습니다. 이 프로젝트를 시작으로 다양한 기능을 추가하고 확장할 수 있습니다.^^

1.