우선, P5.js에서 오디오 스펙트럼을 분석하려면 ‘p5.sound’ 라이브러리를 사용해야 합니다. 이 라이브러리를 사용하려면 먼저 HTML 파일에 다음과 같은 코드를 추가해야 합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.js"></script>

다음으로, P5.js 스케치에서는 ‘p5.sound’ 라이브러리의 기능을 활용할 수 있습니다. 오디오를 로드하여 스펙트럼을 분석하는 예제 코드는 다음과 같습니다.

let song;
let fft;

function preload() {
  song = loadSound('audio.mp3');
}

function setup() {
  createCanvas(windowWidth, windowHeight);

  fft = new p5.FFT();

  song.play();
}

function draw() {
  background(0);

  let spectrum = fft.analyze();

  noStroke();
  fill(0, 255, 0); // 스펙트럼의 색상 설정
  
  for (let i = 0; i < spectrum.length; i++) {
    let x = map(i, 0, spectrum.length, 0, width);
    let h = -height + map(spectrum[i], 0, 255, height, 0);
    rect(x, height, width / spectrum.length, h);
  }
}

위의 코드에서 audio.mp3는 분석할 오디오 파일의 경로를 의미합니다. preload 함수에서 오디오 파일을 로드하고, setup 함수에서 p5.FFT() 객체를 생성합니다. draw 함수에서는 스펙트럼을 그리는 로직이 구현되어 있습니다.

코드를 실행하면 오디오 파일이 재생되며, 화면에 스펙트럼이 시각적으로 표시됩니다. 스펙트럼의 색상은 fill() 함수의 RGB 값으로 설정할 수 있으며, 스펙트럼의 모양을 원하는 대로 변경할 수 있습니다.

이렇듯 P5.js를 사용하여 오디오 스펙트럼을 분석할 수 있습니다. 추가로 p5.sound 라이브러리에는 다양한 기능들이 있으니 필요에 따라 찾아보시면 더 많은 가능성을 발견하실 수 있을 것입니다.

참고자료:

• P5.js
• P5.js - Sound