快速构建：使用Magenta.js在15分钟内创建一个完整的AI音乐应用

Magenta.js是一个强大的JavaScript库，让你能够直接在浏览器中利用机器学习技术进行音乐和艺术创作。本指南将带你快速入门，在短短15分钟内构建一个功能完整的AI音乐应用，即使你没有机器学习背景也能轻松上手。## 🎯 准备工作：5分钟环境搭建### 1. 克隆项目仓库首先，通过以下命令获取Magenta.js的完整代码库：```bashgit clone https:/

咎丹娜

1077人浏览 · 2026-04-29 14:37:08

咎丹娜 · 2026-04-29 14:37:08 发布

快速构建：使用Magenta.js在15分钟内创建一个完整的AI音乐应用

【免费下载链接】magenta-js Magenta.js: Music and Art Generation with Machine Learning in the browser 项目地址: https://gitcode.com/gh_mirrors/ma/magenta-js

Magenta.js是一个强大的JavaScript库，让你能够直接在浏览器中利用机器学习技术进行音乐和艺术创作。本指南将带你快速入门，在短短15分钟内构建一个功能完整的AI音乐应用，即使你没有机器学习背景也能轻松上手。

🎯 准备工作：5分钟环境搭建

1. 克隆项目仓库

首先，通过以下命令获取Magenta.js的完整代码库：

git clone https://gitcode.com/gh_mirrors/ma/magenta-js
cd magenta-js/music

2. 安装依赖

使用yarn安装项目所需的所有依赖：

yarn install

3. 启动开发服务器

运行开发服务器，让我们可以实时预览和测试应用：

yarn run dev

服务器启动后，访问http://localhost:8080即可看到Magenta.js的演示页面。

🎹 核心功能探索：5分钟了解可用工具

Magenta.js提供了多种强大的AI音乐模型，你可以直接在浏览器中使用这些模型创建音乐。以下是一些主要模型及其应用场景：

MusicVAE：音乐生成与变奏

MusicVAE（音乐变分自编码器）能够生成全新的音乐片段，并支持对现有旋律进行变奏。你可以在music/demos/music_vae.html中体验这一功能。

Piano Genie：让任何人都能弹钢琴

Piano Genie是一个神奇的工具，它能将简单的输入转换为复杂的钢琴旋律，即使你没有钢琴演奏经验也能创作出美妙的音乐。相关演示可在music/demos/piano_genie.html找到。

MusicRNN：旋律延续

MusicRNN可以根据你输入的简单旋律，自动生成后续的音乐片段，帮助你克服创作瓶颈。查看music/demos/music_rnn.html了解更多。

🚀 实战开发：5分钟创建你的第一个AI音乐应用

现在，让我们动手创建一个简单但功能完整的AI音乐应用。这个应用将使用MusicRNN模型来延续用户输入的旋律。

1. 创建HTML页面

在music/demos目录下创建一个新文件my_first_ai_music_app.html，添加以下内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>我的第一个AI音乐应用</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>AI旋律生成器</h1>
  <div id="controls">
    <button id="startBtn">开始录制</button>
    <button id="generateBtn">生成旋律</button>
    <button id="playBtn">播放结果</button>
  </div>
  <div id="visualizer"></div>
  
  <script src="../dist/es6/music.js"></script>
  <script src="common.js"></script>
  <script src="my_first_ai_music_app.js"></script>
</body>
</html>

2. 编写JavaScript逻辑

在同一目录下创建my_first_ai_music_app.js文件，添加以下代码：

// 初始化MusicRNN模型
const musicRNN = new mm.MusicRNN('https://storage.googleapis.com/magentadata/js/checkpoints/music_rnn/melody_rnn');
let recorder = null;
let sequence = null;

// 加载模型
musicRNN.initialize().then(() => {
  console.log('MusicRNN模型加载完成！');
});

// 录制按钮事件
document.getElementById('startBtn').addEventListener('click', async () => {
  recorder = new mm.Recorder();
  await recorder.initialize();
  recorder.start();
  alert('开始录制！请在钢琴上弹奏简单旋律');
});

// 生成按钮事件
document.getElementById('generateBtn').addEventListener('click', async () => {
  sequence = await recorder.stop();
  const generated = await musicRNN.continueSequence(sequence, 128, 0.5);
  
  // 可视化生成的旋律
  const visualizer = new mm.Visualizer(generated, document.getElementById('visualizer'));
  visualizer.draw();
  
  // 保存生成的旋律
  sequence = generated;
  alert('旋律生成完成！');
});

// 播放按钮事件
document.getElementById('playBtn').addEventListener('click', () => {
  if (sequence) {
    const player = new mm.Player();
    player.play(sequence);
  }
});