Tempo control

[cifkao]

Add a way to control the tempo. This should be optional – possibly turned on with an attribute, maybe controls="tempo" (which might just reveal the control with CSS).

It's not clear what kind of control to use, an easy one would be <input type="number">.

The functionality itself is present in Magenta.js, we just need to call BasePlayer.setTempo(qpm) at the beginning of playback. However, this feature has some bugs apparently related to the fact that the Magenta.js player doesn't account for tempo when it sets durations:

• Note durations stay the same regardless of tempo, i.e. when the tempo is slow, all notes will sound too short, and vice versa (see Changing tempo should also change note length magenta/magenta-js#415)
• If the tempo is lower than the original tempo, playback will end too early, and vice versa

[fredgreen182]

Are there any plans to develop this enhancement?

[cifkao]

Personally I'm not planning to implement this, given the fact that even if I figure out the UI part, there are unfortunately the limitations that I described. Solving these limitations would require either relatively heavy changes to Magenta.js, or dropping Magenta.js and switching to a different backend. However, I'm happy to accept contributions on the UI side and I can then help implementing the interaction, keeping in mind that it would be an experimental feature due to these limitations.

[PerryRylance]

You might find midi-to-milliseconds useful

[danjferg]

Here's my workaround:

• My midi-player object handle is "player"
• Add a listener to the player load event and copy the note sequence (called "seq").
• Add a slider for tempo
• Add a listener to the slider to change the tempo using player.player.setTempo(tempo);
• Loop through all the notes and adjust the endTime based on the orignal vs new tempo:
  player.ns.notes.forEach((note, i) => { note.endTime = seq.notes[i].startTime + (seq.notes[i].endTime - seq.notes[i].startTime) * seq.tempos[0].qpm / tempo; });