个人技术学习与自研小工具记录

本站是个人非经营性站点，用来记录个人在前端、音频与 Web API 方面的学习过程，并把练手做出来的小工具放在这里自用与分享。

站点没有后端服务，所有功能都在浏览器本地运行；不加载任何音频、视频素材，也不收集访客数据。

原生 HTML / CSS / JavaScript Web Audio API Web MIDI API 无后端 · 无素材 · 无追踪

自研小工具

全部为个人开发练手项目，纯前端实现，打开即用。

🎹

网络演奏台 · Web 电子琴与鼓机

浏览器里的演奏与编曲工具。可用内置算法合成器实时发声（22 种乐器 + 16 件打击乐），也可通过 Web MIDI 调用本机系统音源或外接 MIDI 设备（GM 128 音色与鼓组）。支持最多 16 个声部各配乐器、鼠标 / 触摸 / 电脑键盘弹奏、打击垫、落键瀑布可视化（可直接拖动：平移音域 / 拖播放位置 / 改高度，样式与粒子可调，粒子与辉光能溢出到键盘上）、录制回放与示例曲自动演奏；内置钢琴卷帘编辑器与五线谱辅助视图（点格加音符并试听、拖动改音高与长度、吸附、量化、撤销、力度、定位播放、只编辑当前声部），并可直接读取与导出标准 MIDI 文件（.mid，含延音踏板 CC64）。琴键有标准 / 细键 / 全键盘三档，跨八度不用来回移调。

进入演奏台 →

技术说明

这个工具没有任何音频文件，声音是"算"出来的，所以站点体积很小、加载很快。

内置合成器（默认）

用 Web Audio API 的振荡器 + 包络 + 滤波 + 噪声实时合成，含钢琴、电钢琴、羽管键琴、吉它、竖琴、音乐盒、颤音琴、马林巴、管风琴、手风琴、弦乐、小提琴、大提琴、贝司、小号、萨克斯、单簧管、双簧管、长笛、人声、铺底、主音共 22 种乐器，以及底鼓、军鼓、踩镲、桶鼓、镲片等 16 件打击乐。任何现代浏览器、手机都能发声。

系统 MIDI 音源

通过 Web MIDI API 把音符指令发给操作系统的 MIDI 输出端口（Windows 上常见 Microsoft GS Wavetable Synth），可选完整的 GM 128 音色与第 10 通道鼓组，也能推给外接电子琴、DAW 或虚拟音源。每个声部各用一个通道，鼓组固定用第 10 通道。

多声部与可视化

最多 16 个声部（15 条旋律通道 + 一个固定鼓组），一个声部一种乐器、一个音量、一种颜色。读进超过上限的 MIDI 时先折鼓轨（第 10 通道拆成几条也并成一条）、按 GM 音色族并入最接近的声部，音一个不丢。自动演奏时色条从上方落下，长度等于按住时长；落到琴键或打击垫时产生光环与火花，琴键按声部颜色点亮。

卷帘编辑器与 MIDI 文件

像 DAW 一样的钢琴卷帘：左键点格加音符（会响一声）、拖动改音高与位置（换音高也试听）、拉右边缘改长度、双击删除，带吸附网格、量化、撤销 / 重做、力度与音域定位；每个音还能设音分偏移（±100 音分，微分音）——内置合成器直接生效，系统音源通过弯音轮表达；高度可自选；卷帘里还能一键渐强 / 渐弱（对选中音符或整个声部做力度直线）；下方的五线谱辅助视图把音符同步画成谱面（可选"只看当前声部"或"所有声部各一行"，黑键 ♯、音分标 ↑/↓ 数字，短音符连符杠、能套附点就套附点，鼓组画成打击乐谱）；编辑内容会自动存进浏览器，刷新或重开页面接着改；鼓组声部的一列直接显示底鼓 / 军鼓等鼓件名。默认「只编辑当前声部」，其他声部半透明且点不动，也可一键解锁同时编辑多个声部。能读取标准 MIDI 文件（.mid，支持 Format 0/1、变速、running status、延音踏板 CC64）直接变成可编辑的声部，也能把自己写的曲子导出成 .mid 拖进 Studio One / BandLab；导入整件事都能一键撤销。文件解析与生成都是纯 JavaScript 写的，不引入任何库。

