![Page 1: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/1.jpg)
WEB AUDIO BAND
@shiota 2013
![Page 2: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/2.jpg)
OH HAI!slideshare.net/eshiotagithub.com/eshiota
@shiota
![Page 3: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/3.jpg)
![Page 4: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/4.jpg)
+
![Page 5: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/5.jpg)
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.
![Page 6: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/6.jpg)
Web Audio APIoscillators
![Page 7: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/7.jpg)
// Vendor prefixedvar context = new webkitAudioContext();
![Page 8: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/8.jpg)
context.createOscillator() context.destination
connect()
![Page 9: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/9.jpg)
var oscillator = context.createOscillator();
oscillator.connect(context.destination);
![Page 10: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/10.jpg)
frequência
duração
A note, crudely speaking, is a frequency played for a certain duration.
![Page 11: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/11.jpg)
oscillator.frequency.value = 780;
oscillator.start(0);oscillator.stop(context.currentTime + 0.5);
![Page 12: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/12.jpg)
Live coding
![Page 13: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/13.jpg)
RETROJS
Demo (RetroJS) - http://eshiota.github.io/retro-audio-js/
![Page 14: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/14.jpg)
Demo (RetroJS - Mario Theme)
![Page 15: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/15.jpg)
{ "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.
![Page 16: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/16.jpg)
Web Audio APIbuffers
![Page 17: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/17.jpg)
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();
![Page 18: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/18.jpg)
1. AJAX request2. Decode response on request load3. Create buffer source4. Connect source to destination5. Play
![Page 19: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/19.jpg)
1. AJAX request
![Page 20: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/20.jpg)
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();
![Page 21: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/21.jpg)
2. Decode response on request load
![Page 22: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/22.jpg)
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) {
});};
![Page 23: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/23.jpg)
3. Create buffer source
![Page 24: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/24.jpg)
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;
});
![Page 25: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/25.jpg)
4. Connect source to destination
![Page 26: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/26.jpg)
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);
![Page 27: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/27.jpg)
5. Play
![Page 28: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/28.jpg)
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);
![Page 29: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/29.jpg)
Live coding
![Page 30: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/30.jpg)
WEB AUDIO BANDOverview
![Page 31: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/31.jpg)
instrument
instrument
instrument
gain node
gain node
gain node
master gain node
output
![Page 32: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/32.jpg)
WEB AUDIO BANDDrum Sequencer
![Page 33: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/33.jpg)
Track 1Track 2Track 3Track 4
![Page 34: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/34.jpg)
Track 1Track 2Track 3Track 4
![Page 35: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/35.jpg)
Track 1Track 2Track 3Track 4
play track 1
![Page 36: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/36.jpg)
Track 1Track 2Track 3Track 4
![Page 37: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/37.jpg)
Track 1Track 2Track 3Track 4
play track 2
![Page 38: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/38.jpg)
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"};
![Page 39: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/39.jpg)
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;};
![Page 40: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/40.jpg)
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;};
![Page 41: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/41.jpg)
// 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);};
![Page 42: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/42.jpg)
60bpm = 1bps1bps = 4 posições p/ segundo
1000ms / 4 => positionDuration = 250ms
![Page 43: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/43.jpg)
Demo (Web Audio Band - Drum Sequencer)
![Page 44: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/44.jpg)
WEB AUDIO BANDSynth Sequencer
![Page 45: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/45.jpg)
Oscillators (sawtooth waves)+
Overdrive
![Page 46: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/46.jpg)
oscillator gain nodeoverdrive plugin
![Page 47: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/47.jpg)
Demo (Web Audio Band - Synth Sequencer)
![Page 48: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/48.jpg)
WEB AUDIO BANDBass Sequencer
![Page 49: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/49.jpg)
![Page 50: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/50.jpg)
SoundFont WAV MP3
![Page 51: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/51.jpg)
[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
![Page 52: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/52.jpg)
Demo (Web Audio Band - Bass Sequencer)
![Page 53: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/53.jpg)
WEB AUDIO BANDWebsockets
![Page 54: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/54.jpg)
![Page 55: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/55.jpg)
![Page 56: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/56.jpg)
![Page 57: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/57.jpg)
/admin?key=/
/
Host Interface
Instrument Interface
Instrument Interface
![Page 58: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/58.jpg)
new instrument slot
Host Interface
Instrument Interface
Instrument Interface
instruments available
![Page 59: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/59.jpg)
instrument connect
Host Interface
Instrument Interface
Instrument Interface
instrumentselect
instruments available
![Page 60: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/60.jpg)
instrument played
Host Interface
Instrument Interface
instrumentplay
play(sound);
![Page 61: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/61.jpg)
Demo (Web Audio Band - Remote Instruments)
![Page 62: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/62.jpg)
Por quê?
Why did I develop this projet?
![Page 63: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/63.jpg)
Eu amo música.
I love music.
![Page 64: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/64.jpg)
Programar é divertido.
Programming is fun.
![Page 65: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/65.jpg)
Aprimorei conceitos de arquitetura.
I improved my architecture concepts.
![Page 66: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/66.jpg)
Aprendi e conheci mais sobre:
I learned and got to know more about:
![Page 67: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/67.jpg)
JavaScriptSass
Web Audio APIBowerGrunt
NodeJSExpressJSSocket.IO
MIDI/SoundFont
![Page 68: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/68.jpg)
E pra provar que esses caras estão errados:
And did it to prove that these guys are wrong:
![Page 69: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/69.jpg)
![Page 70: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/70.jpg)
The Web is not dead. Long live the Web.
![Page 71: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/71.jpg)
And I finish this talk with a picture of my cats Jamie and Lexie. <3
![Page 72: Web Audio Band - Playing with a band in your browser](https://reader033.vdocuments.us/reader033/viewer/2022051209/547bb726b37959932b8b4eba/html5/thumbnails/72.jpg)
THANKS!slideshare.net/eshiotagithub.com/eshiota
@shiota