MCP（Model Context Protocol）协议最近很火，但大多数应用还停留在”让 AI 读写文件”的阶段。今天洹拓科技分享一个更有趣的场景：用 WebMCP 让 AI 在网页里创作音乐。

这个想法来自我们为新乡某音乐培训机构做线上教学平台时的需求——能不能让 AI 根据学生的演奏水平，自动生成配套练习曲目？答案是：可以，而且效果不错。

什么是 WebMCP

WebMCP 是 MCP 协议在浏览器端的实现，让 Web 应用可以直接调用大模型能力，而不需要后端中转。它的核心优势：

  • 低延迟：请求直接从浏览器发出，省去了后端转发
  • 低成本：不需要为 AI 功能单独部署服务
  • 易部署：纯前端实现，静态托管即可

但 WebMCP 也有局限：API Key 暴露在前端不安全，适合个人项目或内部工具，生产环境还是得走后端。

技术架构

我们的实现分三层：

1. 音频生成层

用 Tone.js 在浏览器里合成音乐。Tone.js 是一个 Web Audio 框架，可以生成各种乐器音色、控制节奏、添加效果器。

const synth = new Tone.PolySynth(Tone.Synth).toDestination();
synth.triggerAttackRelease("C4", "8n");

2. AI 决策层

调用 DeepSeek API，让大模型根据输入条件生成音乐参数：

  • 风格（古典、爵士、流行）
  • 调性（C大调、A小调）
  • 节奏（4/4、3/4）
  • 和弦进行（I-IV-V-I）

3. 交互层

用户输入自然语言描述，比如”生成一段舒缓的钢琴曲，适合睡前听”，AI 解析后生成对应参数，Tone.js 实时合成播放。

核心代码

async function generateMusic(prompt) {
  // 1. 调用 DeepSeek 生成音乐参数
  const params = await callDeepSeek(prompt);
  
  // 2. 解析参数
  const { style, key, tempo, chords } = JSON.parse(params);
  
  // 3. 用 Tone.js 合成
  const synth = new Tone.PolySynth().toDestination();
  Tone.Transport.bpm.value = tempo;
  
  chords.forEach((chord, i) => {
    synth.triggerAttackRelease(chord, "4n", i * 0.5);
  });
  
  Tone.Transport.start();
}

实际效果

我们测试了几个场景：

场景1：教学辅助

学生输入”我想练习 C 大调的音阶”，AI 生成对应的练习曲目，从简单到复杂逐步递进。

场景2：背景音乐

视频创作者输入”生成一段 30 秒的轻快背景音乐，适合 Vlog”，AI 生成可商用的原创音乐。

场景3：情绪调节

用户输入”我现在很焦虑，想听点放松的音乐”，AI 生成舒缓的旋律和节奏。

效果超出预期，尤其是教学场景，学生反馈”比枯燥的练习曲有趣多了”。

洹拓科技的思考

这个项目让我们看到 AI 创意工具的另一个方向：不是替代人类创作，而是降低创作门槛。以前写一首曲子需要乐理知识和编程能力，现在用自然语言就能生成。

但我们也发现一些问题：

  1. 音质有限：Web Audio API 的音质比不上专业 DAW
  2. 风格单一：AI 生成的音乐缺乏个性，容易”千篇一律”
  3. 版权模糊：AI 生成的音乐版权归属还不明确

如果你也想尝试 AI 创意工具，洹拓科技可以提供从需求分析到技术实现的全流程服务。我们为辉县及新乡本地的教育机构、文创企业提供定制化 AI 解决方案。

新乡洹拓科技有限公司
地址：河南省新乡市辉县市金城百货四楼
电话：400-829-9957
业务：软件开发 | AI 应用 | 创意工具 | 云服务

#MCP #WebAI #音乐生成 #创意工具 #前端开发