1. 为什么要在 VS Code 里做实时音乐创作你可能已经习惯了 VS Code 写业务代码、调接口、跑测试但它其实还能当一台“浏览器端音乐工作站”。核心思路很简单用 Tone.js 这个 Web Audio 库在浏览器里搭一套音序器把旋律、鼓点、贝斯写成 JavaScript 对象再用 VS Code 的任务系统一键启动本地服务改一行代码、浏览器里立刻听到变化。这就是所谓的“实时编码音乐”live coding music也是 VS Code 实时音乐创作最直观的玩法。它适合谁有前端基础、写过 npm 脚本、能看懂import和async/await的开发者。你不需要乐理证书但要知道什么是 BPM、什么是音符时值。Tone.js 把音频调度、合成器、效果器都封装成了类你写new Tone.Synth().toDestination()就能出声剩下的就是组织“什么时候弹哪个音”。我试过把旋律写成数组、把鼓点写成循环再用 AI 生成变体整个过程像在编辑器里搭积木。VS Code 在这里的角色不只是编辑器它的任务配置可以自动起 dev server它的终端可以看编译报错它的 AI 插件可以根据提示词直接吐出 Tone.js 的 pattern 代码。你改bassline数组里的一个音高保存浏览器热更新声音立刻变——这种反馈循环是传统 DAW 很难给的。这一篇会交付三样东西一份可复制的 VS Code 任务配置.vscode/tasks.json一个能跑的 Tone.js 音序器示例含鼓、贝斯、主旋律三层以及一套给 AI 的提示词模板让模型按你的风格生成 pattern。最后给出在浏览器里验证实时演奏的具体步骤以及常见报错的排查路径。全程不依赖任何特殊网络环境npm 装包、本地起服务即可。如果你之前只把 VS Code 当文本编辑器这一套流程会让你重新理解“代码即旋律”——不是比喻是真的在浏览器里发声。2. TaoToken 前置给 AI 生成 Tone.js 代码配一个稳定入口AI 生成 Tone.js 代码这件事难点不在“能不能生成”而在“生成得对不对”。Tone.js 的 API 版本变化不小Tone.Transport的调度方式、Part和Sequence的用法、Tone.start()的触发时机模型如果拿旧版本文档训练很容易给出跑不起来的代码。所以你需要一个能稳定调用、方便切换模型的入口把提示词和上下文喂进去让模型按当前 Tone.js 版本输出。TaoToken 在这里的作用是提供一个统一的 API 入口你可以在 VS Code 的 AI 插件里配置它的 Base URL 和 Key然后选择适合代码生成的模型。它的官网是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 注意 API 地址不加 UTM 参数。你需要在控制台创建 Key然后把它填进插件的配置里。具体来说如果你用的是 Cline 或类似的 VS Code AI 插件配置项通常有三件套Base URL、API Key、Model ID。Base URL 填https://taotoken.net/apiKey 填你在控制台生成的令牌Model ID 填你选定的模型名称。这三件套缺一不可少一个就会报 401 或 model not found。如果你用的是 Claude Code 这类工具配置方式类似但要注意它的配置文件路径和字段名可能不同后面第 3 节会给出一份 JSON 片段。为什么强调“前置”因为很多人卡在第一步插件装好了Key 没配或者 Base URL 填成了带路径的地址结果请求一直失败。你先把入口配通再去写 Tone.js 代码后面 AI 生成 pattern 的时候才不会一边调音乐一边调网络。另外TaoToken 的模型对话入口可以用来快速验证模型是否可用地址是 https://taotoken.net/api 你可以在浏览器里发一条测试消息确认返回正常再进 VS Code。如果你打算长期做 AI 辅助编码可以考虑 Coding Plan它更适合高频调用场景。入口在 https://taotoken.net/api 具体路径以控制台显示为准。总之先把 Key 拿到、把 Base URL 配对再往下走。3. 可复制配置VS Code 任务 Tone.js 音序器 AI 提示词这一节是核心给你三份可以直接抄的东西VS Code 任务配置、Tone.js 音序器代码、AI 提示词模板。先建项目目录比如vscode-music-lab然后按下面的步骤来。3.1 初始化项目与依赖在终端里执行mkdir vscode-music-lab cd vscode-music-lab npm init -y npm install tone vite这里用 Vite 做开发服务器因为它启动快、热更新及时。装完后在package.json的scripts里加一行{ scripts: { dev: vite, build: vite build } }然后创建index.html和src/main.js。index.html里放一个按钮和状态显示!DOCTYPE html html langzh-CN head meta charsetUTF-8 / titleVS Code Music Lab/title /head body button idplayPlay/button button idstopStop/button pre idstatusidle/pre script typemodule src/src/main.js/script /body /html3.2 VS Code 任务配置.vscode/tasks.json在项目根目录建.vscode/tasks.json内容如下{ version: 2.0.0, tasks: [ { label: music: dev server, type: shell, command: npm run dev, isBackground: true, problemMatcher: { owner: vite, pattern: { regexp: ., file: 1, location: 2, message: 3 }, background: { activeOnStart: true, beginsPattern: VITE, endsPattern: Local: } }, group: { kind: build, isDefault: true } } ] }这份配置的作用是按CtrlShiftB或CmdShiftB就能启动 dev serverVS Code 会把它当成后台任务不会占着终端不放。problemMatcher里的beginsPattern和endsPattern用来识别 Vite 的启动输出这样任务状态会从“运行中”变成“就绪”。如果你用的是其他构建工具把command换成对应的启动命令即可。3.3 Tone.js 音序器示例src/main.js这是能出声的核心代码包含鼓、贝斯、主旋律三层import * as Tone from tone; const statusEl document.getElementById(status); const playBtn document.getElementById(play); const stopBtn document.getElementById(stop); // 鼓组用 MembraneSynth 做底鼓NoiseSynth 做军鼓 const kick new Tone.MembraneSynth().toDestination(); const snare new Tone.NoiseSynth({ noise: { type: white }, envelope: { attack: 0.001, decay: 0.2, sustain: 0 } }).toDestination(); // 贝斯MonoSynth 更适合低音线条 const bass new Tone.MonoSynth({ oscillator: { type: sawtooth }, envelope: { attack: 0.01, decay: 0.2, sustain: 0.4, release: 0.4 } }).toDestination(); // 主旋律PolySynth 支持和弦 const lead new Tone.PolySynth(Tone.Synth).toDestination(); // 鼓点 pattern每拍触发 const drumPart new Tone.Part((time, hit) { if (hit.kick) kick.triggerAttackRelease(C1, 8n, time); if (hit.snare) snare.triggerAttackRelease(16n, time); }, [ { time: 0:0, kick: true }, { time: 0:2, snare: true }, { time: 1:0, kick: true }, { time: 1:2, snare: true } ]).start(0); // 贝斯 pattern四个音循环 const bassPart new Tone.Part((time, note) { bass.triggerAttackRelease(note, 8n, time); }, [ { time: 0:0, note: C2 }, { time: 0:2, note: E2 }, { time: 1:0, note: G2 }, { time: 1:2, note: A2 } ]).start(0); // 主旋律 pattern简单动机 const leadPart new Tone.Part((time, note) { lead.triggerAttackRelease(note, 4n, time); }, [ { time: 0:0, note: C4 }, { time: 0:2, note: E4 }, { time: 1:0, note: G4 }, { time: 1:2, note: B4 } ]).start(0); // 设置速度与循环 Tone.Transport.bpm.value 120; Tone.Transport.loop true; Tone.Transport.loopEnd 2m; playBtn.addEventListener(click, async () { await Tone.start(); Tone.Transport.start(); statusEl.textContent playing; }); stopBtn.addEventListener(click, () { Tone.Transport.stop(); statusEl.textContent stopped; });这段代码的关键点Tone.start()必须在用户手势点击里调用否则浏览器会拦截音频上下文。Tone.Part的time参数用小节:拍格式0:0表示第 0 小节第 0 拍。Tone.Transport.loopEnd 2m表示两小节循环一次。你改任何一个note的值保存后 Vite 热更新浏览器里点 Play 就能听到新旋律。3.4 AI 提示词模板把下面这段存成prompts/tone-pattern.md用的时候直接复制给 AI你是一个 Tone.js 音乐 pattern 生成器。请根据以下要求输出 JavaScript 代码 - 使用 Tone.js v14 的 API - 输出一个 Tone.Part 的配置数组格式为 [{ time: 0:0, note: C4 }, ...] - 风格{{风格如 techno / lo-fi / ambient}} - 调性{{调性如 C minor}} - 长度2 小节4/4 拍 - 只输出数组本身不要额外解释 示例输出 [ { time: 0:0, note: C3 }, { time: 0:2, note: Eb3 }, { time: 1:0, note: G3 }, { time: 1:2, note: Bb3 } ]用的时候把{{风格}}和{{调性}}替换掉AI 就会按格式返回。你把这个数组粘到bassPart或leadPart里保存即可听到变化。如果 AI 返回了多行你可以要求它“合并成单行数组”方便直接粘贴。3.5 AI 插件配置片段以 Cline 为例如果你用 Cline 或类似插件配置通常是一个 JSON 文件。下面是一个示例字段名以插件实际为准{ apiProvider: openai, openAiBaseUrl: https://taotoken.net/api, openAiApiKey: 你的Key, openAiModelId: 你选定的模型ID }注意 Base URL 不要带多余路径Key 从控制台复制Model ID 填你实际可用的模型名。三件套齐了插件才能正常请求。如果你用的是 Claude Code它的配置文件可能是~/.claude/settings.json或项目内的.claude/settings.json字段名类似baseUrl、apiKey、model按文档填即可。4. 验证请求在浏览器里听到实时演奏配置写完接下来是验证。步骤不复杂但每一步都有明确的成功标志。第一步启动 dev server。在 VS Code 里按CtrlShiftB或者终端执行npm run dev。你会看到 Vite 输出类似VITE v5.x.x ready in 300 ms ➜ Local: http://localhost:5173/看到Local:就说明服务起来了。如果任务配置里的problemMatcher生效VS Code 底部状态栏会显示任务已就绪。第二步打开浏览器访问http://localhost:5173/。页面应该显示两个按钮和一个idle状态。打开开发者工具的控制台确认没有红色报错。如果有Failed to resolve module specifier tone说明依赖没装好回终端跑npm install tone。第三步点击 Play 按钮。第一次点击时浏览器会要求音频权限部分浏览器会显示一个小图标允许后你应该听到鼓点、贝斯和主旋律同时播放。状态文字变成playing。如果没声音先检查系统音量再看控制台是否有The AudioContext was not allowed to start——这通常是因为Tone.start()没有在用户手势里调用。第四步验证实时更新。保持播放状态回到 VS Code把leadPart里的C4改成D4保存。Vite 会热更新浏览器页面不会刷新但下一次循环时主旋律会变成 D4。这就是“实时编码”的核心体验改代码、听变化不需要重启服务。第五步验证 AI 生成的 pattern。把第 3.4 节的提示词发给 AI拿到一个数组替换bassPart的配置保存。如果 AI 返回的音符在 Tone.js 里能正常触发你会听到贝斯线条变化。如果报Invalid note name说明 AI 给了不存在的音名检查是否用了H或B#这类非标准写法。第六步验证多模型切换。如果你在插件里配了多个 Model ID可以切换后重新生成 pattern对比不同模型的输出风格。这一步不是必须但能帮你找到更适合音乐生成的模型。成功标志浏览器持续播放改代码后声音变化控制台无报错。到这一步你的 VS Code 已经是一台能实时演奏的音乐工作站了。5. 本篇常见错排查401、local proxy failed、reading choices、OAuth这一节按真实报错来每个都给出原因和修法。401 Unauthorized。这是最常见的。原因通常是 Key 没填、Key 过期、或者 Base URL 和 Key 不匹配。检查三件套Base URL 是不是https://taotoken.net/apiKey 是不是从控制台复制的完整字符串Model ID 是不是当前可用的。如果用的是 Cline打开配置 JSON 确认字段名没写错。401 不会因为重启 VS Code 消失必须改配置。local proxy failed。这个报错通常出现在插件尝试走本地代理时。原因可能是插件配置里开了代理选项或者系统环境变量里有HTTP_PROXY。检查插件的网络设置关掉“使用本地代理”之类的开关。如果你在终端里能curl通 API但插件报这个错基本就是插件自己的代理配置问题。另外确认 Base URL 没有写成http://localhost之类的本地地址。reading choices。这个报错说明插件收到了响应但响应结构里没有choices字段。常见原因是 Base URL 填成了对话页面地址而不是 API 地址或者 Model ID 填错导致服务端返回了错误对象。检查 Base URL 是不是以/api结尾Model ID 是不是在控制台里能看到。如果返回的是 HTML 而不是 JSON也会报这个错。OAuth 相关报错。如果你用的是 Claude Code 或类似工具它可能默认走 OAuth 登录流程。如果你要用 API Key 方式需要在配置里显式指定apiKey字段并关掉 OAuth 选项。有些工具的配置文件里同时有oauth和apiKey两个字段只填apiKey可能不够还要把oauth设为false或删除。具体字段名看工具文档。Tone.js 相关报错。Tone.start() must be called from a user gesture——把Tone.start()放在按钮点击回调里。Invalid note name——检查 AI 生成的音名Tone.js 用C4、Eb3、F#2这种写法不要用H或中文。Transport is not running——先Tone.Transport.start()再触发 Part。Vite 热更新不生效。如果改代码后浏览器没反应检查 Vite 终端有没有报错。有时候是语法错误导致模块编译失败修掉语法错误后热更新会恢复。如果一直不生效手动刷新页面。排查顺序建议先看终端报错再看浏览器控制台最后看插件配置。大部分问题出在配置三件套和Tone.start()的调用时机上。6. 把 VS Code 变成你的实时音乐工作台走到这里你已经有了一个能跑的环境VS Code 任务一键起服务Tone.js 音序器三层发声AI 按提示词生成 pattern浏览器里实时听到变化。接下来可以做的扩展很多比如加效果器Tone.Reverb、Tone.Delay、加可视化用Tone.Analyser画波形、把 pattern 存成 JSON 文件让 AI 批量生成。如果你想让 AI 更稳定地生成可用的 Tone.js 代码建议把当前 Tone.js 版本的文档摘要放进提示词上下文或者用模型对话入口先问清楚 API 用法再生成。模型对话地址是 https://taotoken.net/api 你可以在那里快速验证模型对 Tone.js 的理解程度。长期做编码和 Agent 场景的话Coding Plan 会更合适入口同样在 https://taotoken.net/api 具体路径以控制台为准。接入文档和 API Keys 管理在 https://taotoken.net/api 配置过程中遇到 401 或 model not found先回控制台确认 Key 和 Model ID。Claude Code 相关配置可以参考 https://taotoken.net/api 里的说明注意 OAuth 和 API Key 的切换。最后给一个实用技巧把常用的 pattern 存成代码片段VS Code 的snippets功能用前缀快速插入。比如定义一个tpart片段展开就是new Tone.Part((time, note) { ... }, []).start(0)的骨架。这样你改音乐的速度会快很多。代码即旋律不是一句口号是你按下保存键后耳朵立刻听到的那一下变化。