web audio band - playing with a band in your browser

WEB AUDIO BAND

@shiota 2013

OH HAI!slideshare.net/eshiotagithub.com/eshiota

@shiota

RETROJS

I started playing with Web Audio API after watching a presentation by @almirfilho about it. My challenge: play the Super Mario Bros theme using JavaScript only.

Web Audio APIoscillators

// Vendor prefixedvar context = new webkitAudioContext();

context.createOscillator() context.destination

connect()

var oscillator = context.createOscillator();

oscillator.connect(context.destination);

frequência

duração

A note, crudely speaking, is a frequency played for a certain duration.

oscillator.frequency.value = 780;

oscillator.start(0);oscillator.stop(context.currentTime + 0.5);

Live coding

RETROJS

Demo (RetroJS) - http://eshiota.github.io/retro-audio-js/

Demo (RetroJS - Mario Theme)

{ "title" : "Super Mario Bros Theme", "tempo" : 200, "time_signature" : "4/4", "score" : [ { "instrument" : "oscillator-square", "volume" : 0.5, "sheet" : [ ["E5.8", "F#4.8"], ["E5.8", "F#4.8"], "-.8" , ["E5.8", "F#4.8"], "-.8" , ["C5.8", "F#4.8"], ["E5.8", "F#4.8"], "-.8", ["G5.8", "B4.8", "G4.8"], "-.8", "-.4" , "G4.8", "-.8", "-.4",

["C5.8", "E4.8"], "-.4" , ["G4.8", "C4.8"], "-.4" , ["E4.8", "G3.8"], "-.4" , ["A4.8", "C4.8"], "-.8", ["B.8", "D4.8"] , "-.8", ["Bb4.8", "Db4.8"], ["A4.8", "C4.8"], "-.8", ["G4.4T3", "C4.4T3"], ["E5.4T3", "G4.4T3"], ["G5.4T3", "B4.4T3"], ["A5.8", "C5.8"], "-.8", ["F5.8", "A4.8"], ["G5.8", "B4.8"], "-.8", ["E5.8", "G4.8"], "-.8", ["C5.8", "E4.8"], ["D5.8", "F4.8"], ["B4.8", "D4.8"], "-.4", ["C5.8", "E4.8"], "-.4" , ["G4.8", "C4.8"], "-.4" , ["E4.8", "G3.8"], "-.4" , ["A4.8", "C4.8"], "-.8", ["B.8", "D4.8"] , "-.8", ["Bb4.8", "Db4.8"], ["A4.8", "C4.8"], "-.8", ["G4.4T3", "C4.4T3"], ["E5.4T3", "G4.4T3"], ["G5.4T3", "B4.4T3"], ["A5.8", "C5.8"], "-.8", ["F5.8", "A4.8"], ["G5.8", "B4.8"], "-.8", ["E5.8", "G4.8"], "-.8", ["C5.8", "E4.8"], ["D5.8", "F4.8"], ["B4.8", "D4.8"], "-.2",

["G5.8", "E5.8"], ["Gb5.8", "Eb5.8"], ["F5.8", "D5.8"], ["D#5.8", "B4.8"], "-.8", ["E5.8", "C5.8"], "-.8", ["G#4.8", "D4.8"], ["A4.8", "E4.8"], ["C5.8", "G4.8"], "-.8", ["A4.8", "C4.8"], ["C5.8", "E4.8"], ["D5.8", "F4.8"], "-.4", ["G5.8", "E5.8"], ["Gb5.8", "Eb5.8"], ["F5.8", "D5.8"], ["D#5.8", "B4.8"], "-.8", ["E5.8", "C5.8"], "-.8", ["C6.8", "G5.8"], "-.8", ["C6.8", "G5.8"], ["C6.8", "G5.8"], "-.8", "-.4", "-.4", ["G5.8", "E5.8"], ["Gb5.8", "Eb5.8"], ["F5.8", "D5.8"], ["D#5.8", "B4.8"], "-.8", ["E5.8", "C5.8"], "-.8", ["G#4.8", "D4.8"], ["A4.8", "E4.8"], ["C5.8", "G4.8"], "-.8", ["A4.8", "C4.8"], ["C5.8", "E4.8"], ["D5.8", "F4.8"], "-.4", ["Eb5.8", "Ab4.8"], "-.4", ["D5.8", "F4.8"], "-.4", ["C5.8", "E4.8"], "-.8", "-.4", "-.2", "-.4",

["G5.8", "E5.8"], ["Gb5.8", "Eb5.8"], ["F5.8", "D5.8"], ["D#5.8", "B4.8"], "-.8", ["E5.8", "C5.8"], "-.8", ["G#4.8", "D4.8"], ["A4.8", "E4.8"], ["C5.8", "G4.8"], "-.8", ["A4.8", "C4.8"], ["C5.8", "E4.8"], ["D5.8", "F4.8"], "-.4", ["G5.8", "E5.8"], ["Gb5.8", "Eb5.8"], ["F5.8", "D5.8"], ["D#5.8", "B4.8"], "-.8", ["E5.8", "C5.8"], "-.8", ["C6.8", "G5.8"], "-.8", ["C6.8", "G5.8"], ["C6.8", "G5.8"], "-.8", "-.4", "-.4", ["G5.8", "E5.8"], ["Gb5.8", "Eb5.8"], ["F5.8", "D5.8"], ["D#5.8", "B4.8"], "-.8", ["E5.8", "C5.8"], "-.8", ["G#4.8", "D4.8"], ["A4.8", "E4.8"], ["C5.8", "G4.8"], "-.8", ["A4.8", "C4.8"], ["C5.8", "E4.8"], ["D5.8", "F4.8"], "-.4", ["Eb5.8", "Ab4.8"], "-.4", ["D5.8", "F4.8"], "-.4", ["C5.8", "E4.8"], "-.8", "-.4", "-.2",

["Ab4.8", "C5.8"], ["Ab4.8", "C5.8"], "-.8", ["Ab4.8", "C5.8"], "-.8", ["Ab4.8", "C5.8"], ["Bb4.8", "D5.8"], "-.8", ["G4.8", "E5.8"], ["C5.8", "E4.8"], "-.8", ["A4.8", "E4.8"], ["G4.8", "C4.8"], "-.8", "-.4", ["Ab4.8", "C5.8"], ["Ab4.8", "C5.8"], "-.8", ["Ab4.8", "C5.8"], "-.8", ["Ab4.8", "C5.8"], ["Bb4.8", "D5.8"], ["G4.8", "E5.8"], "-.2", "-.2", ["Ab4.8", "C5.8"], ["Ab4.8", "C5.8"], "-.8", ["Ab4.8", "C5.8"], "-.8", ["Ab4.8", "C5.8"], ["Bb4.8", "D5.8"], "-.8", ["G4.8", "E5.8"], ["C5.8", "E4.8"], "-.8", ["A4.8", "E4.8"], ["G4.8", "C4.8"], "-.8", "-.4",

["E5.8", "F#4.8"], ["E5.8", "F#4.8"], "-.8" , ["E5.8", "F#4.8"], "-.8" , ["C5.8", "F#4.8"], ["E5.8", "F#4.8"], "-.8", ["G5.8", "B4.8", "G4.8"], "-.8", "-.4" , "G4.8", "-.8", "-.4",

["C5.8", "E4.8"], "-.4" , ["G4.8", "C4.8"], "-.4" , ["E4.8", "G3.8"], "-.4" , ["A4.8", "C4.8"], "-.8", ["B.8", "D4.8"] , "-.8", ["Bb4.8", "Db4.8"], ["A4.8", "C4.8"], "-.8", ["G4.4T3", "C4.4T3"], ["E5.4T3", "G4.4T3"], ["G5.4T3", "B4.4T3"], ["A5.8", "C5.8"], "-.8", ["F5.8", "A4.8"], ["G5.8", "B4.8"], "-.8", ["E5.8", "G4.8"], "-.8", ["C5.8", "E4.8"], ["D5.8", "F4.8"], ["B4.8", "D4.8"], "-.4", ["C5.8", "E4.8"], "-.4" , ["G4.8", "C4.8"], "-.4" , ["E4.8", "G3.8"], "-.4" , ["A4.8", "C4.8"], "-.8", ["B.8", "D4.8"] , "-.8", ["Bb4.8", "Db4.8"], ["A4.8", "C4.8"], "-.8", ["G4.4T3", "C4.4T3"], ["E5.4T3", "G4.4T3"], ["G5.4T3", "B4.4T3"], ["A5.8", "C5.8"], "-.8", ["F5.8", "A4.8"], ["G5.8", "B4.8"], "-.8", ["E5.8", "G4.8"], "-.8", ["C5.8", "E4.8"], ["D5.8", "F4.8"], ["B4.8", "D4.8"], "-.4",

["E5.8", "C5.8"], ["C5.8", "A4.8"], "-.8", ["G4.8", "E4.8"], "-.4", ["G#4.8", "E4.8"], "-.8", ["A4.8", "F4.8"], ["C5.8", "F5.8"], "-.8", ["C5.8", "F5.8"], ["A4.8", "F4.8"], "-.8", "-.4", ["B4.4T3", "G4.4T3"], ["F5.4T3", "A5.4T3"], ["F5.4T3", "A5.4T3"], ["F5.4T3", "A5.4T3"], ["E5.4T3", "G5.4T3"], ["D5.4T3", "F5.4T3"], ["E5.8", "C5.8"], ["C5.8", "A4.8"], "-.8", ["A4.8", "F4.8"], ["G4.8", "E4.8"], "-.8", "-.4", ["E5.8", "C5.8"], ["C5.8", "A4.8"], "-.8", ["G4.8", "E4.8"], "-.4", ["G#4.8", "E4.8"], "-.8", ["A4.8", "F4.8"], ["C5.8", "F5.8"], "-.8", ["C5.8", "F5.8"], ["A4.8", "F4.8"], "-.8", "-.4", ["G4.8", "B4.8"], ["D5.8", "F5.8"], "-.8", ["D5.8", "F5.8"], ["D5.4T3", "F5.4T3"], ["C5.4T3", "E5.4T3"], ["B4.4T3", "D5.4T3"], ["G4.8", "C5.8"], "E4.8", "-.8", "E4.8", "C4.8", "-.8", "-.4",

["Ab4.8", "C5.8"], ["Ab4.8", "C5.8"], "-.8", ["Ab4.8", "C5.8"], "-.8", ["Ab4.8", "C5.8"], ["Bb4.8", "D5.8"], "-.8", ["G4.8", "E5.8"], ["C5.8", "E4.8"], "-.8", ["A4.8", "E4.8"], ["G4.8", "C4.8"], "-.8", "-.4", ["Ab4.8", "C5.8"], ["Ab4.8", "C5.8"], "-.8", ["Ab4.8", "C5.8"], "-.8", ["Ab4.8", "C5.8"], ["Bb4.8", "D5.8"], ["G4.8", "E5.8"], "-.2", "-.2", ["Ab4.8", "C5.8"], ["Ab4.8", "C5.8"], "-.8", ["Ab4.8", "C5.8"], "-.8", ["Ab4.8", "C5.8"], ["Bb4.8", "D5.8"], "-.8", ["G4.8", "E5.8"], ["C5.8", "E4.8"], "-.8", ["A4.8", "E4.8"], ["G4.8", "C4.8"], "-.8", "-.4",

["E5.8", "F#4.8"], ["E5.8", "F#4.8"], "-.8" , ["E5.8", "F#4.8"], "-.8" , ["C5.8", "F#4.8"], ["E5.8", "F#4.8"], "-.8", ["G5.8", "B4.8", "G4.8"], "-.8", "-.4" , "G4.8", "-.8", "-.4",

["E5.8", "C5.8"], ["C5.8", "A4.8"], "-.8", ["G4.8", "E4.8"], "-.4", ["G#4.8", "E4.8"], "-.8", ["A4.8", "F4.8"], ["C5.8", "F5.8"], "-.8", ["C5.8", "F5.8"], ["A4.8", "F4.8"], "-.8", "-.4", ["B4.4T3", "G4.4T3"], ["F5.4T3", "A5.4T3"], ["F5.4T3", "A5.4T3"], ["F5.4T3", "A5.4T3"], ["E5.4T3", "G5.4T3"], ["D5.4T3", "F5.4T3"], ["E5.8", "C5.8"], ["C5.8", "A4.8"], "-.8", ["A4.8", "F4.8"], ["G4.8", "E4.8"], "-.8", "-.4", ["E5.8", "C5.8"], ["C5.8", "A4.8"], "-.8", ["G4.8", "E4.8"], "-.4", ["G#4.8", "E4.8"], "-.8", ["A4.8", "F4.8"], ["C5.8", "F5.8"], "-.8", ["C5.8", "F5.8"], ["A4.8", "F4.8"], "-.8", "-.4", ["G4.8", "B4.8"], ["D5.8", "F5.8"], "-.8", ["D5.8", "F5.8"], ["D5.4T3", "F5.4T3"], ["C5.4T3", "E5.4T3"], ["B4.4T3", "D5.4T3"], ["G4.8", "C5.8"], "E4.8", "-.8", "E4.8", "C4.8", "-.8", "-.4",

["E5.8", "C5.8"], ["C5.8", "A4.8"], "-.8", ["G4.8", "E4.8"], "-.4", ["G#4.8", "E4.8"], "-.8", ["A4.8", "F4.8"], ["C5.8", "F5.8"], "-.8", ["C5.8", "F5.8"], ["A4.8", "F4.8"], "-.8", "-.4", ["B4.4T3", "G4.4T3"], ["F5.4T3", "A5.4T3"], ["F5.4T3", "A5.4T3"], ["F5.4T3", "A5.4T3"], ["E5.4T3", "G5.4T3"], ["D5.4T3", "F5.4T3"], ["E5.8", "C5.8"], ["C5.8", "A4.8"], "-.8", ["A4.8", "F4.8"], ["G4.8", "E4.8"], "-.8", "-.4", ["E5.8", "C5.8"], ["C5.8", "A4.8"], "-.8", ["G4.8", "E4.8"], "-.4", ["G#4.8", "E4.8"], "-.8", ["A4.8", "F4.8"], ["C5.8", "F5.8"], "-.8", ["C5.8", "F5.8"], ["A4.8", "F4.8"], "-.8", "-.4", ["G4.8", "B4.8"], ["D5.8", "F5.8"], "-.8", ["D5.8", "F5.8"], ["D5.4T3", "F5.4T3"], ["C5.4T3", "E5.4T3"], ["B4.4T3", "D5.4T3"], ["G4.8", "C5.8"], "E4.8", "-.8", "E4.8", "C4.8", "-.8", "-.4" ] }, { "volume" : 0.5, "instrument" : "oscillator-square", "sheet" : [ "D3.8", "D3.8", "-.8", "D3.8", "-.8", "D3.8", "D3.8", "-.8", "G3.8", "-.8", "-.4", "G3.8", "-.8", "-.4",

"G3.8", "-.4", "E3.8", "-.4", "C3.8", "-.4", "F3.8", "-.8", "G3.8", "-.8", "Gb3.8", "F3.8", "-.8", "E3.4T3", "C4.4T3", "E4.4T3", "F4.8", "-.8", "D4.8", "E4.8", "-.8", "C4.8", "-.8", "A3.8", "B3.8", "G3.8", "-.4", "G3.8", "-.4", "E3.8", "-.4", "C3.8", "-.4", "F3.8", "-.8", "G3.8", "-.8", "Gb3.8", "F3.8", "-.8", "E3.4T3", "C4.4T3", "E4.4T3", "F4.8", "-.8", "D4.8", "E4.8", "-.8", "C4.8", "-.8", "A3.8", "B3.8", "G3.8", "-.4",

"C3.8", "-.4", "G3.8", "-.4", "C4.8", "-.8", "F3.8", "-.4", "C4.8", "C4.8", "-.8", "F4.8", "-.8", "C3.8", "-.4", "E3.8", "-.4", "G3.8", "C4.8", "-.2", "-.4", "G3.8", "-.8", "C3.8", "-.4", "G3.8", "-.4", "C4.8", "-.8", "F3.8", "-.4", "C4.8", "C4.8", "-.8", "F4.8", "-.8", "C3.8", "-.8", "Ab3.8", "-.4", "Bb3.8", "-.4", "C4.8", "-.4", "G3.8", "G3.8", "-.8", "C3.8", "-.8",

"Ab2.8", "-.8", "-.8", "Eb3.8", "-.4", "Ab3.8", "-.8", "G3.8", "-.8", "-.8", "C3.8", "-.4", "G2.8", "-.8", "Ab2.8", "-.8", "-.8", "Eb3.8", "-.4", "Ab3.8", "-.8", "G3.8", "-.8", "-.8", "C3.8", "-.4", "G2.8", "-.8", "Ab2.8", "-.8", "-.8", "Eb3.8", "-.4", "Ab3.8", "-.8", "G3.8", "-.8", "-.8", "C3.8", "-.4", "G2.8", "-.8",

"D3.8", "D3.8", "-.8", "D3.8", "-.8", "D3.8", "D3.8", "-.8", "-.2", "G3.8", "-.8", "-.4",

"G3.8", "-.4", "E3.8", "-.4", "C3.8", "-.4", "F3.8", "-.8", "G3.8", "-.8", "Gb3.8", "F3.8", "-.8", "E3.4T3", "C4.4T3", "E4.4T3", "F4.8", "-.8", "D4.8", "E4.8", "-.8", "C4.8", "-.8", "A3.8", "B3.8", "G3.8", "-.4", "G3.8", "-.4", "E3.8", "-.4", "C3.8", "-.4", "F3.8", "-.8", "G3.8", "-.8", "Gb3.8", "F3.8", "-.8", "E3.4T3", "C4.4T3", "E4.4T3", "F4.8", "-.8", "D4.8", "E4.8", "-.8", "C4.8", "-.8", "A3.8", "B3.8", "G3.8", "-.4",

"C3.8", "-.8", "-.8", "F#3.8", "G3.8", "-.8", "C4.8", "-.8", "F3.8", "-.8", "F3.8", "-.8", "C4.8", "C4.8", "F3.8", "-.8", "D3.8", "-.8", "-.8", "F3.8", "G3.8", "-.8", "B3.8", "-.8", "G3.8", "-.8", "G3.8", "-.8", "C4.8", "C4.8", "F3.8", "-.8", "C3.8", "-.8", "-.8", "F#3.8", "G3.8", "-.8", "C4.8", "-.8", "F3.8", "-.8", "F3.8", "-.8", "C4.8", "C4.8", "F3.8", "-.8", "G3.8", "-.8", "-.8", "G3.8", "G3.4T3", "A3.4T3", "B3.4T3", "C4.8", "-.8", "G3.8", "-.8", "C3.8", "-.8", "-.4",

"Ab2.8", "-.8", "-.8", "Eb3.8", "-.4", "Ab3.8", "-.8", "G3.8", "-.8", "-.8", "C3.8", "-.4", "G2.8", "-.8", "Ab2.8", "-.8", "-.8", "Eb3.8", "-.4", "Ab3.8", "-.8", "G3.8", "-.8", "-.8", "C3.8", "-.4", "G2.8", "-.8", "Ab2.8", "-.8", "-.8", "Eb3.8", "-.4", "Ab3.8", "-.8", "G3.8", "-.8", "-.8", "C3.8", "-.4", "G2.8", "-.8",

"D3.8", "D3.8", "-.8", "D3.8", "-.8", "D3.8", "D3.8", "-.8", "-.2", "G3.8", "-.8", "-.4",

"C3.8", "-.8", "-.8", "F#3.8", "G3.8", "-.8", "C4.8", "-.8", "F3.8", "-.8", "F3.8", "-.8", "C4.8", "C4.8", "F3.8", "-.8", "D3.8", "-.8", "-.8", "F3.8", "G3.8", "-.8", "B3.8", "-.8", "G3.8", "-.8", "G3.8", "-.8", "C4.8", "C4.8", "F3.8", "-.8", "C3.8", "-.8", "-.8", "F#3.8", "G3.8", "-.8", "C4.8", "-.8", "F3.8", "-.8", "F3.8", "-.8", "C4.8", "C4.8", "F3.8", "-.8", "G3.8", "-.8", "-.8", "G3.8", "G3.4T3", "A3.4T3", "B3.4T3", "C4.8", "-.8", "G3.8", "-.8", "C3.8", "-.8", "-.4",

"C3.8", "-.8", "-.8", "F#3.8", "G3.8", "-.8", "C4.8", "-.8", "F3.8", "-.8", "F3.8", "-.8", "C4.8", "C4.8", "F3.8", "-.8", "D3.8", "-.8", "-.8", "F3.8", "G3.8", "-.8", "B3.8", "-.8", "G3.8", "-.8", "G3.8", "-.8", "C4.8", "C4.8", "F3.8", "-.8", "C3.8", "-.8", "-.8", "F#3.8", "G3.8", "-.8", "C4.8", "-.8", "F3.8", "-.8", "F3.8", "-.8", "C4.8", "C4.8", "F3.8", "-.8", "G3.8", "-.8", "-.8", "G3.8", "G3.4T3", "A3.4T3", "B3.4T3", "C4.8", "-.8", "G3.8", "-.8", "C3.8", "-.8", "-.4" ] } ]}

