Float:ImgPlay
이미지를 소리로 변환하는 라이브러리
이미지의 픽셀 데이터를 분석하여 규칙 기반 음악을 생성하는 JavaScript 라이브러리. Web Audio API를 활용해 브라우저에서 바로 작동하며, 별도 서버 없이 클라이언트 사이드로 동작합니다.
JavaScript
Web Audio API
Image → Sound
npm
MIT (상업적 이용 가능)
설치
$
npm install float-imgplay
주요 기능
- 이미지 → 사운드 변환 — 픽셀 색상, 밝기, 채도를 음높이, 리듬, 화성으로 매핑
- 5가지 사운드 알고리즘 — RGBA Digit, Brightness, Color Harmony, Spectral, Contour
- 20개 악기 프리셋 — Piano, Strings, Bass, Synth Lead, Brass, Flute 등
- 10개 앙상블 프리셋 — Orchestra, Rock Band, Jazz Trio, Electronic, Cinematic 등
- 커스텀 알고리즘 플러그인 — 사용자가 직접 사운드 변환 로직을 등록 가능
- MIDI 내보내기 — 생성된 음악을 Standard MIDI File로 다운로드
- PNG 메타데이터 임베딩 — MIDI 데이터를 이미지 파일 안에 삽입
- JSON 프리셋 공유 — 설정을 JSON으로 내보내기/가져오기
- UI 컨트롤 — 재생, 볼륨, 속도, 세팅 팝업을 이미지 위에 오버레이
- 다중 이미지 동시 재생 — playAll()로 여러 이미지를 오케스트라처럼 동시 재생
빠른 시작
HTML
<div class="float-imgplay"> <img src="photo.jpg" width="320" height="320"> </div> <script src="https://unpkg.com/float-imgplay"></script> <script> new FloatImgPlay({ selector: '.float-imgplay', ensemble: 'orchestra', audio: { algorithm: 'color-harmony' } }).init(); </script>
API 하이라이트
JavaScript
// 앙상블로 재생 new FloatImgPlay({ ensemble: 'cinematic' }).init(); // 커스텀 악기 조합 new FloatImgPlay({ instruments: [ { preset: 'piano', volume: 0.25 }, { preset: 'strings', volume: 0.18 }, { preset: 'bass', volume: 0.2 } ], audio: { algorithm: 'spectral', tempo: 90 } }).init(); // 설정을 JSON으로 내보내기/가져오기 const config = player.exportConfig(); player.importConfig(config); // 모든 이미지 동시 재생 player.playAll();