musicbox/musicbox.js

241 lines
7.2 KiB
JavaScript
Raw Normal View History

2021-01-13 05:24:00 +01:00
async function loadBuffer(ctx, path) {
const response = await fetch(path);
const arrayBuffer = await response.arrayBuffer();
const audioBuffer = await ctx.decodeAudioData(arrayBuffer);
return audioBuffer;
}
function createBufferSource(ctx, buffer) {
let source = ctx.createBufferSource();
source.buffer = buffer;
2022-08-23 23:48:35 +02:00
source.connect(ctx.compressor);
2021-01-13 05:24:00 +01:00
return source;
}
class Piano {
2021-01-13 05:24:00 +01:00
constructor(notes) {
// load 3 octaves of the given notes
this.notes = crossProduct(notes, '345');
this.lowOctave = 'qwertyu';
this.midOctave = 'asdfghj';
this.highOctave = 'zxcvbnm';
}
async init(ctx) {
this.ff = await this.loadNotes(ctx, 'ff', this.notes);
this.mf = await this.loadNotes(ctx, 'mf', this.notes);
}
async loadNotes(ctx, volume, notes) {
return await Promise.all(notes.map(async (note) => {
const path = `samples/piano/${volume}/${note}.mp3`;
const buffer = await loadBuffer(ctx, path);
return createBufferSource(ctx, buffer);
}));
2021-01-13 05:24:00 +01:00
}
parseLine(line) {
return Array.from(line).map(letter => this.getNote(letter));
}
getNote(letter) {
const isCaps = (letter === letter.toUpperCase());
const notes = isCaps ? this.ff : this.mf;
const idx = this.letterToIndex(letter);
return idx === null ? null : notes[idx];
}
letterToIndex(letter) {
letter = letter.toLowerCase();
if (this.lowOctave.includes(letter)) {
return 0 + this.lowOctave.indexOf(letter);
} else if (this.midOctave.includes(letter)) {
return 7 + this.midOctave.indexOf(letter);
} else if (this.highOctave.includes(letter)) {
return 14 + this.highOctave.indexOf(letter);
}
return null;
}
}
class Beats {
2021-01-13 05:24:00 +01:00
cosntructor() {
}
async init(ctx) {
this.alphabet = 'abcdefghijklmnopqrstuvwxyz';
this.beats = await loadBeats(ctx, this.alphabet);
}
parseLine(line) {
return Array.from(line).map(letter => this.getBeat(letter));
}
getBeat(letter) {
const idx = this.alphabet.indexOf(letter.toLowerCase());
return idx >= 0 ? this.beats[idx] : null;
}
}
class Sequencer {
constructor(instrument) {
this.instrument = instrument;
this.sequences = [];
2022-11-09 01:10:48 +01:00
this.input = "";
2021-01-13 05:24:00 +01:00
this.idx = 0;
}
length() {
return this.sequences.map(a => a.length)
2021-01-13 05:24:00 +01:00
.reduce((a, b) => Math.max(a, b), 0);
}
2022-11-09 01:10:48 +01:00
step(syncSequences) {
const longestLength = this.length();
if (longestLength === 0) {
2021-01-13 05:24:00 +01:00
return;
}
2022-11-09 01:10:48 +01:00
this.sequences.map(a => {
let idx;
if (syncSequences) {
idx = this.idx % longestLength;
} else {
idx = this.idx % a.length;
}
return a[idx];
})
2021-01-13 05:24:00 +01:00
.filter(maybeBuf => !!maybeBuf)
.forEach(buf => createBufferSource(buf.context, buf.buffer).start());
2021-01-13 05:24:00 +01:00
this.idx++;
}
update(input) {
2022-11-09 01:10:48 +01:00
this.input = input;
this.sequences = input.split('\n')
.map(line => this.instrument.parseLine(line));
2021-01-13 05:24:00 +01:00
}
2022-11-09 01:10:48 +01:00
render(syncSequences) {
const longestLength = this.length();
return this.input.split('\n')
.map(line => Array.from(line).map((letter, i) => {
let idx;
if (syncSequences) {
idx = this.idx % longestLength;
} else {
idx = this.idx % line.length;
}
let classes = [];
if (i === idx) {
classes.push('active');
}
if (letter === ' ') {
letter = '·';
}
return `<span class=${classes.join('')}>${letter}</span>`
}).join(''))
.map(line => `<p class="line">${line}</p>`)
.join('');
}
2021-01-13 05:24:00 +01:00
}
async function loadBeats(ctx, letters) {
const beats = Array.from(letters);
return await Promise.all(beats.map(async (beat) => {
const buffer = await loadBuffer(ctx, `samples/beats/${beat}.mp3`);
return createBufferSource(ctx, buffer);
}));
}
function setupSequencer(instrument, name) {
const sequencer = new Sequencer(instrument);
const textbox = document.getElementById(name);
sequencer.update(textbox.value);
textbox.addEventListener('input', e => {
sequencer.update(e.target.value);
setHash();
});
return sequencer;
}
function setHash() {
const state = JSON.stringify({
piano: document.getElementById('piano').value,
beats: document.getElementById('beats').value,
2022-11-09 01:10:48 +01:00
syncSequences: document.getElementById('sync-sequences').checked,
});
window.location.hash = btoa(state);
}
function loadHash() {
2021-01-13 05:24:00 +01:00
if (window.location.hash.length > 0) {
const base64 = window.location.hash.slice(1);
try {
const json = JSON.parse(atob(base64));
document.getElementById('piano').value = json.piano;
document.getElementById('beats').value = json.beats;
2022-11-09 01:10:48 +01:00
document.getElementById('sync-sequences').checked = json.syncSequences;
2021-01-13 05:24:00 +01:00
} catch(e) {
console.log(`invalid sequence ${base64}: ${e}`);
}
}
}
function crossProduct(a, b) {
return Array.from(b).flatMap(a_i => Array.from(a).map(b_i => b_i + a_i));
}
2022-11-09 01:10:48 +01:00
function updatePreview(name, sequencer, syncSequences) {
let preview = document.getElementById(name);
let rendered = sequencer.render(syncSequences);
if (preview.innerHTML !== rendered) {
preview.innerHTML = rendered;
}
}
2021-01-13 05:24:00 +01:00
window.addEventListener('load', async () => {
loadHash();
2021-01-13 05:24:00 +01:00
const ctx = new AudioContext();
2022-08-23 23:48:35 +02:00
const compressor = new DynamicsCompressorNode(ctx, {
threshold: -50,
knee: 40,
ratio: 12,
attack: 0,
release: 0.25,
});
compressor.connect(ctx.destination);
ctx.compressor = compressor;
const piano = new Piano('CDEFGAB');
const beats = new Beats();
2021-01-13 05:24:00 +01:00
await piano.init(ctx);
await beats.init(ctx);
2022-08-24 00:01:05 +02:00
document.getElementById('play').innerText = 'play/pause';
const pianoSequencer = setupSequencer(piano, 'piano');
const beatsSequencer = setupSequencer(beats, 'beats');
2022-11-09 01:10:48 +01:00
updatePreview('piano-preview', pianoSequencer);
let syncSequences = document.getElementById('sync-sequences').checked;
updatePreview('beats-preview', beatsSequencer, syncSequences);
2021-01-13 05:24:00 +01:00
2022-08-23 23:48:35 +02:00
let stopped = true;
document.getElementById('play').addEventListener('click', () => {
stopped = !stopped;
});
2022-11-09 01:10:48 +01:00
document.getElementById('sync-sequences').addEventListener('click', (e) => {
syncSequences = e.target.checked;
setHash();
});
2022-08-23 23:48:35 +02:00
const bpm = 240;
2021-01-13 05:24:00 +01:00
const msPerBeat = (1 / bpm) * 60 * 1000;
setInterval(() => {
2022-08-23 23:48:35 +02:00
if (!stopped) {
2022-11-09 01:10:48 +01:00
pianoSequencer.step(syncSequences);
beatsSequencer.step(syncSequences);
updatePreview('piano-preview', pianoSequencer, syncSequences);
updatePreview('beats-preview', beatsSequencer, syncSequences);
2022-08-23 23:48:35 +02:00
}
}, msPerBeat);
2021-01-13 05:24:00 +01:00
});