This is the JSON representation of the Mario Bros Theme.

Web Audio APIbuffers

var context = new webkitAudioContext() , request = new XMLHttpRequest();

request.open("get", "/drums/snare.wav");request.responseType = "arraybuffer";

request.onload = function () { context.decodeAudioData(request.response, function (buffer) { var source = context.createBufferSource();

source.buffer = buffer; source.connect(context.destination); source.start(0); });};

request.send();

1. AJAX request2. Decode response on request load3. Create buffer source4. Connect source to destination5. Play

1. AJAX request

request.send();

, request = new XMLHttpRequest()

request.send();

2. Decode response on request load

request.send();

request.onload = function () { context.decodeAudioData(request.response, function (buffer) {

3. Create buffer source

request.send();

var context = new webkitAudioContext()

context.decodeAudioData(request.response, function (buffer) { var source = context.createBufferSource();

source.buffer = buffer;

4. Connect source to destination

request.send();

source.connect(context.destination);

5. Play

request.send();

source.start(0);

Live coding

WEB AUDIO BANDOverview

instrument

gain node

master gain node

output

WEB AUDIO BANDDrum Sequencer

Track 1Track 2Track 3Track 4

play track 1

Track 1Track 2Track 3Track 4

play track 2

Drums.soundsMap = { "snare" : "/sounds/drums/snare.wav", "kick" : "/sounds/drums/kick.wav", "tom_hi" : "/sounds/drums/tom_hi.wav", "tom_low" : "/sounds/drums/tom_low.wav", "hihat_closed" : "/sounds/drums/hihat_closed.wav", "hihat_open" : "/sounds/drums/hihat_open.wav", "trash" : "/sounds/drums/trash.wav"};

SoundsMapLoader.loadSounds = function (audioContext) { var dfds = [] , masterDfd = $.Deferred() ;

for (var key in this.soundsMap) { dfds.push(this.loadSound(audioContext, key, this.soundsMap[key])); }

$.when.apply($, dfds).then(function () { masterDfd.resolve(); });

return masterDfd;};

SoundsMapLoader.loadSound = function (audioContext, key, url) { var request = new XMLHttpRequest() , dfd = $.Deferred() ;

request.open("get", url); request.responseType = "arraybuffer";

request.onload = (function () { audioContext.decodeAudioData(request.response, (function (buffer) { this.sounds[key] = buffer; dfd.resolve(); }).bind(this)); }).bind(this);

request.send();

return dfd;};

// Each beat (1/4 note) has 4 divisions (1/16 notes). A full cycle has// 32 1/16 notes, which will be called as positions.//// Something like this://// - - - - | - - - - | - - - - | - - - - | - - - - | - - - - | - - - - | - - - -// 0 4 8 12 16 20 24 28 31

Looper.fn.cycle = function () { if (!this.playing) { return true; }

this.trigger("position-change", [this.position]);

this.position = this.position === this.lastPosition ? 0 : this.position + 1;

setTimeout(this.cycle.bind(this), this.positionDuration);};

60bpm = 1bps1bps = 4 posições p/ segundo

1000ms / 4 => positionDuration = 250ms

Demo (Web Audio Band - Drum Sequencer)

WEB AUDIO BANDSynth Sequencer

Oscillators (sawtooth waves)+

Overdrive

oscillator gain nodeoverdrive plugin

Demo (Web Audio Band - Synth Sequencer)

WEB AUDIO BANDBass Sequencer

SoundFont WAV MP3

[Tue Nov 19 01:42 ~/Sites/petprojects/webaudio_band/public/sounds/bass] (master) [aws:personal]$ ls -wA0.mp3 A7.mp3 Ab7.mp3 B6.mp3 Bb5.mp3 C5.mp3 D4.mp3 Db4.mp3 E4.mp3 Eb4.mp3 F4.mp3 G4.mp3 Gb4.mp3A1.mp3 Ab1.mp3 B0.mp3 B7.mp3 Bb6.mp3 C6.mp3 D5.mp3 Db5.mp3 E5.mp3 Eb5.mp3 F5.mp3 G5.mp3 Gb5.mp3A2.mp3 Ab2.mp3 B1.mp3 Bb0.mp3 Bb7.mp3 C7.mp3 D6.mp3 Db6.mp3 E6.mp3 Eb6.mp3 F6.mp3 G6.mp3 Gb6.mp3A3.mp3 Ab3.mp3 B2.mp3 Bb1.mp3 C1.mp3 C8.mp3 D7.mp3 Db7.mp3 E7.mp3 Eb7.mp3 F7.mp3 G7.mp3 Gb7.mp3A4.mp3 Ab4.mp3 B3.mp3 Bb2.mp3 C2.mp3 D1.mp3 Db1.mp3 E1.mp3 Eb1.mp3 F1.mp3 G1.mp3 Gb1.mp3A5.mp3 Ab5.mp3 B4.mp3 Bb3.mp3 C3.mp3 D2.mp3 Db2.mp3 E2.mp3 Eb2.mp3 F2.mp3 G2.mp3 Gb2.mp3A6.mp3 Ab6.mp3 B5.mp3 Bb4.mp3 C4.mp3 D3.mp3 Db3.mp3 E3.mp3 Eb3.mp3 F3.mp3 G3.mp3 Gb3.mp3

Demo (Web Audio Band - Bass Sequencer)

WEB AUDIO BANDWebsockets

/admin?key=/

Host Interface

Instrument Interface

new instrument slot

Host Interface

instruments available

instrument connect

Host Interface

instrumentselect

instruments available

instrument played

Host Interface

instrumentplay

play(sound);

Demo (Web Audio Band - Remote Instruments)

Por quê?

Why did I develop this projet?

Eu amo música.

I love music.

Programar é divertido.

Programming is fun.

Aprimorei conceitos de arquitetura.

I improved my architecture concepts.

Aprendi e conheci mais sobre:

I learned and got to know more about:

JavaScriptSass

Web Audio APIBowerGrunt

NodeJSExpressJSSocket.IO

MIDI/SoundFont

E pra provar que esses caras estão errados:

And did it to prove that these guys are wrong:

The Web is not dead. Long live the Web.

And I finish this talk with a picture of my cats Jamie and Lexie. <3

THANKS!slideshare.net/eshiotagithub.com/eshiota

@shiota

web audio band - playing with a band in your browser

Entertainment & Humor

plymouth-canton - martinmusicclass.weebly.com€¦ · web...

by duke ellington - alfred music · notes on playing...

marching band the hunger games€¦ · brandon jara (9)...

y rock band xbox one controller -...

high energy live music for weddings & events. playing all...

ucf101: a dataset of 101 human actions classes from videos...

ucf101: a dataset of 101 human actions classes … · pizza...

wedding band two cent information booklet the · wedding...

v stopped playing and the band - culturehive.co.uk

high energy live music for weddings & events. playing all...

big band - lsrhs.net · big band swing music. popular...

the band teacher's percussion guide: insights into playing...

playing besson instruments - connecting repositories ·...

jazz conversation · the others in the jazz group are...

5 piece band playing motown, soul, funk & disco www ... ·...

· ellis island band played at a street fair in san...

key-specs from solo piano to playing with a band...from solo...

verandah.pdf · (just then the band concert at hope gardens...

high energy live music for weddings & events. playing all...

full page fax print - yamaha corporationsimply by playing...