From b5b866a89455f3a6a1d2e40afec22ec6ce9b598c Mon Sep 17 00:00:00 2001 From: Jade Rowland Date: Sat, 19 Aug 2023 01:08:41 -0400 Subject: [PATCH 1/4] time clock improvements --- packages/midi/midi.mjs | 67 ++++++++++++++++++++++++------------------ 1 file changed, 39 insertions(+), 28 deletions(-) diff --git a/packages/midi/midi.mjs b/packages/midi/midi.mjs index 29abf21b..9d110b63 100644 --- a/packages/midi/midi.mjs +++ b/packages/midi/midi.mjs @@ -6,8 +6,8 @@ This program is free software: you can redistribute it and/or modify it under th import * as _WebMidi from 'webmidi'; import { Pattern, isPattern, logger } from '@strudel.cycles/core'; -import { getAudioContext } from '@strudel.cycles/webaudio'; import { noteToMidi } from '@strudel.cycles/core'; +import { Note } from 'webmidi'; // if you use WebMidi from outside of this package, make sure to import that instance: export const { WebMidi } = _WebMidi; @@ -47,7 +47,8 @@ export function enableWebMidi(options = {}) { // const outputByName = (name: string) => WebMidi.getOutputByName(name); const outputByName = (name) => WebMidi.getOutputByName(name); -let midiReady; +let midiReady = false; +let prevTime = 0; // output?: string | number, outputs: typeof WebMidi.outputs function getDevice(output, outputs) { @@ -60,7 +61,9 @@ function getDevice(output, outputs) { if (typeof output === 'string') { return outputByName(output); } - return outputs[0]; + // attempt to default to IAC device if none is specified + const IACOutput = outputs.find((output) => output.name.includes('IAC')); + return IACOutput ?? outputs[0]; } // Pattern.prototype.midi = function (output: string | number, channel = 1) { @@ -68,21 +71,6 @@ Pattern.prototype.midi = function (output) { if (!supportsMidi()) { throw new Error(`🎹 WebMidi is not enabled. Supported Browsers: https://caniuse.com/?search=webmidi`); } - /* await */ enableWebMidi({ - onConnected: ({ outputs }) => - logger(`Midi device connected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`), - onDisconnected: ({ outputs }) => - logger(`Midi device disconnected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`), - onReady: ({ outputs }) => { - const device = getDevice(output, outputs); - const otherOutputs = outputs - .filter((o) => o.name !== device.name) - .map((o) => `'${o.name}'`) - .join(' | '); - midiReady = true; - logger(`Midi connected! Using "${device.name}". ${otherOutputs ? `Also available: ${otherOutputs}` : ''}`); - }, - }); if (isPattern(output)) { throw new Error( `.midi does not accept Pattern input. Make sure to pass device name with single quotes. Example: .midi('${ @@ -90,11 +78,34 @@ Pattern.prototype.midi = function (output) { }')`, ); } - return this.onTrigger((time, hap) => { + + if (midiReady === false) { + enableWebMidi({ + onConnected: ({ outputs }) => { + const device = getDevice(output, outputs); + const otherOutputs = outputs + .filter((o) => o.name !== device.name) + .map((o) => `'${o.name}'`) + .join(' | '); + + midiReady = true; + logger(`Midi connected! Using "${device.name}". ${otherOutputs ? `Also available: ${otherOutputs}` : ''}`); + }, + onDisconnected: ({ outputs }) => + logger(`Midi device disconnected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`), + }); + } + + return this.onTrigger((time, hap, currentTime, cps = 1) => { if (!midiReady) { return; } + const device = getDevice(output, WebMidi.outputs); + const current = performance.now(); + // console.log(current - prevTime); + prevTime = current; + if (!device) { throw new Error( `🔌 MIDI device '${output ? output : ''}' not found. Use one of ${WebMidi.outputs @@ -104,21 +115,21 @@ Pattern.prototype.midi = function (output) { } hap.ensureObjectValue(); - // calculate time - const timingOffset = WebMidi.time - getAudioContext().getOutputTimestamp().contextTime * 1000; - time = time * 1000 + timingOffset; + const offset = (time - currentTime) * 1000; + + // passing a string with a +num into the webmidi api adds an offset to the current time https://webmidijs.org/api/classes/Output + const timeOffsetString = `+${offset}`; // destructure value const { note, nrpnn, nrpv, ccn, ccv, midichan = 1 } = hap.value; const velocity = hap.context?.velocity ?? 0.9; // TODO: refactor velocity - const duration = hap.duration.valueOf() * 1000 - 5; + const duration = Math.round(hap.duration.valueOf() * 1000 - 5); if (note != null) { const midiNumber = typeof note === 'number' ? note : noteToMidi(note); - device.playNote(midiNumber, midichan, { - time, - duration, - attack: velocity, + const midiNote = new Note(midiNumber, { attack: velocity, duration }); + device.playNote(midiNote, midichan, { + time: timeOffsetString, }); } if (ccv && ccn) { @@ -129,7 +140,7 @@ Pattern.prototype.midi = function (output) { throw new Error('expected ccn to be a number or a string'); } const scaled = Math.round(ccv * 127); - device.sendControlChange(ccn, scaled, midichan, { time }); + device.sendControlChange(ccn, scaled, midichan, { time: timeOffsetString }); } }); }; From 42662748d37c1bee71b16e4a66ecf822c13b0fc8 Mon Sep 17 00:00:00 2001 From: Jade Rowland Date: Sat, 19 Aug 2023 15:06:55 -0400 Subject: [PATCH 2/4] cleaning up changes --- packages/midi/midi.mjs | 92 ++++++++++++++++++++---------------------- 1 file changed, 43 insertions(+), 49 deletions(-) diff --git a/packages/midi/midi.mjs b/packages/midi/midi.mjs index 9d110b63..44b8ae2e 100644 --- a/packages/midi/midi.mjs +++ b/packages/midi/midi.mjs @@ -8,7 +8,6 @@ import * as _WebMidi from 'webmidi'; import { Pattern, isPattern, logger } from '@strudel.cycles/core'; import { noteToMidi } from '@strudel.cycles/core'; import { Note } from 'webmidi'; - // if you use WebMidi from outside of this package, make sure to import that instance: export const { WebMidi } = _WebMidi; @@ -16,12 +15,28 @@ function supportsMidi() { return typeof navigator.requestMIDIAccess === 'function'; } -export function enableWebMidi(options = {}) { - const { onReady, onConnected, onDisconnected } = options; +function getMidiDeviceNamesString(outputs) { + return outputs.map((o) => `'${o.name}'`).join(' | '); +} +export function enableWebMidi(options = {}) { + const { onReady, onConnected, onDisconnected, onEnabled } = options; + if (WebMidi.enabled) { + return; + } if (!supportsMidi()) { throw new Error('Your Browser does not support WebMIDI.'); } + WebMidi.addListener('connected', () => { + onConnected?.(WebMidi); + }); + WebMidi.addListener('enabled', () => { + onEnabled?.(WebMidi); + }); + // Reacting when a device becomes unavailable + WebMidi.addListener('disconnected', (e) => { + onDisconnected?.(WebMidi, e); + }); return new Promise((resolve, reject) => { if (WebMidi.enabled) { // if already enabled, just resolve WebMidi @@ -32,13 +47,6 @@ export function enableWebMidi(options = {}) { if (err) { reject(err); } - WebMidi.addListener('connected', (e) => { - onConnected?.(WebMidi); - }); - // Reacting when a device becomes unavailable - WebMidi.addListener('disconnected', (e) => { - onDisconnected?.(WebMidi, e); - }); onReady?.(WebMidi); resolve(WebMidi); }); @@ -47,9 +55,6 @@ export function enableWebMidi(options = {}) { // const outputByName = (name: string) => WebMidi.getOutputByName(name); const outputByName = (name) => WebMidi.getOutputByName(name); -let midiReady = false; -let prevTime = 0; - // output?: string | number, outputs: typeof WebMidi.outputs function getDevice(output, outputs) { if (!outputs.length) { @@ -61,16 +66,20 @@ function getDevice(output, outputs) { if (typeof output === 'string') { return outputByName(output); } - // attempt to default to IAC device if none is specified + // attempt to default to first IAC device if none is specified const IACOutput = outputs.find((output) => output.name.includes('IAC')); + const device = IACOutput ?? outputs[0]; + if (!device) { + throw new Error( + `🔌 MIDI device '${output ? output : ''}' not found. Use one of ${getMidiDeviceNamesString(WebMidi.outputs)}`, + ); + } + return IACOutput ?? outputs[0]; } // Pattern.prototype.midi = function (output: string | number, channel = 1) { Pattern.prototype.midi = function (output) { - if (!supportsMidi()) { - throw new Error(`🎹 WebMidi is not enabled. Supported Browsers: https://caniuse.com/?search=webmidi`); - } if (isPattern(output)) { throw new Error( `.midi does not accept Pattern input. Make sure to pass device name with single quotes. Example: .midi('${ @@ -79,52 +88,37 @@ Pattern.prototype.midi = function (output) { ); } - if (midiReady === false) { - enableWebMidi({ - onConnected: ({ outputs }) => { - const device = getDevice(output, outputs); - const otherOutputs = outputs - .filter((o) => o.name !== device.name) - .map((o) => `'${o.name}'`) - .join(' | '); + enableWebMidi({ + onEnabled: ({ outputs }) => { + const device = getDevice(output, outputs); + const otherOutputs = outputs.filter((o) => o.name !== device.name); + logger( + `Midi enabled! Using "${device.name}". ${ + otherOutputs?.length ? `Also available: ${getMidiDeviceNamesString(otherOutputs)}` : '' + }`, + ); + }, + onDisconnected: ({ outputs }) => + logger(`Midi device disconnected! Available: ${getMidiDeviceNamesString(outputs)}`), + }); - midiReady = true; - logger(`Midi connected! Using "${device.name}". ${otherOutputs ? `Also available: ${otherOutputs}` : ''}`); - }, - onDisconnected: ({ outputs }) => - logger(`Midi device disconnected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`), - }); - } - - return this.onTrigger((time, hap, currentTime, cps = 1) => { - if (!midiReady) { + return this.onTrigger((time, hap, currentTime, cps) => { + if (!WebMidi.enabled) { return; } - const device = getDevice(output, WebMidi.outputs); - const current = performance.now(); - // console.log(current - prevTime); - prevTime = current; - - if (!device) { - throw new Error( - `🔌 MIDI device '${output ? output : ''}' not found. Use one of ${WebMidi.outputs - .map((o) => `'${o.name}'`) - .join(' | ')}`, - ); - } hap.ensureObjectValue(); const offset = (time - currentTime) * 1000; - // passing a string with a +num into the webmidi api adds an offset to the current time https://webmidijs.org/api/classes/Output const timeOffsetString = `+${offset}`; // destructure value const { note, nrpnn, nrpv, ccn, ccv, midichan = 1 } = hap.value; const velocity = hap.context?.velocity ?? 0.9; // TODO: refactor velocity - const duration = Math.round(hap.duration.valueOf() * 1000 - 5); + // note off messages will often a few ms arrive late, try to prevent glitching by subtracting from the duration length + const duration = Math.round(hap.duration.valueOf() * 1000 - 10); if (note != null) { const midiNumber = typeof note === 'number' ? note : noteToMidi(note); const midiNote = new Note(midiNumber, { attack: velocity, duration }); From abb0b3b4c03fb3999279e396b4283c1cbbbc1cd9 Mon Sep 17 00:00:00 2001 From: Jade Rowland Date: Sat, 19 Aug 2023 15:09:46 -0400 Subject: [PATCH 3/4] dont round duration --- packages/midi/midi.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/midi/midi.mjs b/packages/midi/midi.mjs index 44b8ae2e..dea3be7a 100644 --- a/packages/midi/midi.mjs +++ b/packages/midi/midi.mjs @@ -118,7 +118,7 @@ Pattern.prototype.midi = function (output) { const velocity = hap.context?.velocity ?? 0.9; // TODO: refactor velocity // note off messages will often a few ms arrive late, try to prevent glitching by subtracting from the duration length - const duration = Math.round(hap.duration.valueOf() * 1000 - 10); + const duration = hap.duration.valueOf() * 1000 - 10; if (note != null) { const midiNumber = typeof note === 'number' ? note : noteToMidi(note); const midiNote = new Note(midiNumber, { attack: velocity, duration }); From 3eb63f1730204c9e3e57124fb39e7373db04b8b1 Mon Sep 17 00:00:00 2001 From: Jade Rowland Date: Sat, 19 Aug 2023 15:10:53 -0400 Subject: [PATCH 4/4] round duration down --- packages/midi/midi.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/midi/midi.mjs b/packages/midi/midi.mjs index dea3be7a..fa86f629 100644 --- a/packages/midi/midi.mjs +++ b/packages/midi/midi.mjs @@ -118,7 +118,7 @@ Pattern.prototype.midi = function (output) { const velocity = hap.context?.velocity ?? 0.9; // TODO: refactor velocity // note off messages will often a few ms arrive late, try to prevent glitching by subtracting from the duration length - const duration = hap.duration.valueOf() * 1000 - 10; + const duration = Math.floor(hap.duration.valueOf() * 1000 - 10); if (note != null) { const midiNumber = typeof note === 'number' ? note : noteToMidi(note); const midiNote = new Note(midiNumber, { attack: velocity, duration });