Más contenido relacionado La actualidad más candente (17) Similar a Web Audio Band - Playing with a band in your browser (20) Más de Eduardo Shiota Yasuda (14) Web Audio Band - Playing with a band in your browser5. 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.
9. var oscillator = context.createOscillator();
oscillator.connect(context.destination);
15. {
"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"
["C5.8", "E4.8"], "-.4" , ["G4.8", "C4.8"],
["G4.4T3", "C4.4T3"], ["E5.4T3", "G4.4T3"],
["C5.8", "E4.8"], "-.4" , ["G4.8", "C4.8"],
["G4.4T3", "C4.4T3"], ["E5.4T3", "G4.4T3"],
, "G4.8", "-.8", "-.4",
"-.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",
["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",
"-.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",
["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",
["G5.8", "E5.8"], ["Gb5.8", "Eb5.8"], ["F5.8", "D5.8"], ["D#5.8", "B4.8"], "-.8", ["E5.8",
["G5.8", "E5.8"], ["Gb5.8", "Eb5.8"], ["F5.8", "D5.8"], ["D#5.8", "B4.8"], "-.8", ["E5.8",
"-.4", ["Eb5.8", "Ab4.8"], "-.4", ["D5.8", "F4.8"], "-.4", ["C5.8", "E4.8"], "-.8", "-.4",
"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",
"C5.8"], "-.8", ["C6.8", "G5.8"], "-.8", ["C6.8", "G5.8"], ["C6.8", "G5.8"], "-.8", "-.4", "-.4",
"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"],
"-.2", "-.4",
["G5.8", "E5.8"], ["Gb5.8", "Eb5.8"], ["F5.8", "D5.8"], ["D#5.8", "B4.8"], "-.8", ["E5.8",
["G5.8", "E5.8"], ["Gb5.8", "Eb5.8"], ["F5.8", "D5.8"], ["D#5.8", "B4.8"], "-.8", ["E5.8",
["G5.8", "E5.8"], ["Gb5.8", "Eb5.8"], ["F5.8", "D5.8"], ["D#5.8", "B4.8"], "-.8", ["E5.8",
"-.4", ["Eb5.8", "Ab4.8"], "-.4", ["D5.8", "F4.8"], "-.4", ["C5.8", "E4.8"], "-.8", "-.4",
"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",
"C5.8"], "-.8", ["C6.8", "G5.8"], "-.8", ["C6.8", "G5.8"], ["C6.8", "G5.8"], "-.8", "-.4", "-.4",
"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"],
"-.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"
["C5.8", "E4.8"], "-.4" , ["G4.8", "C4.8"],
["G4.4T3", "C4.4T3"], ["E5.4T3", "G4.4T3"],
["C5.8", "E4.8"], "-.4" , ["G4.8", "C4.8"],
["G4.4T3", "C4.4T3"], ["E5.4T3", "G4.4T3"],
, "G4.8", "-.8", "-.4",
"-.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",
["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",
"-.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",
["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",
"E3.4T3", "C4.4T3", "E4.4T3",
"G3.8", "-.4", "E3.8", "-.4",
"E3.4T3", "C4.4T3", "E4.4T3",
"C3.8",
"F4.8",
"C3.8",
"F4.8",
"-.4",
"-.8",
"-.4",
"-.8",
"F3.8",
"D4.8",
"F3.8",
"D4.8",
"-.8", "G3.8",
"E4.8", "-.8",
"-.8", "G3.8",
"E4.8", "-.8",
"-.8", "Gb3.8", "F3.8", "-.8",
"C4.8", "-.8", "A3.8", "B3.8", "G3.8", "-.4",
"-.8", "Gb3.8", "F3.8", "-.8",
"C4.8", "-.8", "A3.8", "B3.8", "G3.8", "-.4",
This is the JSON representation of the Mario Bros Theme.
"C3.8",
"C3.8",
"C3.8",
"C3.8",
"-.4",
"-.4",
"-.4",
"-.8",
"G3.8", "-.4", "C4.8", "-.8", "F3.8", "-.4", "C4.8", "C4.8", "-.8", "F4.8", "-.8",
"E3.8", "-.4", "G3.8", "C4.8", "-.2", "-.4", "G3.8", "-.8",
"G3.8", "-.4", "C4.8", "-.8", "F3.8", "-.4", "C4.8", "C4.8", "-.8", "F4.8", "-.8",
"Ab3.8", "-.4", "Bb3.8", "-.4", "C4.8", "-.4", "G3.8", "G3.8", "-.8", "C3.8", "-.8",
17. 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();
20. 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();
22. 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();
24. 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();
26. 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();
28. 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();
38. 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"
};
39. 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;
};
40. 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;
};
41. //
//
//
//
//
//
//
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);
};
51. [Tue Nov
$ ls -w
A0.mp3
A1.mp3
A2.mp3
A3.mp3
A4.mp3
A5.mp3
A6.mp3
19 01:42 ~/Sites/petprojects/webaudio_band/public/sounds/bass] (master) [aws:personal]
A7.mp3
Ab1.mp3
Ab2.mp3
Ab3.mp3
Ab4.mp3
Ab5.mp3
Ab6.mp3
Ab7.mp3
B0.mp3
B1.mp3
B2.mp3
B3.mp3
B4.mp3
B5.mp3
B6.mp3
B7.mp3
Bb0.mp3
Bb1.mp3
Bb2.mp3
Bb3.mp3
Bb4.mp3
Bb5.mp3
Bb6.mp3
Bb7.mp3
C1.mp3
C2.mp3
C3.mp3
C4.mp3
C5.mp3
C6.mp3
C7.mp3
C8.mp3
D1.mp3
D2.mp3
D3.mp3
D4.mp3
D5.mp3
D6.mp3
D7.mp3
Db1.mp3
Db2.mp3
Db3.mp3
Db4.mp3
Db5.mp3
Db6.mp3
Db7.mp3
E1.mp3
E2.mp3
E3.mp3
E4.mp3
E5.mp3
E6.mp3
E7.mp3
Eb1.mp3
Eb2.mp3
Eb3.mp3
Eb4.mp3
Eb5.mp3
Eb6.mp3
Eb7.mp3
F1.mp3
F2.mp3
F3.mp3
F4.mp3
F5.mp3
F6.mp3
F7.mp3
G1.mp3
G2.mp3
G3.mp3
G4.mp3
G5.mp3
G6.mp3
G7.mp3
Gb1.mp3
Gb2.mp3
Gb3.mp3
Gb4.mp3
Gb5.mp3
Gb6.mp3
Gb7.mp3
68. E pra provar que esses caras estão errados:
And did it to prove that these guys are wrong:
71. And I finish this talk with a picture of my cats Jamie and Lexie. <3