[JS] WebMidi.js로 Ableton Live와 연동하기

최근에 Ableton Live 수업을 들었는데 마지막이 자작곡 발표였다.

기왕이면 발표하는거 음악에 맞춘 비주얼까지 만들고 싶어서 아는게 아는거라고 Webmidi.js를 사용해서 비주얼까지 만들었다.

 

완성품

webmidi.js와 websocket으로 여러개의 기기에서 같은 신호를 받아 동기화되는 영상을 실사로 찍어서 제작함.

미리 알아야할 점

1. 맥에서는 IAC 가상 장치를 통해 에이블톤 라이브에서 미디 신호를 내보내줘야함 (https://support.apple.com/ko-kr/guide/audio-midi-setup/ams1013/mac)

2. 에이블톤 라이브에서 미디 신호를 내보내기 위해선 악기가 연결되지 않은 미디 트랙이여야 함.
 -> 나같은 경우 소리 있는 트랙을 복제해서 악기를 제거하고 내보내기 전용 트랙을 묶어놓았다.

 

핵심 코드

import { WebMidi } from 'webmidi';

const keyName = [
	{ C: 0 },
	{ 'C#': 1 },
	{ D: 2 },
	{ 'D#': 3 },
	{ E: 4 },
	{ F: 5 },
	{ 'F#': 6 },
	{ G: 7 },
	{ 'G#': 8 },
	{ A: 9 },
	{ 'A#': 10 },
	{ B: 11 }
];
let note = [];
let name = [];
let vol = [];
let timestamp = 0;


const onEnabled = () => {

	// Display available MIDI input devices
	if (WebMidi.inputs.length < 1) {
		console.log('No device detected.');
	} else {
		const device = WebMidi.inputs[0];
		console.log(`${device.name}`);

		// get note on
		device.addListener('noteon', 'all', (event) => {
			// console.log(event);
			note[event.target._number - 1] = true;
			vol[event.target._number - 1] =
				keyName[event.note.number % 12][Object.keys(keyName[event.note.number % 12])[0]];
			name[event.target._number - 1] = event.note.name;
			timestamp = event.timestamp;
		});
	}
};

onMount(() => { // 페이지 로딩시 실행 (스벨트라 onMount 사용)
	WebMidi.enable()
		.then(onEnabled)
		.catch((err) => alert(err));

	// Clear the interval when onMount is unmounted
	return () => {
		WebMidi.disable();
	};
});

스벨트로 만든 코드~

note, vol, name의 값을 활용하여 화면을 구성하면 된다.