[javascript] P5.js에서 MIDI 파일을 재생하는 방법을 알려주세요.

04 Dec 2023

javascript

P5.js는 웹에서 쉽게 그래픽, 음악, 애니메이션 등 다양한 작업을 할 수 있는 자바스크립트 라이브러리입니다. MIDI 파일은 음악 데이터를 저장하는 파일 형식으로, P5.js를 사용하여 MIDI 파일을 재생할 수 있습니다.

먼저, P5.js를 프로젝트에 추가해야 합니다. P5.js를 사용하기 위해 HTML 파일에 다음과 같이 스크립트 태그를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
  <script src="sketch.js"></script>
</body>
</html>

다음으로, P5.js 스케치 파일인 sketch.js 파일을 생성합니다. sketch.js 파일에서는 MIDI 파일을 로드하고 재생하는 코드를 작성합니다.

let midiFile;
let midiPlayer;

function preload() {
  midiFile = loadSound('example.mid', () => {
    midiPlayer = new p5.MidiPlayer();
    midiPlayer.setFile(midiFile);
  });
}

function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  // 여기에 그래픽 코드 작성
}

function keyPressed() {
  if (key === ' ') {
    if (midiPlayer.isPlaying()) {
      midiPlayer.pause();
    } else {
      midiPlayer.play();
    }
  }
}

위의 코드에서 example.mid는 재생하고자 하는 MIDI 파일의 경로입니다. 이를 자신의 MIDI 파일 경로로 수정하세요.

위의 코드에서는 preload 함수에서 MIDI 파일을 로드하고, 로드 완료 시 midiPlayer를 생성합니다. setup 함수에서는 그래픽 초기화를 하고, draw 함수에서는 그래픽 코드를 작성합니다. keyPressed 함수는 스페이스바를 누르면 MIDI 파일을 재생/일시정지하는 코드입니다.

이제 P5.js 애플리케이션을 실행하고 스페이스바를 눌러 MIDI 파일을 재생할 수 있습니다.

P5.js MIDIPlayer 라이브러리에는 MIDI 파일 재생에 대한 더 자세한 기능도 제공되니 필요에 따라 공식 문서를 참고하시기 바랍니다.

P5.js 공식 문서: https://p5js.org/
P5.js MIDIPlayer 라이브러리 문서: https://p5js.org/reference/#/libraries/p5.midi