Web Midi with WebMidi.js

index.js

import WebMidi from 'webmidi'

var btn1 = document.createElement('BUTTON')
btn1.innerHTML = 'send to all channels'
btn1.onclick = function () { play(song, 'all') }
document.body.appendChild(btn1)

var btn2 = document.createElement('BUTTON')
btn2.innerHTML = 'only one channel'
btn2.onclick = function () { play(song, 1) }
document.body.appendChild(btn2)

function play (events, channel) {
  const output = WebMidi.outputs[0]
  const time = WebMidi.time

  events.forEach(function (event) {
    const opts = { time: time + event.time, duration: event.duration, rawVelocity: true, velocity: event.velocity }
    output.playNote(event.pitch, channel, opts)
  })
}

WebMidi.enable(function (err) {
  if (err) {
    console.log('WebMidi could not be enabled.', err)
  } else {
    console.log('WebMidi enabled!')
  }
})

const song = [
  { time: 0, pitch: 69, duration: 144.92753623188406, velocity: 60 },
  { time: 0, pitch: 47, duration: 434.7826086956522, velocity: 60 },
  { time: 144.92753623188406, pitch: 64, duration: 144.92753623188406, velocity: 60 },
  { time: 289.8550724637681, pitch: 62, duration: 144.92753623188406, velocity: 60 },
  { time: 434.7826086956522, pitch: 66, duration: 144.92753623188406, velocity: 60 },
  { time: 434.7826086956522, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 579.7101449275362, pitch: 61, duration: 144.92753623188406, velocity: 60 },
  { time: 724.6376811594203, pitch: 59, duration: 144.92753623188406, velocity: 60 },
  { time: 869.5652173913044, pitch: 64, duration: 144.92753623188406, velocity: 60 },
  { time: 869.5652173913044, pitch: 55, duration: 434.7826086956522, velocity: 60 },
  { time: 1014.4927536231885, pitch: 59, duration: 144.92753623188406, velocity: 60 },
  { time: 1159.4202898550725, pitch: 61, duration: 36.231884057971016, velocity: 60 },
  { time: 1195.6521739130435, pitch: 62, duration: 253.62318840579712, velocity: 60 },
  { time: 1304.3478260869565, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 1449.2753623188405, pitch: 61, duration: 144.92753623188406, velocity: 60 },
  { time: 1594.2028985507245, pitch: 59, duration: 144.92753623188406, velocity: 60 },
  { time: 1739.1304347826087, pitch: 69, duration: 144.92753623188406, velocity: 60 },
  { time: 1739.1304347826087, pitch: 47, duration: 434.7826086956522, velocity: 60 },
  { time: 1884.0579710144928, pitch: 64, duration: 144.92753623188406, velocity: 60 },
  { time: 2028.985507246377, pitch: 62, duration: 144.92753623188406, velocity: 60 },
  { time: 2173.9130434782605, pitch: 66, duration: 144.92753623188406, velocity: 60 },
  { time: 2173.9130434782605, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 2318.840579710145, pitch: 61, duration: 144.92753623188406, velocity: 60 },
  { time: 2463.768115942029, pitch: 59, duration: 144.92753623188406, velocity: 60 },
  { time: 2608.695652173913, pitch: 64, duration: 144.92753623188406, velocity: 60 },
  { time: 2608.695652173913, pitch: 55, duration: 434.7826086956522, velocity: 60 },
  { time: 2753.623188405797, pitch: 59, duration: 144.92753623188406, velocity: 60 },
  { time: 2898.550724637681, pitch: 61, duration: 36.231884057971016, velocity: 60 },
  { time: 2934.7826086956525, pitch: 62, duration: 253.62318840579712, velocity: 60 },
  { time: 3043.4782608695655, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 3188.405797101449, pitch: 61, duration: 144.92753623188406, velocity: 60 },
  { time: 3333.3333333333335, pitch: 59, duration: 144.92753623188406, velocity: 60 },
  { time: 3478.2608695652175, pitch: 69, duration: 144.92753623188406, velocity: 60 },
  { time: 3478.2608695652175, pitch: 47, duration: 434.7826086956522, velocity: 60 },
  { time: 3623.1884057971015, pitch: 64, duration: 144.92753623188406, velocity: 60 },
  { time: 3768.1159420289855, pitch: 62, duration: 144.92753623188406, velocity: 60 },
  { time: 3913.0434782608695, pitch: 66, duration: 144.92753623188406, velocity: 60 },
  { time: 3913.0434782608695, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 4057.971014492754, pitch: 61, duration: 144.92753623188406, velocity: 60 },
  { time: 4202.898550724638, pitch: 59, duration: 144.92753623188406, velocity: 60 },
  { time: 4347.826086956521, pitch: 64, duration: 144.92753623188406, velocity: 60 },
  { time: 4347.826086956521, pitch: 55, duration: 434.7826086956522, velocity: 60 },
  { time: 4492.753623188406, pitch: 59, duration: 144.92753623188406, velocity: 60 },
  { time: 4637.68115942029, pitch: 61, duration: 36.231884057971016, velocity: 60 },
  { time: 4673.913043478261, pitch: 62, duration: 253.62318840579712, velocity: 60 },
  { time: 4782.608695652174, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 4927.536231884058, pitch: 61, duration: 144.92753623188406, velocity: 60 },
  { time: 5072.463768115942, pitch: 59, duration: 144.92753623188406, velocity: 60 },
  { time: 5217.391304347826, pitch: 61, duration: 1739.1304347826087, velocity: 60 },
  { time: 5217.391304347826, pitch: 47, duration: 434.7826086956522, velocity: 60 },
  { time: 5652.173913043479, pitch: 53, duration: 434.7826086956522, velocity: 60 },
  { time: 6086.956521739131, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 6521.739130434782, pitch: 53, duration: 434.7826086956522, velocity: 60 },
  { time: 6956.521739130435, pitch: 62, duration: 869.5652173913044, velocity: 60 },
  { time: 6956.521739130435, pitch: 47, duration: 434.7826086956522, velocity: 60 },
  { time: 7391.304347826087, pitch: 53, duration: 434.7826086956522, velocity: 60 },
  { time: 7826.086956521739, pitch: 65, duration: 579.7101449275362, velocity: 60 },
  { time: 7826.086956521739, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 8260.86956521739, pitch: 53, duration: 434.7826086956522, velocity: 60 },
  { time: 8405.797101449276, pitch: 68, duration: 289.8550724637681, velocity: 60 },
  { time: 8695.652173913042, pitch: 66, duration: 724.6376811594203, velocity: 60 },
  { time: 8695.652173913042, pitch: 46, duration: 434.7826086956522, velocity: 60 },
  { time: 9130.434782608696, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 9420.289855072462, pitch: 67, duration: 144.92753623188406, velocity: 60 },
  { time: 9565.217391304348, pitch: 66, duration: 144.92753623188406, velocity: 60 },
  { time: 9565.217391304348, pitch: 55, duration: 434.7826086956522, velocity: 60 },
  { time: 9710.144927536232, pitch: 64, duration: 144.92753623188406, velocity: 60 },
  { time: 9855.072463768116, pitch: 61, duration: 144.92753623188406, velocity: 60 },
  { time: 10000, pitch: 58, duration: 144.92753623188406, velocity: 60 },
  { time: 10000, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 10144.927536231884, pitch: 57, duration: 434.7826086956522, velocity: 60 },
  { time: 10434.782608695652, pitch: 46, duration: 434.7826086956522, velocity: 60 },
  { time: 10579.710144927538, pitch: 58, duration: 144.92753623188406, velocity: 60 },
  { time: 10724.63768115942, pitch: 61, duration: 144.92753623188406, velocity: 60 },
  { time: 10869.565217391304, pitch: 66, duration: 144.92753623188406, velocity: 60 },
  { time: 10869.565217391304, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 11014.492753623188, pitch: 64, duration: 144.92753623188406, velocity: 60 },
  { time: 11159.420289855072, pitch: 66, duration: 144.92753623188406, velocity: 60 },
  { time: 11304.347826086958, pitch: 67, duration: 144.92753623188406, velocity: 60 },
  { time: 11304.347826086958, pitch: 55, duration: 434.7826086956522, velocity: 60 },
  { time: 11449.27536231884, pitch: 70, duration: 144.92753623188406, velocity: 60 },
  { time: 11594.202898550724, pitch: 73, duration: 724.6376811594203, velocity: 60 },
  { time: 11739.13043478261, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 12173.913043478262, pitch: 46, duration: 434.7826086956522, velocity: 60 },
  { time: 12318.840579710144, pitch: 74, duration: 144.92753623188406, velocity: 60 },
  { time: 12463.76811594203, pitch: 73, duration: 144.92753623188406, velocity: 60 },
  { time: 12608.695652173912, pitch: 64, duration: 144.92753623188406, velocity: 60 },
  { time: 12608.695652173912, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 12898.550724637682, pitch: 70, duration: 144.92753623188406, velocity: 60 },
  { time: 13043.478260869564, pitch: 69, duration: 144.92753623188406, velocity: 60 },
  { time: 13043.478260869564, pitch: 55, duration: 434.7826086956522, velocity: 60 },
  { time: 13188.40579710145, pitch: 67, duration: 144.92753623188406, velocity: 60 },
  { time: 13333.333333333334, pitch: 62, duration: 289.8550724637681, velocity: 60 },
  { time: 13478.260869565216, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 13623.188405797102, pitch: 60, duration: 144.92753623188406, velocity: 60 },
  { time: 13768.115942028986, pitch: 61, duration: 144.92753623188406, velocity: 60 },
  { time: 13913.04347826087, pitch: 66, duration: 144.92753623188406, velocity: 60 },
  { time: 13913.04347826087, pitch: 46, duration: 434.7826086956522, velocity: 60 },
  { time: 14057.971014492754, pitch: 61, duration: 144.92753623188406, velocity: 60 },
  { time: 14202.898550724636, pitch: 64, duration: 144.92753623188406, velocity: 60 },
  { time: 14347.826086956522, pitch: 61, duration: 144.92753623188406, velocity: 60 },
  { time: 14347.826086956522, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 14492.753623188406, pitch: 57, duration: 144.92753623188406, velocity: 60 },
  { time: 14637.68115942029, pitch: 58, duration: 144.92753623188406, velocity: 60 },
  { time: 14782.608695652174, pitch: 62, duration: 144.92753623188406, velocity: 60 },
  { time: 14782.608695652174, pitch: 55, duration: 434.7826086956522, velocity: 60 },
  { time: 14927.536231884058, pitch: 64, duration: 144.92753623188406, velocity: 60 },
  { time: 15072.463768115942, pitch: 66, duration: 144.92753623188406, velocity: 60 },
  { time: 15217.391304347826, pitch: 66, duration: 36.231884057971016, velocity: 60 },
  { time: 15217.391304347826, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 15253.623188405796, pitch: 64, duration: 253.62318840579712, velocity: 60 },
  { time: 15507.246376811594, pitch: 62, duration: 144.92753623188406, velocity: 60 },
  { time: 15652.173913043478, pitch: 64, duration: 36.231884057971016, velocity: 60 },
  { time: 15652.173913043478, pitch: 47, duration: 434.7826086956522, velocity: 60 },
  { time: 15688.40579710145, pitch: 62, duration: 253.62318840579712, velocity: 60 },
  { time: 15942.028985507246, pitch: 61, duration: 144.92753623188406, velocity: 60 },
  { time: 16086.956521739128, pitch: 62, duration: 36.231884057971016, velocity: 60 },
  { time: 16086.956521739128, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 16123.188405797102, pitch: 61, duration: 253.62318840579712, velocity: 60 },
  { time: 16376.811594202898, pitch: 59, duration: 724.6376811594203, velocity: 60 },
  { time: 16521.73913043478, pitch: 55, duration: 434.7826086956522, velocity: 60 },
  { time: 16956.521739130432, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 17101.44927536232, pitch: 61, duration: 144.92753623188406, velocity: 60 },
  { time: 17246.376811594204, pitch: 59, duration: 144.92753623188406, velocity: 60 },
  { time: 17391.304347826084, pitch: 66, duration: 144.92753623188406, velocity: 60 },
  { time: 17391.304347826084, pitch: 47, duration: 434.7826086956522, velocity: 60 },
  { time: 17536.231884057972, pitch: 69, duration: 144.92753623188406, velocity: 60 },
  { time: 17681.159420289856, pitch: 71, duration: 869.5652173913044, velocity: 60 },
  { time: 17826.08695652174, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 18260.869565217392, pitch: 55, duration: 434.7826086956522, velocity: 60 },
  { time: 18550.72463768116, pitch: 69, duration: 144.92753623188406, velocity: 60 },
  { time: 18695.652173913044, pitch: 66, duration: 144.92753623188406, velocity: 60 },
  { time: 18695.652173913044, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 18840.579710144924, pitch: 64, duration: 289.8550724637681, velocity: 60 },
  { time: 19130.434782608696, pitch: 62, duration: 144.92753623188406, velocity: 60 },
  { time: 19130.434782608696, pitch: 47, duration: 434.7826086956522, velocity: 60 },
  { time: 19275.36231884058, pitch: 66, duration: 144.92753623188406, velocity: 60 },
  { time: 19420.289855072464, pitch: 64, duration: 579.7101449275362, velocity: 60 },
  { time: 19565.217391304348, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 20000, pitch: 62, duration: 579.7101449275362, velocity: 60 },
  { time: 20000, pitch: 55, duration: 434.7826086956522, velocity: 60 },
  { time: 20434.782608695652, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 20579.710144927536, pitch: 66, duration: 289.8550724637681, velocity: 60 },
  { time: 20869.565217391304, pitch: 61, duration: 96.61835748792271, velocity: 60 },
  { time: 20869.565217391304, pitch: 47, duration: 434.7826086956522, velocity: 60 },
  { time: 20966.18357487923, pitch: 62, duration: 96.61835748792271, velocity: 60 },
  { time: 21062.80193236715, pitch: 61, duration: 96.61835748792271, velocity: 60 },
  { time: 21159.420289855076, pitch: 59, duration: 3188.405797101449, velocity: 60 },
  { time: 21304.347826086956, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 21739.130434782608, pitch: 55, duration: 434.7826086956522, velocity: 60 },
  { time: 22173.91304347826, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 22608.695652173916, pitch: 47, duration: 434.7826086956522, velocity: 60 },
  { time: 23043.478260869568, pitch: 54, duration: 434.7826086956522, velocity: 60 },
  { time: 23478.26086956522, pitch: 55, duration: 434.7826086956522, velocity: 60 },
  { time: 23913.04347826087, pitch: 54, duration: 434.7826086956522, velocity: 60 }
]