From 34d07d363e9d875b1d7453376c6cab588bbe3ada Mon Sep 17 00:00:00 2001 From: Will Greenberg Date: Tue, 12 Jan 2021 20:24:00 -0800 Subject: [PATCH] basic functionality w/ static bpm --- README.md | 8 +++ index.html | 13 ++++ musicbox.js | 194 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 215 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 musicbox.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..25d7be6 --- /dev/null +++ b/README.md @@ -0,0 +1,8 @@ +musicbox +======== + +attribution +----------- + +* piano samples come from the [University of Iowa's EMS repository](http://theremin.music.uiowa.edu/MISpiano.html). +* beat samples come from [typedrummer](http://typedrummer.com) diff --git a/index.html b/index.html new file mode 100644 index 0000000..6ddc417 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + + diff --git a/musicbox.js b/musicbox.js new file mode 100644 index 0000000..49c5bc1 --- /dev/null +++ b/musicbox.js @@ -0,0 +1,194 @@ +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; + source.connect(ctx.destination); + return source; +} + +class PianoSequencer { + constructor(notes) { + // load 3 octaves of the given notes + this.notes = crossProduct(notes, '345'); + this.input = ''; + this.lowOctave = 'qwertyu'; + this.midOctave = 'asdfghj'; + this.highOctave = 'zxcvbnm'; + } + + async init(ctx) { + this.ff = await loadNotes(ctx, 'ff', this.notes); + this.mf = await loadNotes(ctx, 'mf', this.notes); + } + + 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 BeatSequencer { + cosntructor() { + this.input = ''; + } + + 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(piano, beats) { + this.piano = piano; + this.beats = beats; + this.pianoSequences = []; + this.beatsSequences = []; + this.idx = 0; + } + + toBase64() { + const json = JSON.stringify({ + piano: this.piano.input, + beats: this.beats.input, + }); + return btoa(json); + } + + buildSequence(instrument, input) { + instrument.input = input; + return input.split('\n').map(line => instrument.parseLine(line)); + } + + length() { + return this.pianoSequences.map(a => a.length) + .concat(this.beatsSequences.map(a => a.length)) + .reduce((a, b) => Math.max(a, b), 0); + } + + play() { + const length = this.length(); + if (length === 0) { + console.log('empty'); + return; + } + + if (this.idx >= length) { + this.idx = 0; + } + + this.pianoSequences.map(a => a[this.idx]) + .concat(this.beatsSequences.map(a => a[this.idx])) + .filter(maybeBuf => !!maybeBuf) + .forEach(buf => cloneBuf(buf).start()); + this.idx++; + } + + updatePiano(input) { + this.pianoSequences = this.buildSequence(this.piano, input); + console.log(this.pianoSequences); + } + + updateBeats(input) { + this.beatsSequences = this.buildSequence(this.beats, input); + console.log(this.beatsSequences); + } +} + +async function loadNotes(ctx, volume, notes) { + return await Promise.all(notes.map(async (note) => { + const buffer = await loadBuffer(ctx, `samples/piano/${volume}/${note}.mp3`); + return createBufferSource(ctx, buffer); + })); +} + +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(piano, beats) { + const sequencer = new Sequencer(piano, beats); + const pianoTextbox = document.getElementById('piano'); + const beatsTextbox = document.getElementById('beats'); + if (window.location.hash.length > 0) { + const base64 = window.location.hash.slice(1); + try { + const json = JSON.parse(atob(base64)); + pianoTextbox.value = json.piano; + beatsTextbox.value = json.beats; + } catch(e) { + console.log(`invalid sequence ${base64}: ${e}`); + } + } + sequencer.updatePiano(pianoTextbox.value); + sequencer.updateBeats(beatsTextbox.value); + pianoTextbox.addEventListener('input', e => { + sequencer.updatePiano(e.target.value); + window.location.hash = sequencer.toBase64(); + }); + beatsTextbox.addEventListener('input', e => { + sequencer.updateBeats(e.target.value); + window.location.hash = sequencer.toBase64(); + }); + return sequencer; +} + +function cloneBuf(note) { + return createBufferSource(note.context, note.buffer); +} + +function crossProduct(a, b) { + return Array.from(b).flatMap(a_i => Array.from(a).map(b_i => b_i + a_i)); +} + +window.addEventListener('load', async () => { + const ctx = new AudioContext(); + const piano = new PianoSequencer('CDEFGAB'); + const beats = new BeatSequencer(); + console.log('loading...'); + await piano.init(ctx); + await beats.init(ctx); + console.log('done'); + const sequencer = setupSequencer(piano, beats); + + const bpm = 120; + const msPerBeat = (1 / bpm) * 60 * 1000; + setInterval(() => sequencer.play(), msPerBeat); +});