零依赖

不使用框架、不使用 CDN、不引入第三方统计脚本。整站由两个 HTML 文件组成，方便自己维护。

浏览器要求

内置合成器：所有现代浏览器。系统 MIDI 音源：需要支持 Web MIDI 的浏览器（Chrome / Edge / Firefox）且使用 HTTPS 访问；Safari 与 iOS 暂不支持该系统音源通道，会自动使用内置合成器。

工具调用接口

演奏台开放了一组 URL 参数，别的页面或自己的脚本可以直接带着参数调用它来播放指定旋律。

GET /tools/web-instrument.html?参数

play    示例曲目 ID：xiaoxingxing / huanlesong / shengrikuaile / canon
notes   自定义旋律。音名+八度，冒号后为拍数（默认 1，可小数）；
        多个音用空格或逗号分隔；和弦写 [C4,E4,G4]；休止符写 R
        用 | 分段，第 k 段自动属于第 k 个声部（多声部就靠它）
        单个音可用 @N 临时指定声部；打击乐直接写音高号（36 底鼓 / 38 军鼓 / 42 踩镲）
tracks  各声部乐器，逗号分隔：s:piano,s:flute,d 或 gm:73,gm:56,dm
        （s: 内置 22 种 · gm:0-127 系统 GM 音色 · d 内置鼓组 · dm 系统鼓组通道）
drums   额外加一段鼓点：basic / funk / rock / waltz，可跟 :小节数，如 drums=funk:4
bpm     速度，默认 120       engine  synth（内置）| midi（系统音源）
octave  移调 -3 ~ 3，默认 0   volume  音量 0 ~ 100，默认 80

例如播放《小星星》，或播放一小段自定义的多声部片段：

./tools/web-instrument.html?play=xiaoxingxing&bpm=104
./tools/web-instrument.html?play=canon&tracks=gm:73,gm:56,gm:52&bpm=76
./tools/web-instrument.html?notes=C4:0.5 E4:0.5 G4:0.5|C3:1 G3:1|36:0.5 42:0.5 38:0.5&tracks=s:harp,s:cello,d
./tools/web-instrument.html?notes=[C4,E4,G4]:1,[F4,A4,C5]:1&tracks=s:choir,s:bass&drums=funk:2

除了 URL 参数，页面还暴露了一小组 JavaScript 接口，方便在控制台或其他脚本里驱动它（都在本页内存中完成）：

window.InstrumentApp.roll          卷帘对象：notes 数组、add/quantize/undo/duplicate…
window.InstrumentApp.midiFile      标准 MIDI 文件读写：build({bpm,tracks}) / parse(ArrayBuffer)
window.InstrumentApp.timeline()    当前卷帘内容换算成时间轴（秒）供播放器使用
window.InstrumentApp.tracks()      当前声部（最多 16 个：15 条旋律 + 鼓组；乐器、通道、音量、颜色）
window.InstrumentApp.channelOf(tr) 某个声部实际走哪条 MIDI 通道（鼓固定 9）
window.InstrumentApp.play() / .stop()   播放 / 停止卷帘
window.InstrumentApp.roll.seekBeat(n)   把播放起点设到第 n 拍（播放中就从中途接着放）
window.InstrumentApp.roll.setActive(i)  切换当前编辑的声部
window.InstrumentApp.midi          系统音源对象（bent 记录被弯音过的通道）
window.InstrumentApp.staff         五线谱（辅助视图）：setOn(true/false) / setScope('cur'|'all')
window.InstrumentApp.staffSettings(clef/keyAuto/keySig/rows/LS)   谱面设置（读＝当前值，含自动猜到的调号）
window.InstrumentApp.staffPng({rows})   按当前设置把谱面画成 PNG（每行小节数 >0 即多行排版）
window.Practice                    跟弹练习：trackId（null＝跟随当前声部）/ syncTracks() / accompany(from,to,all)
window.InstrumentApp.vis           落键瀑布：panTo(半音) / setHeight(px) / cfg（当前视觉设置）
window.InstrumentApp.pan()         当前音域平移（半音）
window.Draft.save() / .load() / .restore(d) / .clear()   浏览器里的草稿（刷新后接着改）

