The slides accompanying my talk at the Future of Web Apps 2014 in London. A whistle stop tour of the experimental audio apis available in the browser, and some vendor APIs to accompany web based audio / music.
21. AudioContext Buffer
var audioBuffer = null;
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
!
var request = new XMLHttpRequest();
request.open('GET', 'mysound.mp3', true);
request.responseType = 'arraybuffer';
!
request.onload = function() {
context.decodeAudioData(request.response, function(buffer) {
@sydlawrence
@wemakeawesomesh
audioBuffer = buffer;
}, onError);
};
request.send();
22. AudioContext Playback
@sydlawrence
// creates a sound source
var source = context.createBufferSource();
!
// tell the source which sound to play
source.buffer = audioBuffer;
!
// connect the source to the context's destination
source.connect(context.destination);
source.start(0);
@wemakeawesomesh
23. @sydlawrence
@wemakeawesomesh
FFT
A fast Fourier transform (FFT) is an efficient algorithm to compute the
discrete Fourier transform (DFT) of an input vector. Efficient means
that the FFT computes the DFT of an n-element vector in O(nlog n)
operations in contrast to the O(n2) operations required for computing
the DFT by definition.
31. Setup the audio node
@sydlawrence
var audioContext = new webkitAudioContext;
!
var gainNode = audioContext.createGain();
!
gainNode.connect(audioContext.destination);
@wemakeawesomesh
32. @sydlawrence
@wemakeawesomesh
Set up the filter
// create the filter
var lowPassFilter = audioContext.createBiquadFilter();
lowPassFilter.frequency.value = frequency;
!
// create the wave shaper
var waveShaper = audioContext.createWaveShaper();
!
// connect the bits together
var waveShaper.connect(lowPassFilter);
lowPassFilter.connect(audioContext.destination);
!
// create the curve array and set it to the shaper
var wsCurve = new Float32Array(22050);
// .. add floats to the curve
waveShaper.curve = wsCurve;
33. Add the filter to the audio
gainNode.connect(lowPassFilter);
@sydlawrence
@wemakeawesomesh
41. @sydlawrence
@wemakeawesomesh
What is MIDI?
!
MIDI is just a messaging protocol
You can send MIDI messages and receive MIDI messages
They consist of channel, key and velocity
42. @sydlawrence
It is experimental!
Behind a flag in chrome
OR Install a browser plugin
http://jazz-soft.net/doc/Jazz-Plugin/
@wemakeawesomesh