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();