由于浏览器禁止网页未经交互自动出声，带参数打开后页面会显示一个播放按钮，点一下即开始演奏。此接口全部在前端完成，不涉及服务器请求与数据上传；本地 MIDI 文件也只在浏览器本地解析，不会被上传。

更新记录

按时间倒序记录这个小站的变化。

2026-09-30 · 演奏台 v2.20
符尾叠法重做：多只符尾从符干末端向符头一侧依次叠放，落点间隔 0.72 个线距，四只及以上逐只缩短 0.10；每只符尾下缘增加底色分隔，使 64 分音符显示为连续的一片。符尾数量改为按音值取对数（八分 1、十六分 2、三十二分 3、六十四分 4），不再写死到三十二分。

2026-09-30 · 演奏台 v2.19
接入 7 条 SVG 字形路径（高音谱号、带 8 的低音谱号、降号、八分/十六分/三十二分符尾、符头），并为每条路径记录谱线间距比例和对准点。绘制改用 moveTo/bezierCurveTo，不依赖 Path2D；符干向上时翻转符尾；降号也使用 SVG 字形。每小节补足休止符；切换声部时卷帘视野和五线谱同步到新音区；调整卷帘高度后五线谱正确重绘；速度标记按五线谱与卷帘之间的实际间距定位。

2026-09-30 · 演奏台 v2.18
修复调整卷帘高度后五线谱变为空白的问题：Staff.resize() 在尺寸变化时安排重绘。修复“视野外还有 N 个速度标记”提示不随五线谱高度更新的问题，改为按测量间距定位，并使用 ResizeObserver 兜底。

2026-09-30 · 演奏台 v2.17
重做谱面字形：撤回 v2.16 的符头压缩和最小间距方案，符头恢复为固定大小的斜椭圆并按时间轴落位。符杠按拍分组并限制倾斜度，符干长度按规则计算；谱号按真实比例重画；延音线改为两端细、中间粗的梭形。保留临时记号按小节记忆、超谱表音只贴边并汇总、打击乐五线谱、导出留白等已有行为。

2026-09-30 · 演奏台 v2.16
调整谱面排版：为同一小节内的符头设置最小间距（和弦除外），过挤时压缩整小节并缩小符头（该方案在 v2.17 被撤回）。符杠最多连接 8 个音，次级符杠仅在距离足够时绘制。行首说明移到谱表上方并加深色底；导出 PNG 增加四周留白。超谱表音不再逐个标注，只贴边并在行末汇总；临时记号按小节记忆；音分标记移到符头上方并加底。打击乐谱改为五线谱并按鼓件分道。符头、符干按谱线间距等比缩放。修复加线只画偶数条的问题。

2026-09-30 · 演奏台 v2.15
修复改八度后音圈残留：正在按的音改为按音高遍历，身份队列支持跳过已回收项，收圈增加身份、同音高、同声部三级兜底。和弦目标必须两个键都按下才判定通过；导入时合并同刻同音高的重叠音；跟弹练习在导入或增删声部后重建声部列表，并新增“跟随当前声部”。“等一等”模式会先正常播放目标前的段落，再在目标处等待输入。谱面设置窗口新增每行小节数、谱线间距、谱号和调号选项，调号影响临时记号与拼写；超过 4 拍的长音改为全音符加延音线。分享链接改为单行只读输入框，并给出长度提示。MIDI 导入上限由 12 提高到 16，第 10 通道的多条鼓轨先合并为一条鼓组，无名轨使用 GM 音色名。

2026-09-30 · 演奏台 v2.14
新增 2/4、3/4、4/4、6/8、12/8、5/4 拍号，卷帘小节线与拍线、五线谱、打击乐谱、符杠分组、节拍器重音及导出 MIDI 的拍号事件均随之更新。新增合成节拍器，支持跟随播放或持续发声、重音分档和音量调节。新增就近播放条及播放/停止、回起点、打开跟弹练习、节拍器等快捷键。跟弹练习支持一次练习一个声部，其他声部自动伴奏，并给出命中、错过、多弹、准确率、连击和平均时差统计。新增卷帘和五线谱 PNG 导出，按当前数据以 2 倍像素密度重绘。新增分享链接，将声部、音符、速度、拍号和底速压入 ?share= 参数，并提示链接过长风险。

