Repolode
jberg

jberg/butterchurn

브라우저에서 Web Audio API로 Milkdrop 프리셋을 렌더링하는 클래식 Milkdrop 음악 비주얼라이저의 WebGL 재구현체입니다.

대체할 수 있는 제품:Winamp

스타
1,972
포크
171
열린 이슈
24
마지막 커밋
6개월 전

어떤 프로젝트인가요?

Butterchurn은 Milkdrop 음악 비주얼라이저를 WebGL 기반으로 재구현한 JavaScript 라이브러리로, 최신 웹 브라우저에서 Milkdrop 스타일의 비주얼을 실행할 수 있습니다. Web Audio API에서 오디오를 입력받아 HTML canvas에 애니메이션 프레임을 렌더링합니다.

개발자는 canvas와 오디오 컨텍스트를 사용해 비주얼라이저를 만들고, 소스나 마이크의 오디오 노드를 연결한 뒤 프리셋을 불러옵니다. 프리셋은 지정한 시간에 걸쳐 서로 전환할 수 있으며, 실행 중에도 렌더러 크기를 변경할 수 있습니다. 함께 제공되는 패키지 butterchurn-presets에는 바로 사용할 수 있는 프리셋 모음이 포함되어 있습니다.

WebGL 2가 필요하므로 현재 브라우저의 지원 여부를 확인하는 간단한 헬퍼도 포함되어 있습니다. Webamp를 비롯한 여러 음악 플레이어와 앱에서 이 라이브러리를 통합해 사용합니다.

핵심 기능

  • 01브라우저에서 WebGL로 Milkdrop 프리셋을 렌더링합니다.
  • 02Web Audio API를 통해 오디오 입력을 받습니다.
  • 03설정한 시간에 걸쳐 프리셋을 전환합니다.
  • 04실행 중에 렌더러 크기를 변경합니다.
  • 05프리셋 모음이 포함된 별도 패키지를 제공합니다.
  • 06WebGL 2 지원 여부를 확인하는 헬퍼를 포함합니다.

활용 사례

  • 웹 음악 플레이어에 음악 비주얼라이저를 추가합니다.
  • 웹 페이지나 브라우저 확장 프로그램의 오디오를 시각화합니다.
  • 브라우저에서 실시간 음악 또는 노래방 디스플레이를 만듭니다.
  • 웹 앱에서 Milkdrop 프리셋을 시험해 봅니다.

빠른 시작

  1. 1

    npm으로 패키지를 설치합니다

    npm install butterchurn butterchurn-presets
  2. 2

    AudioContext에 연결된 canvas에 시각화 도구를 만듭니다

  3. 3

    프리셋을 불러와 프레임을 렌더링합니다

사용 전 알아둘 점

  • WebGL 2를 지원하는 브라우저가 필요합니다.

토픽

자주 묻는 질문

butterchurn은(는) 무엇인가요?
브라우저에서 Web Audio API로 Milkdrop 프리셋을 렌더링하는 클래식 Milkdrop 음악 비주얼라이저의 WebGL 재구현체입니다. Butterchurn은 Milkdrop 음악 비주얼라이저를 WebGL 기반으로 재구현한 JavaScript 라이브러리로, 최신 웹 브라우저에서 Milkdrop 스타일의 비주얼을 실행할 수 있습니다. Web Audio API에서 오디오를 입력받아 HTML canvas에 애니메이션 프레임을 렌더링합니다.
butterchurn은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
butterchurn은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
butterchurn은(는) 아직 유지보수되고 있나요?
6개월 이상 커밋 없음. butterchurn의 마지막 커밋은 2026년 4월 20일입니다.
butterchurn은(는) 어디에 사용할 수 있나요?
웹 음악 플레이어에 음악 비주얼라이저를 추가합니다. 웹 페이지나 브라우저 확장 프로그램의 오디오를 시각화합니다. 브라우저에서 실시간 음악 또는 노래방 디스플레이를 만듭니다. 웹 앱에서 Milkdrop 프리셋을 시험해 봅니다.
butterchurn는 어떻게 설치하나요?
npm으로 패키지를 설치합니다: npm install butterchurn butterchurn-presets AudioContext에 연결된 canvas에 시각화 도구를 만듭니다 프리셋을 불러와 프레임을 렌더링합니다
butterchurn은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/jberg/butterchurn

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트