[javascript] Three.js를 사용하여 웹에서의 실시간 음원 시각화

29 Nov 2023

javascript

Three.js는 웹 브라우저 상에서 3D 그래픽을 생성하고 조작할 수 있는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하여 실시간 음원 시각화를 구현할 수 있습니다. 음원 시각화는 음악이나 오디오 데이터를 시각적으로 표현하는 기술로, 웹 애플리케이션에서 음악과 함께 동적이고 아름다운 시각화를 제공할 수 있습니다.

Three.js 시작하기

Three.js를 사용하기 위해서는 HTML 파일에 Three.js 라이브러리를 로드해야 합니다. 가장 간단한 방법은 CDN을 통해 Three.js 라이브러리를 가져오는 것입니다. 아래 코드를 HTML 파일의 <head> 태그 안에 추가해주세요.

<script src="https://threejs.org/build/three.js"></script>

음원 데이터 가져오기

음원 데이터를 가져오기 위해서는 웹 오디오 API를 사용할 수 있습니다. 웹 오디오 API를 통해 음원을 재생하고, 해당 음원의 분석 데이터를 얻을 수 있습니다. 아래 코드는 웹 오디오 API를 사용하여 음원을 가져오고 분석 데이터를 얻는 예시입니다.

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

function loadAudio(url) {
  return fetch(url)
    .then(response => response.arrayBuffer())
    .then(buffer => audioContext.decodeAudioData(buffer));
}

function analyzeAudio(buffer) {
  const audioSource = audioContext.createBufferSource();
  audioSource.buffer = buffer;
  
  const analyser = audioContext.createAnalyser();
  audioSource.connect(analyser);
  analyser.connect(audioContext.destination);
  
  const dataArray = new Uint8Array(analyser.frequencyBinCount);
  
  // 분석 데이터를 업데이트하는 함수
  function update() {
    requestAnimationFrame(update);
    
    analyser.getByteFrequencyData(dataArray);
    
    // TODO: 데이터를 Three.js로 시각화하는 로직 추가
    
    // 업데이트된 데이터를 기반으로 시각화를 수행하는 함수 호출
    visualize(dataArray);
  }
  
  audioSource.start();
  update();
}

loadAudio('audio.mp3')
  .then(analyzeAudio);

음원 시각화하기

Three.js를 사용하여 음원을 시각화할 수 있습니다. 자바스크립트를 사용하여 Three.js를 초기화하고 3D 그래픽 요소를 생성한 뒤, 분석 데이터를 이용하여 그림을 그립니다. 아래 코드는 Three.js를 사용하여 음원 시각화를 수행하는 예시입니다.

// Three.js 초기화
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 시각화할 요소 생성
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Three.js 루프
function animate() {
  requestAnimationFrame(animate);

  // TODO: 분석 데이터를 기반으로 그림을 그리는 로직 추가

  renderer.render(scene, camera);
}
animate();

// 분석 데이터를 이용하여 그림을 그리는 함수
function visualize(dataArray) {
  // TODO: 데이터를 기반으로 그림을 그리는 로직 추가
}

위 코드에서 visualize 함수 안에서 분석 데이터를 기반으로 그림을 그리면 됩니다. 예를 들어, 분석 데이터의 크기나 값에 따라 3D 객체의 크기나 위치를 변경할 수 있습니다.

마무리

이제 Three.js를 사용하여 웹에서의 실시간 음원 시각화를 구현할 수 있는 준비가 되었습니다. Three.js와 웹 오디오 API를 조합하여 음악과 함께 아름다운 시각화를 제공해보세요. Three.js에는 다양한 기능과 예제가 있으므로, 참고 자료를 통해 더 많은 기능을 배우고 응용할 수 있습니다.