2026-09-30 · 演奏台 v2.13
修复曲线窗口中渐强/渐弱方向与卷帘不一致以及白点不落在线上的问题，拖动和双击加点统一按同一方向计算。让“套用为渐强/渐弱”按钮反映当前方向：按另一颗按钮才翻转曲线，并在边框、提示文字和方向常驻标记中反馈状态。修复渐变方向变化后标题栏按钮偏移。五线谱时值表补充 8 拍倍全音符和 16 拍长音符，超过 16 拍不再回落到短时值；空心符头改按时值判断。

2026-09-30 · 演奏台 v2.12
示例曲目改为同时装载声部和音符，并作为一步撤销记录；提示条会说明替换了多少音符并提供撤销入口。曲线窗口的详细说明收进标题栏的“?”按钮，工具栏布局重新适配，避免关闭按钮被挤出。修复按住琴键切换声部后音圈残留的问题：按下时记录声部和音高，松开时只回收对应音圈，失焦、换键位或停止时统一清理。设置新增“切走也继续播”。

2026-09-29 · 演奏台 v2.11
曲线窗口跟随卷帘中选中的音符：仅查看时显示选中曲线，修改时才写入音符；未带音内渐变的音符会自动补上渐强并支持撤销。选中的音符包含多种曲线时显示“曲线不一”，并提供“读选中的音符”按钮；未选中音符时编辑默认曲线。修复渐弱音符在曲线窗口和卷帘中方向不一致的问题。瀑布音圈半径按音符的曲线和响度变化，区域消音段落缩小到最小可见半径。

2026-09-29 · 演奏台 v2.10
瀑布音圈的身份由音高改为每次按键唯一 ID，同一音高在不同声部或连续弹奏时互不影响。曲线平滑支持逐段处理：选中某一段后可切换为弧线或直线，拐点位置不变，首尾段保持直线；使用单调三次样条避免过冲。窗口中的平滑标记随草稿保存。

2026-09-29 · 演奏台 v2.9 后续
音色响度对齐增加三档：关、峰值对齐、响度对齐；默认响度对齐，按 0.5 秒短窗能量平衡不同起音类型的音色。新增明细表，显示各内置音色的增益和调整量，并支持逐音色校准，校准只作用于响度对齐档。曲线窗口增加“＋加点”和“− 删点”按钮，双击加点与右键删点保留；区域消音支持多段处理。修复拖拽点和选中点的样式未生效问题。

2026-09-29 · 演奏台 v2.9
曲线支持在独立大窗口中编辑：可拖动和记忆位置，白点表示拐点，支持拖动、双击加点、右键删点、区域消音，两端固定为最低和最高音量。选中音符后可直接应用渐强/渐弱，未选中时编辑默认曲线。调整内置音色响度，使各音色在同一力度下实际电平接近，最多提升 8.4 dB。修复 MIDI 同时发声数统计包含未起音和已衰减音导致音量被压低的问题，改为只统计可听音，响度衰减控制在 3 dB 内。通道音量 CC7 改为取最大值；导出 MIDI 时保留自定义曲线。

2026-09-29 · 演奏台 v2.8
新增自定义曲线编辑格，可拖动拐点调整起音快慢，强度限制在 0.25–4，实时预览并随草稿保存。音符条和瀑布按曲线函数采样绘制，内置合成器按曲线计算音量，系统 MIDI 与导出 MIDI 采样为 CC11 点。切换键位时改为仅松开手弹音符，不再中断正在播放的曲目。复制小节后默认选中副本；框选拖出卷帘时自动滚动；声部内长音压缩只影响当前声部。

2026-09-29 · 演奏台 v2.7
音内渐变新增线性、指数、前快后慢、S 形曲线选项，写入音符并显示在音符条上，手弹音内渐变也使用同一曲线。系统 MIDI 和导出 MIDI 将曲线采样为 CC11 表达式点。说明滑音开关 CC65/CC5 兼容性差，当前使用弯音表达单音音分，滑音曲线暂未实现。修复框选坐标偏移、卷帘右键菜单弹出、五线谱下方黑块及播放头标签挤压布局等问题。

