const MIN_NOTE = 48;
const MAX_NOTE = 84;
const DEFAULT_BPM = 120;
const MAX_MIDI_BPM = 240;
const TEMPO_MIDI_CONTROLLER = 20; // Control changes for tempo for this controller id
let Tone = mm.Player.tone;
let temperature = 1.1;
let patternLength = 8;
// Using the Improv RNN pretrained model from https://github.com/tensorflow/magenta/tree/master/magenta/models/improv_rnn
let rnn = new mm.MusicRNN(
'https://storage.googleapis.com/download.magenta.tensorflow.org/tfjs_checkpoints/music_rnn/chord_pitches_improv'
);
let masterGain = new Tone.Gain(0.6).toMaster();
let reverb = new Tone.Convolver(
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/hm2_000_ortf_48k.mp3'
).connect(masterGain);
reverb.wet.value = 0.1;
let echo = new Tone.FeedbackDelay('8n.', 0.4).connect(
new Tone.Gain(0.5).connect(reverb)
);
let lowPass = new Tone.Filter(5000).connect(echo).connect(reverb);
new Tone.LFO('8m', 3000, 5000).connect(lowPass.frequency).start();
let sampler = new Tone.Sampler({
C3: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/s11-c3.wav',
'D#3': 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/s11-ds3.wav',
'F#3': 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/s11-fs3.wav',
A3: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/s11-a3.wav',
C4: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/s11-c4.wav',
'D#4': 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/s11-ds4.wav',
'F#4': 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/s11-fs4.wav',
A4: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/s11-a4.wav',
C5: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/s11-c5.wav',
'D#5': 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/s11-ds5.wav',
'F#5': 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/s11-fs5.wav',
A5: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/s11-a5.wav'
}).connect(lowPass);
sampler.release.value = 2;
let builtInKeyboard = new AudioKeys({ rows: 2 });
let onScreenKeyboardContainer = document.querySelector('.keyboard');
let onScreenKeyboard = buildKeyboard(onScreenKeyboardContainer);
let machinePlayer = buildKeyboard(
document.querySelector('.machine-bg .player')
);
let humanPlayer = buildKeyboard(document.querySelector('.human-bg .player'));
let currentSeed = [];
let stopCurrentSequenceGenerator;
let synthFilter = new Tone.Filter(300, 'lowpass').connect(
new Tone.Gain(0.4).connect(masterGain)
);
let synthConfig = {
oscillator: { type: 'fattriangle' },
envelope: { attack: 3, sustain: 1, release: 1 }
};
let pulsePattern = true;
let synthsPlaying = {};
let currentPlayFn;
let tick = 0;
let outputs = {
internal: {
play: (note, velocity, time, hold = false) => {
let freq = Tone.Frequency(note, 'midi');
if (hold) {
if (!synthsPlaying[note]) {
let synth = new Tone.Synth(synthConfig).connect(synthFilter);
synthsPlaying[note] = synth;
synth.triggerAttack(freq, time, velocity);
}
} else {
sampler.triggerAttack(freq, time);
}
},
stop: (note, time) => {
if (synthsPlaying[note]) {
let synth = synthsPlaying[note];
synth.triggerRelease(time);
setTimeout(() => synth.dispose(), 2000);
synthsPlaying[note] = null;
}
}
}
};
let activeOutput = 'internal';
function isAccidental(note) {
let pc = note % 12;
return pc === 1 || pc === 3 || pc === 6 || pc === 8 || pc === 10;
}
function buildKeyboard(container) {
let nAccidentals = _.range(MIN_NOTE, MAX_NOTE + 1).filter(isAccidental)
.length;
let keyWidthPercent = 100 / (MAX_NOTE - MIN_NOTE - nAccidentals + 1);
let keyInnerWidthPercent =
100 / (MAX_NOTE - MIN_NOTE - nAccidentals + 1) - 0.5;
let gapPercent = keyWidthPercent - keyInnerWidthPercent;
let accumulatedWidth = 0;
return _.range(MIN_NOTE, MAX_NOTE + 1).map(note => {
let accidental = isAccidental(note);
let key = document.createElement('div');
key.classList.add('key');
if (accidental) {
key.classList.add('accidental');
key.style.left = `${accumulatedWidth -
gapPercent -
(keyWidthPercent / 2 - gapPercent) / 2}%`;
key.style.width = `${keyWidthPercent / 2}%`;
} else {
key.style.left = `${accumulatedWidth}%`;
key.style.width = `${keyInnerWidthPercent}%`;
}
container.appendChild(key);
if (!accidental) accumulatedWidth += keyWidthPercent;
return key;
});
}
function detectChord(notes) {
notes = notes.map(n => Tonal.Note.pc(Tonal.Note.fromMidi(n.note))).sort();
return Tonal.PcSet.modes(notes)
.map((mode, i) => {
const tonic = Tonal.Note.name(notes[i]);
const names = Tonal.Dictionary.chord.names(mode);
return names.length ? tonic + names[0] : null;
})
.filter(x => x);
}
function buildNoteSequence(seed) {
let step = 0;
let delayProb = pulsePattern ? 0 : 0.3;
let notes = seed.map(n => {
let dur = 1 + (Math.random() < delayProb ? 1 : 0);
let note = {
pitch: n.note,
quantizedStartStep: step,
quantizedEndStep: step + dur
};
step += dur;
return note;
});
return {
totalQuantizedSteps: _.last(notes).quantizedEndStep,
quantizationInfo: {
stepsPerQuarter: 1
},
notes
};
}
function seqToTickArray(seq) {
return _.flatMap(seq.notes, n =>
[n.pitch].concat(
pulsePattern
? []
: _.times(n.quantizedEndStep - n.quantizedStartStep - 1, () => null)
)
);
}
function doTick(time = Tone.now() - Tone.context.lookAhead) {
applyHumanKeyChanges(time);
if (currentPlayFn) currentPlayFn(time);
}
function startSequenceGenerator(seed) {
let running = true,
thisPatternLength = patternLength;
let chords = detectChord(seed);
let chord =
_.first(chords) ||
Tonal.Note.pc(Tonal.Note.fromMidi(_.first(seed).note)) + 'M';
let seedSeq = buildNoteSequence(seed);
let generatedSequence = seqToTickArray(seedSeq);
let playIntervalTime = Tone.Time('8n').toSeconds();
let generationIntervalTime = playIntervalTime / 2;
function generateNext() {
if (!running) return;
if (generatedSequence.length < thisPatternLength) {
rnn.continueSequence(seedSeq, 20, temperature, [chord]).then(genSeq => {
generatedSequence = generatedSequence.concat(seqToTickArray(genSeq));
setTimeout(generateNext, generationIntervalTime * 1000);
});
}
}
tick = 0;
currentPlayFn = function playNext(time) {
let tickInSeq = tick % thisPatternLength;
if (tickInSeq < generatedSequence.length) {
let note = generatedSequence[tickInSeq];
if (note) machineKeyDown(note, time);
}
tick++;
};
setTimeout(generateNext, 0);
return () => {
running = false;
currentPlayFn = null;
};
}
function updateChord({ add = [], remove = [] }) {
for (let note of add) {
currentSeed.push({ note, time: Tone.now() });
}
for (let note of remove) {
_.remove(currentSeed, { note });
}
if (stopCurrentSequenceGenerator) {
stopCurrentSequenceGenerator();
stopCurrentSequenceGenerator = null;
}
if (currentSeed.length) {
stopCurrentSequenceGenerator = startSequenceGenerator(
_.cloneDeep(currentSeed)
);
}
}
let humanKeyAdds = [],
humanKeyRemovals = [];
function humanKeyDown(note, velocity = 0.7) {
if (note < MIN_NOTE || note > MAX_NOTE) return;
humanKeyAdds.push({ note, velocity });
}
function humanKeyUp(note) {
if (note < MIN_NOTE || note > MAX_NOTE) return;
humanKeyRemovals.push({ note });
}
function applyHumanKeyChanges(time = Tone.now()) {
if (humanKeyAdds.length == 0 && humanKeyRemovals.length == 0) return;
for (let { note, velocity } of humanKeyAdds) {
outputs[activeOutput].play(note, velocity, time, true);
humanPlayer[note - MIN_NOTE].classList.add('down');
animatePlay(onScreenKeyboard[note - MIN_NOTE], note, true);
}
for (let { note } of humanKeyRemovals) {
outputs[activeOutput].stop(note, time);
humanPlayer[note - MIN_NOTE].classList.remove('down');
}
updateChord({
add: humanKeyAdds.map(n => n.note),
remove: humanKeyRemovals.map(n => n.note)
});
humanKeyAdds.length = 0;
humanKeyRemovals.length = 0;
}
function machineKeyDown(note, time) {
if (note < MIN_NOTE || note > MAX_NOTE) return;
outputs[activeOutput].play(note, 0.7, time);
animatePlay(onScreenKeyboard[note - MIN_NOTE], note, false);
animateMachine(machinePlayer[note - MIN_NOTE]);
}
function animatePlay(keyEl, note, isHuman) {
let sourceColor = isHuman ? '#1E88E5' : '#E91E63';
let targetColor = isAccidental(note) ? 'black' : 'white';
keyEl.animate(
[{ backgroundColor: sourceColor }, { backgroundColor: targetColor }],
{ duration: 700, easing: 'ease-out' }
);
}
function animateMachine(keyEl) {
keyEl.animate([{ opacity: 0.9 }, { opacity: 0 }], {
duration: Tone.Time('2n').toMilliseconds(),
easing: 'ease-out'
});
}
// Computer keyboard controls
builtInKeyboard.down(note => {
humanKeyDown(note.note);
hideUI();
});
builtInKeyboard.up(note => humanKeyUp(note.note));
// MIDI Controls
WebMidi.enable(err => {
if (err) {
console.error('WebMidi could not be enabled', err);
return;
}
document.querySelector('.midi-not-supported').style.display = 'none';
let withInputsMsg = document.querySelector('.midi-supported-with-inputs');
let noInputsMsg = document.querySelector('.midi-supported-no-inputs');
let inputSelector = document.querySelector('#midi-inputs');
let outputSelector = document.querySelector('#outputs');
let clockInputSelector = document.querySelector('#midi-clock-inputs');
let clockOutputSelector = document.querySelector('#midi-clock-outputs');
let activeInput,
activeClockInputId,
activeClockOutputId,
transportTickerId,
clockOutputTickerId,
midiTickCount,
lastBeatAt;
function onInputsChange() {
if (WebMidi.inputs.length === 0) {
withInputsMsg.style.display = 'none';
noInputsMsg.style.display = 'block';
onActiveInputChange(null);
} else {
noInputsMsg.style.display = 'none';
withInputsMsg.style.display = 'block';
while (inputSelector.firstChild) {
inputSelector.firstChild.remove();
}
for (let input of WebMidi.inputs) {
let option = document.createElement('option');
option.value = input.id;
option.innerText = input.name;
inputSelector.appendChild(option);
}
onActiveInputChange(WebMidi.inputs[0].id);
}
}
function onOutputsChange() {
while (outputSelector.firstChild) {
outputSelector.firstChild.remove();
}
let internalOption = document.createElement('option');
internalOption.value = 'internal';
internalOption.innerText = 'Internal synth';
outputSelector.appendChild(internalOption);
for (let output of WebMidi.outputs) {
let option = document.createElement('option');
option.value = output.id;
option.innerText = output.name;
outputSelector.appendChild(option);
}
onActiveOutputChange('internal');
}
function onClockInputsChange() {
if (WebMidi.inputs.length === 0) {
onActiveClockInputChange('none');
} else {
while (clockInputSelector.firstChild) {
clockInputSelector.firstChild.remove();
}
let option = document.createElement('option');
option.value = 'none';
option.innerText = 'None (internal clock)';
clockInputSelector.appendChild(option);
for (let input of WebMidi.inputs) {
option = document.createElement('option');
option.value = input.id;
option.innerText = input.name;
clockInputSelector.appendChild(option);
}
onActiveClockInputChange('none');
}
}
function onClockOutputsChange() {
while (clockOutputSelector.firstChild) {
clockOutputSelector.firstChild.remove();
}
let noneOption = document.createElement('option');
noneOption.value = 'none';
noneOption.innerText = 'Not sending';
clockOutputSelector.appendChild(noneOption);
for (let output of WebMidi.outputs) {
let option = document.createElement('option');
option.value = output.id;
option.innerText = output.name;
clockOutputSelector.appendChild(option);
}
onActiveClockOutputChange('none');
}
function onActiveInputChange(id) {
if (activeInput) {
activeInput.removeListener();
}
let input = WebMidi.getInputById(id);
if (input) {
input.addListener('noteon', 1, e => {
humanKeyDown(e.note.number, e.velocity);
hideUI();
});
input.addListener('controlchange', 1, e => {
if (e.controller.number === TEMPO_MIDI_CONTROLLER) {
Tone.Transport.bpm.value = (e.value / 128) * MAX_MIDI_BPM;
echo.delayTime.value = Tone.Time('8n.').toSeconds();
}
});
input.addListener('noteoff', 1, e => humanKeyUp(e.note.number));
for (let option of Array.from(inputSelector.children)) {
option.selected = option.value === id;
}
activeInput = input;
}
}
function onActiveOutputChange(id) {
if (activeOutput !== 'internal') {
outputs[activeOutput] = null;
}
activeOutput = id;
if (activeOutput !== 'internal') {
let output = WebMidi.getOutputById(id);
outputs[id] = {
play: (note, velocity = 1, time, hold = false) => {
if (!hold) {
let delay = (time - Tone.now()) * 1000;
let duration = Tone.Time('16n').toMilliseconds();
output.playNote(note, 'all', {
time: delay > 0 ? `+${delay}` : WebMidi.now,
velocity,
duration
});
}
},
stop: (note, time) => {
let delay = (time - Tone.now()) * 1000;
output.stopNote(note, 2, {
time: delay > 0 ? `+${delay}` : WebMidi.now
});
}
};
}
for (let option of Array.from(outputSelector.children)) {
option.selected = option.value === id;
}
}
function startClockOutput() {
let output = WebMidi.getOutputById(activeClockOutputId);
clockOutputTickerId = Tone.Transport.scheduleRepeat(time => {
let startDelay = time - Tone.context.currentTime;
let quarter = Tone.Time('4n').toSeconds();
for (let i = 0; i < 24; i++) {
let tickDelay = startDelay + (quarter / 24) * i;
output.sendClock({ time: `+${tickDelay * 1000}` });
}
}, '4n');
}
function stopClockOutput() {
Tone.Transport.clear(clockOutputTickerId);
}
function onActiveClockOutputChange(id) {
if (activeClockOutputId !== 'none') {
stopClockOutput();
}
activeClockOutputId = id;
if (activeClockOutputId !== 'none') {
startClockOutput();
}
for (let option of Array.from(clockOutputSelector.children)) {
option.selected = option.value === id;
}
}
function incomingMidiClockStart() {
midiTickCount = 0;
tick = 0;
}
function incomingMidiClockStop() {
midiTickCount = 0;
applyHumanKeyChanges();
}
function incomingMidiClockTick(evt) {
if (midiTickCount % 24 === 0) {
if (lastBeatAt) {
let beatDur = evt.timestamp - lastBeatAt;
Tone.Transport.bpm.value = Math.round(60000 / beatDur);
// Not sure why this doesn't sync through the BPM automatically. But it doesn't.
echo.delayTime.value = Tone.Time('8n.').toSeconds();
}
lastBeatAt = evt.timestamp;
}
if (midiTickCount % 12 === 0) {
doTick();
}
midiTickCount++;
}
function onActiveClockInputChange(id) {
if (activeClockInputId === 'none') {
Tone.Transport.clear(transportTickerId);
transportTickerId = null;
} else if (activeClockInputId) {
let input = WebMidi.getInputById(activeClockInputId);
input.removeListener('start', 'all', incomingMidiClockStart);
input.removeListener('stop', 'all', incomingMidiClockStop);
input.removeListener('clock', 'all', incomingMidiClockTick);
}
activeClockInputId = id;
if (activeClockInputId === 'none') {
transportTickerId = Tone.Transport.scheduleRepeat(doTick, '8n');
Tone.Transport.bpm.value = DEFAULT_BPM;
echo.delayTime.value = Tone.Time('8n.').toSeconds();
} else {
let input = WebMidi.getInputById(id);
input.addListener('start', 'all', incomingMidiClockStart);
input.addListener('stop', 'all', incomingMidiClockStop);
input.addListener('clock', 'all', incomingMidiClockTick);
midiTickCount = 0;
}
for (let option of Array.from(clockInputSelector.children)) {
option.selected = option.value === id;
}
}
onInputsChange();
onOutputsChange();
onClockInputsChange();
onClockOutputsChange();
WebMidi.addListener(
'connected',
() => (
onInputsChange(),
onOutputsChange(),
onClockInputsChange(),
onClockOutputsChange()
)
);
WebMidi.addListener(
'disconnected',
() => (
onInputsChange(),
onOutputsChange(),
onClockInputsChange(),
onClockOutputsChange()
)
);
inputSelector.addEventListener('change', evt =>
onActiveInputChange(evt.target.value)
);
outputSelector.addEventListener('change', evt =>
onActiveOutputChange(evt.target.value)
);
clockInputSelector.addEventListener('change', evt =>
onActiveClockInputChange(evt.target.value)
);
clockOutputSelector.addEventListener('change', evt =>
onActiveClockOutputChange(evt.target.value)
);
});
// Mouse & touch Controls
let pointedNotes = new Set();
function updateTouchedNotes(evt) {
let touchedNotes = new Set();
for (let touch of Array.from(evt.touches)) {
let element = document.elementFromPoint(touch.clientX, touch.clientY);
let keyIndex = onScreenKeyboard.indexOf(element);
if (keyIndex >= 0) {
touchedNotes.add(MIN_NOTE + keyIndex);
if (!evt.defaultPrevented) {
evt.preventDefault();
}
}
}
for (let note of pointedNotes) {
if (!touchedNotes.has(note)) {
humanKeyUp(note);
pointedNotes.delete(note);
}
}
for (let note of touchedNotes) {
if (!pointedNotes.has(note)) {
humanKeyDown(note);
pointedNotes.add(note);
}
}
}
onScreenKeyboard.forEach((noteEl, index) => {
noteEl.addEventListener('mousedown', evt => {
humanKeyDown(MIN_NOTE + index);
pointedNotes.add(MIN_NOTE + index);
evt.preventDefault();
});
noteEl.addEventListener('mouseover', () => {
if (pointedNotes.size && !pointedNotes.has(MIN_NOTE + index)) {
humanKeyDown(MIN_NOTE + index);
pointedNotes.add(MIN_NOTE + index);
}
});
});
document.documentElement.addEventListener('mouseup', () => {
pointedNotes.forEach(n => humanKeyUp(n));
pointedNotes.clear();
});
document.documentElement.addEventListener('touchstart', updateTouchedNotes);
document.documentElement.addEventListener('touchmove', updateTouchedNotes);
document.documentElement.addEventListener('touchend', updateTouchedNotes);
// Temperature control
let tempSlider = new mdc.slider.MDCSlider(
document.querySelector('#temperature')
);
tempSlider.listen('MDCSlider:change', () => (temperature = tempSlider.value));
document
.querySelector('#pattern-length')
.addEventListener('change', evt => (patternLength = evt.target.value));
// Pulse pattern switch
let pulsePatternControl = new mdc.switchControl.MDCSwitch(
document.querySelector('.mdc-switch')
);
document
.querySelector('#pulse-switch')
.addEventListener('change', evt => (pulsePattern = evt.target.checked));
// Controls hiding
let container = document.querySelector('.container');
function hideUI() {
container.classList.add('ui-hidden');
}
let scheduleHideUI = _.debounce(hideUI, 5000);
container.addEventListener('mousemove', () => {
container.classList.remove('ui-hidden');
scheduleHideUI();
});
container.addEventListener('touchstart', () => {
container.classList.remove('ui-hidden');
scheduleHideUI();
});
// Startup
function generateDummySequence() {
// Generate a throwaway sequence to get the RNN loaded so it doesn't
// cause jank later.
return rnn.continueSequence(
buildNoteSequence([{ note: 60, time: Tone.now() }]),
20,
temperature,
['Cm']
);
}
let bufferLoadPromise = new Promise(res => Tone.Buffer.on('load', res));
Promise.all([bufferLoadPromise, rnn.initialize()])
.then(generateDummySequence)
.then(() => {
Tone.Transport.start();
Tone.Transport.bpm.value = DEFAULT_BPM;
onScreenKeyboardContainer.classList.add('loaded');
document.querySelector('.loading').remove();
});
StartAudioContext(Tone.context, document.documentElement);
View Compiled
