Web Audio Band - Playing with a band in your browser
-
Upload
eduardo-shiota-yasuda -
Category
Entertainment & Humor
-
view
2.163 -
download
1
description
Transcript of 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",
["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",
"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",
"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
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();
, request = new XMLHttpRequest()
request.open("get", "/drums/snare.wav");request.responseType = "arraybuffer";
request.send();
2. Decode response on request load
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();
request.onload = function () { context.decodeAudioData(request.response, function (buffer) {
});};
3. Create buffer source
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();
var context = new webkitAudioContext()
context.decodeAudioData(request.response, function (buffer) { var source = context.createBufferSource();
source.buffer = buffer;
});
4. Connect source to destination
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();
source.connect(context.destination);
5. Play
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();
source.start(0);
Live coding
WEB AUDIO BANDOverview
instrument
instrument
instrument
gain node
gain node
gain node
master gain node
output
WEB AUDIO BANDDrum Sequencer
Track 1Track 2Track 3Track 4
Track 1Track 2Track 3Track 4
Track 1Track 2Track 3Track 4
play track 1
Track 1Track 2Track 3Track 4
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
Instrument Interface
new instrument slot
Host Interface
Instrument Interface
Instrument Interface
instruments available
instrument connect
Host Interface
Instrument Interface
Instrument Interface
instrumentselect
instruments available
instrument played
Host Interface
Instrument 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