2026-09-29 · 演奏台 v2.6
卷帘中右键可删除普通音符，按下与松开必须落在同一对象上；空白处按住右键拖动可框选，颜色跟随当前声部。多选音符力度或音分不一致时显示“混合”，音分标记直接显示数值和方向。速度编辑统一到卷帘上方：选中速度旗子时编辑该标记，未选中时编辑播放头所在位置；选音符和选旗子互斥，不适用于旗子的控件置灰。手弹渐强/渐弱/不带选项移到琴键上方。

2026-09-29 · 演奏台 v2.5
速度标记支持双击修改，触屏设备支持连点两下。速度只在卷帘上方修改，分为整首速度和播放头处速度；演奏面板中的速度仅作显示并提供跳转。速度标记滚出视野的提示条移到卷帘上方，并按标记是否完全不可见判断；修复旗子条定位错误。全站滚动条和数字输入框样式统一。读 MIDI 时内容相同的重复轨道合并，音量取较大值。

2026-09-29 · 演奏台 v2.4
修复速度标记拖拽、双击输入和右键删除问题；添加“视野外还有 N 个速度标记”提示，可点击滚动到对应标记。声部上限由 6 提高到 12。修复解析 SysEx 事件时指针偏移导致速度标记错误或丢失的问题，并用 13 个真实 MIDI 文件和 600 个随机文件验证。合并声部时通道音量取最大值，其余音符力度按比例缩放，避免响度虚增。

2026-09-29 · 演奏台 v2.3
五线谱播放线改为整条绘制并在顶部加小三角，卷帘播放线置于最上层并加白芯。播放视图新增跟随、居中、不跟随三档，手动滚动后自动暂停跟随两秒。卷帘支持添加、拖动和删除速度标记，播放、时间轴、导出 MIDI 以及导入换算均按速度表处理。读取 MIDI 时解析通道音量 CC7；超出上限的声部按 GM 音色族合并。落点焰花沿色条交界宽度均匀分布。

2026-09-29 · 演奏台 v2.2
落点辉光改为到点才亮，色条落地时触发焰花，随后渐隐。修复同一通道同音高未松键再次按下时吃掉前一个音的问题。声部超过上限时按音色族合并而非丢弃。播放时卷帘在接近右边缘时自动翻页，五线谱同步重画，手动滚动后暂停跟随两秒。

2026-09-29 · 演奏台 v2.1
新增音内渐强/渐弱，按单个音符的时长生效；内置合成器使用对应包络，系统 MIDI 发送 CC11，导出 MIDI 包含曲线。新增手弹渐强/渐弱选项。原有力度的渐强/渐弱改名为“力度渐强/力度渐弱”，作用于音符之间。落点辉光改为发光渐变矩形。

2026-09-29 · 演奏台 v2.0
修复“允许溢出到页面”开关无效的问题：关闭后粒子、光圈和辉光限制在瀑布屏范围内。渐强/渐弱增加斜坡光带、音符脉冲和自动滚动到首个受影响音符；音符不足两个时显示提示。

2026-09-29 · 演奏台 v1.9
打击乐色条收窄到打击垫宽度的 42%，上限 26px。色条与底部交界处新增落点辉光，可在视觉设置中关闭。卷帘力度改为在音符条上显示：亮度表示力度，足够宽时显示数值，并增加“弱 → 强”图例。系统 MIDI 部分补充 Windows 10/11 移除 GS Wavetable 的说明，推荐 VirtualMIDISynth 与 SoundFont，并新增试音按钮。

2026-09-29 · 演奏台 v1.8
修复光圈圆心左偏：特效层像素尺寸改为按自身盒子计算，避免滚动条宽度影响。打击乐槽位改为测量实际打击垫位置，并缓存布局数据。卷帘新增操作反馈条，渐强、渐弱、量化、复制等操作会显示提示并选中受影响音符。

2026-09-29 · 演奏台 v1.7
五线谱在声部增加时自动增高，下缘可拖动调整，并与卷帘共用滚动条。符杠统一为水平，跨度超过八度的组不连；符干长度统一，整小节音符不画符干，方向按组内平均高度确定。光圈、粒子和辉光按瀑布屏实际位置逐帧换算。卷帘新增渐强/渐弱，对选中音符或当前声部全部音符做力度渐变，可撤销并写入导出的 MIDI。

