midiwriter是一款浏览器中生成多轨midi音频声音的插件-BFW插件库

midiwriter是一款浏览器中生成多轨midi音频声音的插件

使用 MidiWriterJS 生成多轨 MIDI 文件

MidiWriterJS 是一个用于生成多轨 MIDI 文件的 JavaScript 库，提供了一个简单而强大的 API，可以用于创建表达丰富的音乐。本文将介绍如何安装和使用 MidiWriterJS，并给出一些示例代码，帮助你快速上手。

安装 MidiWriterJS

你可以通过 npm 或cdn 安装 MidiWriterJS：

cdn

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/midiwriter.js"></script>

npm

npm install midi-writer-js

快速开始

首先，我们导入 MidiWriterJS 并创建一个新的 MIDI 音轨：

import MidiWriter from 'midi-writer-js';

// 创建一个新的音轨
const track = new MidiWriter.Track();

// 定义乐器（可选）
track.addEvent(new MidiWriter.ProgramChangeEvent({instrument: 1}));

// 添加一些音符
const note = new MidiWriter.NoteEvent({pitch: ['C4', 'D4', 'E4'], duration: '4'});
track.addEvent(note);

// 生成数据 URI
const write = new MidiWriter.Writer(track);
console.log(write.dataUri());

MidiWriter.Track() 方法

MidiWriter.Track 类用于创建和操作 MIDI 音轨。你可以添加各种事件，如音符、速度变化、时间签名等。下面是一些常用的方法：

addEvent({event}, mapFunction): 添加事件到音轨。
setTempo(tempo): 设置节奏。
addText(text): 添加文本。
addCopyright(text): 添加版权信息。
addTrackName(text): 添加音轨名称。
addInstrumentName(text): 添加乐器名称。
addMarker(text): 添加标记。
addCuePoint(text): 添加提示点。
addLyric(text): 添加歌词。
setTimeSignature(numerator, denominator): 设置时间签名。

MidiWriter.NoteEvent() 方法

MidiWriter.NoteEvent 类用于创建音符事件。每个音符事件包括 NoteOnEvent 和 NoteOffEvent（或 NoteOnEvent 带零速度），标记音符的开始和结束。NoteEvent 支持以下选项：

pitch: 音高，可以是字符串或数组，例如 C#4。
duration: 音符持续时间，如 1 表示全音符，2 表示半音符，4 表示四分音符等。
wait: 音符前的等待时间（休止符），与 duration 取值相同。
sequential: 是否按顺序播放音高数组中的音符。
velocity: 音量大小，值范围为 1-100。
repeat: 事件重复次数。
channel: MIDI 通道。
grace: 装饰音符，格式与 pitch 相同。
tick: 指定事件播放的具体 tick 值。

生成 MIDI 文件

MidiWriter.Writer 类提供了几种输出文件的方法：

buildFile(): 返回 Uint8Array。
base64(): 返回 Base64 编码字符串。
dataUri(): 返回数据 URI。
stdout(): 输出文件流（命令行界面）。

示例：生成 "Hot Cross Buns"

下面是一个生成 "Hot Cross Buns" 的示例代码，展示了如何使用 addEvent() 和映射函数来为所有事件应用特定属性：

import MidiWriter from 'midi-writer-js';

const track = new MidiWriter.Track();

track.addEvent([
    new MidiWriter.NoteEvent({pitch: ['E4','D4'], duration: '4'}),
    new MidiWriter.NoteEvent({pitch: ['C4'], duration: '2'}),
    new MidiWriter.NoteEvent({pitch: ['E4','D4'], duration: '4'}),
    new MidiWriter.NoteEvent({pitch: ['C4'], duration: '2'}),
    new MidiWriter.NoteEvent({pitch: ['C4', 'C4', 'C4', 'C4', 'D4', 'D4', 'D4', 'D4'], duration: '8'}),
    new MidiWriter.NoteEvent({pitch: ['E4','D4'], duration: '4'}),
    new MidiWriter.NoteEvent({pitch: ['C4'], duration: '2'})
], function(event, index) {
    return {sequential: true};
});

const write = new MidiWriter.Writer(track);
console.log(write.dataUri());

VexFlow 集成

MidiWriterJS 还可以从 VexFlow 声部导出 MIDI 文件，尽管此功能仍处于实验阶段。当前的用法是使用 MidiWriter.VexFlow.trackFromVoice(voice) 创建一个 MidiWriterJS 音轨对象：

// VexFlow 代码定义音符
const voice = create_4_4_voice().addTickables(notes);

const vexWriter = new MidiWriter.VexFlow();
const track = vexWriter.trackFromVoice(voice);
const writer = new MidiWriter.Writer([track]);
console.log(writer.dataUri());

完整示例代码

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">



</head>

<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/midiwriter.js"></script>


<script >
function genmidi(){
    const track = new MidiWriter.Track();

      // Add a tempo event
    track.setTempo(120);

    // Add a time signature event
    track.setTimeSignature(4, 4);

    // Add a note (C4, duration of 4 beats)
    const note = new MidiWriter.NoteEvent({pitch: ['C4'], duration: '4'});
    track.addEvent(note);

    // Generate MIDI file and create a download link
    const write = new MidiWriter.Writer(track);
    const blob = new Blob([write.buildFile()], { type: 'audio/midi' });
    const url = URL.createObjectURL(blob);

    // Create a download link and click it
    const link = document.createElement('a');
    link.href = url;
    link.download = 'music.mid';
    link.click();

    // Revoke the object URL after the download
    URL.revokeObjectURL(url);
}

    
</script>
  
  <button onclick="genmidi()" style="margin:20px;">点击生成midi并下载</button>
  
</body>

</html>