[javascript] P5.js에서 오디오 신호를 처리하는 방법을 알려주세요.

04 Dec 2023

javascript

P5.js는 웹 브라우저에서 동작하는 자바스크립트 기반의 크리에이티브 코딩 라이브러리입니다. 오디오 신호를 처리하려면 P5.js의 sound 라이브러리를 사용하면 됩니다.

먼저, P5.js 라이브러리를 HTML 문서에 추가해야 합니다. 다음과 같이 스크립트 태그를 사용하여 추가할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0"></script>

이제 오디오 파일을 로드하고 재생하는 예제를 살펴보겠습니다. 다음 코드를 sketch.js 파일에 작성하세요.

let mySound;

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

function setup() {
  createCanvas(400, 400);
  mySound.play();
}

function draw() {
  background(220);
}

이 예제에서는 loadSound() 함수를 사용하여 ‘audio.mp3’ 파일을 로드하고, mySound.play() 함수를 사용하여 오디오를 재생합니다. preload() 함수에서는 오디오 파일을 미리 로드하도록 지정합니다.

추가로, 재생 중인 오디오를 일시 정지하거나 다시 재생하는 등의 제어를 할 수 있습니다. 예를 들어, mySound.stop() 함수를 호출하면 오디오 재생이 중지됩니다. 더 많은 오디오 제어 기능과 관련된 정보는 P5.js 공식 문서를 참조하시기 바랍니다.

위 코드를 실행하려면 index.html 파일에 다음 코드를 작성하십시오.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>P5.js Audio Example</title>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0"></script>
  <script src="sketch.js"></script>
</head>
<body>
</body>
</html>

위의 코드에서 sketch.js 파일은 위에서 작성한 예제 코드가 있는 파일입니다. 이제 이 파일을 웹 브라우저에서 열면 오디오 파일이 재생되는 것을 확인할 수 있습니다.

P5.js를 사용하여 오디오를 처리하는 방법에 대한 더 자세한 정보는 P5.js 공식 문서를 참조하시기 바랍니다.

참고 문서:

P5.js 공식 문서: https://p5js.org/reference/#/libraries/p5.sound