2026-09-29 · 演奏台 v1.6
修复快速滑过琴键时出现过强音的问题：每个音记录自己的包络，淡出从当前应有音量开始，未起音的音直接静音；滑动松键使用短释放，并限制同声部同时发声数。卷帘和五线谱支持调整高度，五线谱提供矮、中、高、跟随内容四档。修正瀑布抓手方向，高度上限提高到 720px。新增可关闭的全窗口特效层，粒子与发光可溢出瀑布屏。五线谱支持按声部分列，鼓组绘制为打击乐谱，并补充附点与符杠。

2026-09-29 · 演奏台 v1.5
编辑内容自动保存到浏览器 localStorage，重新打开页面可恢复，也可一键丢弃，设置中可关闭，通过 URL 参数调用时不生效。瀑布支持拖动：左右平移音域，播放时上下调整位置，拖下缘调整高度。新增五线谱辅助视图，可跟随卷帘滚动、自动选择谱号、显示黑键、音分和鼓组。新增视觉设置：瀑布样式、粒子类型与密度、发光强度、拖尾和高度。修复左列黑区与 MIDI 轨道中文乱码，卷帘滚轮只滚动卷帘，Ctrl+滚轮缩放网格。

2026-09-29 · 演奏台 v1.4
每个音符新增音分参数（±100 微分音），内置合成器直接调整振荡器音分，系统 MIDI 使用弯音轮，导出 MIDI 写入弯音事件。长音光圈持续到松手。修复键盘列平移导致的底部黑区、MIDI 中文乱码和锁定声部时仍显示拉伸把手等问题。卷帘高度可选，声部改名增加按钮，播放与停止按钮等宽。

2026-09-29 · 演奏台 v1.3
修复拖动音符长度时指数增长的问题，放置和拖动音符会试听。左侧键盘与网格同步滚动，默认定位到中音区。声部支持双击改名、按未占用编号递增和删除，删除可撤销。新增“只编辑当前声部”锁定和其他声部透明度。支持定位播放、导入 MIDI 撤销以及延音踏板 CC64。滚动条样式统一，GM 音色支持内置回退，声部行标注实际发声来源。

2026-09-28 · 演奏台 v1.2
新增钢琴卷帘编辑器，支持点格添加音符、拖动修改音高和长度、吸附、量化、撤销、力度和音域定位；鼓组声部显示鼓件名。支持读取和导出标准 MIDI 文件。琴键新增 61 键细键和 88 键全键盘模式。松键涟漪改为收拢效果。开放 window.InstrumentApp 页面内 JavaScript 接口。

2026-09-28 · 演奏台 v1.1 修复
修复样式类重名导致的面板错位、松键偶发爆音以及系统音源授权失败提示无法关闭的问题。提示横幅支持一键关闭；浏览器不支持 Web MIDI 或授权被拒时给出明确说明并自动切回内置合成器。

2026-09-28 · 演奏台 v1.1
新增多声部，最多 6 个声部，可分别配置乐器、音量和颜色。新增 16 件打击乐与鼓组、落键瀑布与溅射可视化、GM 128 音色支持和 22 种内置音色。修复黑键对齐和多声部时间轴问题。URL 接口新增 tracks、drums 参数和 | 声部段语法。

2026-09-28 · 演奏台 v1.0
站点上线并发布“网络演奏台 · Web 电子琴”v1.0，支持内置合成器与系统 MIDI 双音源、37 键键盘、复音与延音、录制回放、示例曲目和 URL 调用接口。

关于本站

本站为个人非经营性网站，内容为个人学习记录与自研小工具展示，不涉及任何商业服务。
站内全部功能在浏览器本地运行，不上传、不存储、不收集访客信息；不使用 Cookie 做追踪，不投放广告。
页面不提供注册、登录、评论、投稿等用户交互功能。
工具中的示例曲目均为公有领域传统曲目或古典曲目片段。
联系方式：1521941735@qq.com（仅用于技术交流）
页面内容如有引用不当之处，欢迎来信告知，将及时处理。