React Guitar 声音合成指南useSound Hook 如何让吉他组件在浏览器中 3 行代码弹出真声【免费下载链接】react-guitarA beautiful and accessible guitar component for React. ⚛️ 项目地址: https://gitcode.com/gh_mirrors/re/react-guitarReact Guitar是一款漂亮且可访问的 React 吉他组件。本篇指南带你快速掌握它的useSound Hook 声音合成方案只需 3 行代码就能让吉他在浏览器中弹出真实的琴声并支持 9 种乐器音色切换、一键扫弦与静音控制无需音频后端、无需服务器纯浏览器发声。3 行代码上手让吉他组件在浏览器发声先安装 3 个包npm i react-guitar react-guitar-sound react-guitar-tunings核心代码只有 3 行import Guitar from react-guitar import { standard } from react-guitar-tunings import useSound from react-guitar-sound function GuitarWithSound() { const strings [0, 1, 2, 2, 0, -1] // A 小和弦 const { play, strum } useSound({ fretting: strings, tuning: standard }) // ① 创建播放器 return Guitar strings{strings} onPlay{play} / // ② 拨弦即发声想扫弦就调 strum() }关键点对接fretting当前按弦数组每个数字是一根弦的品格0 空弦-1 静音必须与传给Guitar的strings一致tuning每根弦的 MIDI 音高数组standard即标准吉他 E2 A2 D3 G3 B3 E4完整音阶表在 packages/react-guitar-tunings/src/index.ts收录了吉他、贝斯、尤克里里、班卓琴等 40 种调弦onPlay{play}把组件的拨弦事件绑给播放器用户拨哪根、响哪根。useSound返回 4 个属性源码见 packages/react-guitar-sound/src/index.ts属性说明play(string, when)弹奏第string根弦0-5when为秒级延迟strum(up?)以 50ms 间隔一键扫过 6 根弦传true为自高向低扫playing每根弦当前是否正在鸣响的布尔数组loading音源是否仍在加载两种换音色方法withSoundFont 与 withSamples默认音色是尼龙弦木吉他想换声音react-guitar-sound内置两个乐器工厂模块目录packages/react-guitar-sound/方法一withSoundFont一个名字换音色import useSound, { withSoundFont } from react-guitar-sound const electricGuitar withSoundFont(electric_guitar_clean)底层基于开源 soundfont-player直接传乐器名即可acoustic_guitar_steel钢弦木吉他、electric_guitar_jazz爵士电吉他、banjo班卓琴、sitar西塔琴、acoustic_bass木贝斯……几十种音色随取随用还支持 mp3/ogg 格式选择实现见 packages/react-guitar-sound/src/instruments/sound-font.ts。方法二withSamples真实采样最逼真import useSound, { withSamples } from react-guitar-sound const flamenco withSamples({ E2: /samples/E2.mp3, D3: /samples/D3.mp3, G3: /samples/G3.mp3, E4: /samples/E4.mp3, })提供几个真实录音文件即可内部用 Tone.js 的 Sampler 把每个品位映射到最近的采样来播放实现见 packages/react-guitar-sound/src/instruments/samples.ts官方演示站默认的Flamenco Guitar音色就是这样做出的音色最接近真实吉他。拨弦、扫弦、静音 3 个实用技巧悬停即发声给Guitar传playOnHover鼠标划过琴弦即刻发声做演示站就像真琴静音给useSound传muted: trueplay调用会被忽略——官方演示在弹出和弦选择器时就用它临时静音参考 site/components/Demo.tsx键盘扫弦官方演示把1-6键绑定 6 根弦、w/s键绑定上/下扫弦实现见 site/hooks/sound.ts。文件路径速查模块路径吉他组件外观与交互packages/react-guitar/src/index.tsxuseSound Hookpackages/react-guitar-sound/src/index.ts声音合成播放器packages/react-guitar-sound/src/util/player.ts音字体乐器packages/react-guitar-sound/src/instruments/sound-font.ts采样乐器packages/react-guitar-sound/src/instruments/samples.ts演示站site/components/Demo.tsx想本地跑起来看真声git clone https://gitcode.com/gh_mirrors/re/react-guitar cd react-guitar yarn build yarn start常见问题问为什么刚加载时play没声音答音源加载期间loading为true等其变false再播即可另外浏览器要求用户交互如点击后才允许激活音频上下文这是浏览器安全策略属正常现象。问换调弦后音高会错吗答不会。tuning变化时 Hook 会自动重建播放器声音与视觉始终同步调弦表里还内置 Drop D、Open G 等 20 余种常用调弦。问左手吉他怎么办答给Guitar传lefty即可视觉镜像后声音依旧跟着指法走。以上就是React Guitar useSound 声音合成的完整指南3 行代码让浏览器弹出真吉他声两种工厂换音色拨弦/扫弦/静音随手控制复制即用。【免费下载链接】react-guitarA beautiful and accessible guitar component for React. ⚛️ 项目地址: https://gitcode.com/gh_mirrors/re/react-guitar创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考