MIDI.js生成乐谱

MIDI.js是一个JavaScript库，可以用来生成和播放MIDI音乐文件。以下是使用MIDI.js生成乐谱的步骤：

1. 引入MIDI.js库

在HTML文件中引入MIDI.js库的JavaScript文件。

<script src="https://cdn.jsdelivr.net/npm/midijs/dist/midi.min.js"></script>

2. 加载MIDI文件

使用MIDI.js的`MIDIjs.player.loadFile`方法加载MIDI文件。例如：

MIDIjs.player.loadFile("music.mid");

3. 解析MIDI文件

使用MIDI.js的`MIDIjs.Player`类解析MIDI文件。例如：

var player = new MIDIjs.Player();
player.load("music.mid", function() {
  var track = player.tracks[0];
  console.log(track.events);
});

4. 生成乐谱

根据MIDI文件中的事件信息，生成乐谱。例如：

var events = track.events;
var notes = [];

for (var i = 0; i < events.length; i++) {
  var event = events[i];
  if (event.type === "channel") {
    if (event.subtype === "noteOn") {
      notes.push({
        pitch: event.param1,
        start: event.playTime,
        duration: 0
      });
    } else if (event.subtype === "noteOff") {
      for (var j = notes.length - 1; j >= 0; j--) {
        if (notes[j].pitch === event.param1 && notes[j].duration === 0) {
          notes[j].duration = event.playTime - notes[j].start;
          break;
        }
      }
    }
  }
}

console.log(notes);

以上代码将MIDI文件中的音符事件转换为一个包含音高、开始时间和持续时间的数组。

5. 显示乐谱

将生成的乐谱显示在网页中。可以使用HTML和CSS来创建一个表格，并使用JavaScript来将乐谱数据填充到表格中。例如：

<div id="sheet-music"></div>

<style>
  table {
    border-collapse: collapse;
  }

  td {
    border: 1px solid black;
    width: 10px;
    height: 20px;
  }
</style>

<script>
  var sheetMusic = document.getElementById("sheet-music");
  var table = document.createElement("table");

  for (var i = 0; i < notes.length; i++) {
    var note = notes[i];
    var tr = document.createElement("tr");
    var td = document.createElement("td");
    td.innerHTML = note.pitch;
    tr.appendChild(td);

    for (var j = 0; j < note.duration / 100; j++) {
      var td = document.createElement("td");
      td.style.backgroundColor = "gray";
      tr.appendChild(td);
    }

    table.appendChild(tr);
  }

  sheetMusic.appendChild(table);
</script>

以上代码将生成一个包含音符音高和持续时间的表格，每个音符的持续时间用灰色单元格表示。可以使用CSS样式来自定义乐谱的外观。