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