引言：当代码编辑器化身音乐工作室

你是否曾想过，你熟悉的编程环境Visual Studio Code（VS Code）不仅能编写软件，还能谱写音乐？本期视频《Coding Music in VS Code》（上传于2025年10月21日），向我们展示了VS Code团队的产品经理Julia如何将这一想法变为现实。她通过利用最新的VS Code功能、开源Web音频库 Tone.js，以及强大的 GitHub Copilot，构建了一个浏览器端的实时编码音乐应用程序。这不仅是一场技术演示，更是一次关于 “情境编码”（vibe coding） 的创意与节奏的互动体验。

项目核心：Tone.js与浏览器实时音乐

Julia对以代码为基础的音乐创作方式一直抱有浓厚的兴趣，因为这是她更熟悉的领域。她的主要目标是利用 Tone.js 库来构建一个浏览器端的实时编码音乐应用程序。这个应用旨在让用户能够编写基于模式（pattern-based）的音乐代码，并通过 无缝的实时更新 来即时播放音乐。

在开始构建之前，Julia首先向Copilot查询了关于Tone.js的知识，这不仅是为了获取信息，也是为了给她后续的指令文件提供上下文，以便更好地向大型语言模型（LLM）提供丰富的指令。

深入分析：Copilot提示文件（Prompt Files）的高效利用

面对复杂的项目需求，Julia没有将所有要求倾倒进小的聊天窗口，而是采用了Copilot的 提示文件（Prompt Files） 功能。

1. 创建与配置： 她创建了一个名为 web app DJ 的提示文件（prompt MD文件），并在这里明确定义了任务、需求、成功标准和交付物。
2. 模型指定： 她在文件中指定了希望使用的模型是 cloud 4.5；如果没有指定，Copilot会默认使用当前聊天窗口中选择的模型。
3. 详细需求： 需求包括了使用哪些Web技术、需要实现写入和编辑生成音乐模式的代码功能、以及用于管理播放的 播放（play）和停止（stop）控制。她甚至要求Copilot生成一个包含设置和使用说明的 README文件。

保存文件后，她通过简单的斜杠命令 /web DJ 直接引用该文件，指示Copilot遵循提示文件中的所有指令。

从AI输出到实时DJ应用

Copilot执行指令后，迅速完成了工作：它生成了所有代码，通过 npm install 安装了依赖项，并启动了开发服务器，使项目在本地运行起来。

在输出总结中，Copilot不仅提供了核心功能的实现概览，还提供了一个快速示例代码片段，以及项目的文件结构概览。Copilot成功地实现了Julia描述的所有核心功能，包括基于模式的音乐系统、用Tone.js构建的音频引擎，以及用于交互的简洁用户界面。

这个生成的应用程序被命名为 “DJ Julia”。

实战体验：用代码进行混音与分层

Julia开始测试这个应用，界面上拥有播放和停止按钮、可以调整 速度（tempo）、切换不同的 乐器（instruments） 以及调整 效果（effects）。应用底部还有一个 实时控制台（live console） 来展示实时交互情况。

1. 初始播放： Julia粘贴了Copilot提供的示例代码片段，点击播放按钮，音乐成功运行。
2. 利用文档： 她查阅了Copilot生成的 README 文件，其中包含设置和使用说明、模式示例，以及乐器和效果的概览。
3. AI辅助创意： 为了让音乐更有趣，Julia进一步要求Copilot创建一个新的 Markdown 文件（techno sample），专门生成一个具有 Techno低音（technobase tune） 关键特征的音乐模式。
4. 效率优化： 当Copilot将模式拆分成多行时，Julia再次要求Copilot进行 重构（refactor），将所有内容合并成单行，以便轻松复制粘贴到浏览器编辑器中。Copilot还贴心地提供了 推荐设置，例如应使用的速度、要应用的效果，甚至是一些使用技巧。
5. 构建复杂的音轨： 实时编码的关键在于 音乐分层（layering the music）。Julia调整到推荐的速度，每当她添加一个新的音乐模式（如修改鼓掌声或添加主旋律模式），它就会在现有的音轨上叠加，从而构建出更复杂的曲目。

深刻洞察：AI、创意与编程的融合

这段演示深刻揭示了现代开发工具如何模糊了编程与艺术创作的界限。

首先，提示文件 的使用是一个重要的洞察点，它展示了在处理复杂、多步骤的生成任务时，如何有效地为LLM提供结构化和丰富的上下文。

其次，GitHub Copilot在这里的角色不再仅仅是代码补全工具，而是一个 音乐合作者和编曲家。它不仅能生成功能性的代码，还能根据特定的音乐流派（如Techno）的特征来 创作 内容。Copilot实现了 实时节拍 的生成，并通过代码展示了AI如何能够直接从代码中进行 作曲、分层和混音。

最终，Julia的实践将VS Code转变成了一个功能强大的音乐工作室，展现了 “代码音乐模式、节拍和效果的实时编码” 的无限潜力。这是一种集创造力、节奏感和编码于一体的 “情境编码” 实践。

原始视频：https://youtu.be/9NKNNHCsykQ?si=D1nLeTKy7Ew1zD5G
中英文字幕：【代码即旋律—在VS Code中利用AI与Tone.js进行实时音乐创作】