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.

1. Music is the Soul
The Web is the Platform
@sydlawrence
@wemakeawesomesh

3. DISCLAIMER
There are no GIFs
@sydlawrence
@wemakeawesomesh

4. DISCLAIMER
There are no GIFs
@sydlawrence
@wemakeawesomesh

5. Audio Playback
Audio Metadata
Audio Analysis
Audio Filters
Audio Synthesis
Web MIDI
@sydlawrence
@wemakeawesomesh

6. Audio Playback
We are literally swimming in music
@sydlawrence
@wemakeawesomesh

7. Alright, not literally

8. Simple MP3 Playback
@sydlawrence
@wemakeawesomesh
var audio = new Audio();
audio.src = 'mysong.mp3';
audio.play();

9. Soundcloud Playback
SC.stream('/tracks/6049255', function(sound){
@sydlawrence
@wemakeawesomesh
sound.play();
});
https://developers.soundcloud.com/

10. rdio Playback
var player = document.getElementById('rdio');
player.rdio_play('http://rd.io/x/QUxMDDdzOP0/');
@sydlawrence
@wemakeawesomesh
http://www.rdio.com/developers/

11. Deezer Playback
@sydlawrence
@wemakeawesomesh
http://developers.deezer.com/
DZ.player.playTracks([82230030]);

12. Spotify Playback
@sydlawrence
@wemakeawesomesh
https://developer.spotify.com/
Computer says no
Emeddable widget only

13. Toma.hk Playback
@sydlawrence
http://toma.hk/api.html
var track = window.tomahkAPI.Track(
'Never Gonna Give You Up','Rick Astley',
{
@wemakeawesomesh
disabledResolvers: ['spotify']
}
);
$('body').append(track.render());
track.play();

14. Audio Metadata
“Get me all the songs by Rick Astley”
@sydlawrence
@wemakeawesomesh

15. the echonest
http://developer.echonest.com/api/v4/artist/songs
?api_key=<YOUR_API_KEY>
&name=rick+astley
&format=jsonp
&callback=JSONP_CALLBACK
@sydlawrence
@wemakeawesomesh
http://developer.echonest.com/

16. Music Graph
http://api.musicgraph.com/api/v2/artist/e41999c6-a6b5-11e0-b446-00251188dd67/tracks
?api_key=<YOUR_API_KEY>
@sydlawrence
@wemakeawesomesh
https://developer.musicgraph.com/

17. https://cXXXXXXX.web.cddbp.net/webapi/xml/1.0/
!
<QUERIES>
<LANG>eng</LANG>
<AUTH>
<CLIENT>XXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</CLIENT>
<USER>XXXXXXXXXXXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</USER>
</AUTH>
<QUERY CMD="ALBUM_SEARCH">
<TEXT TYPE=“ARTIST">rick astley</TEXT>
</QUERY>
</QUERIES>
gracenote
@sydlawrence
@wemakeawesomesh
https://developer.gracenote.com/

18. gracenote
SUPER
SIMPLE*
*sarcasm
@sydlawrence
@wemakeawesomesh

19. @sydlawrence
@wemakeawesomesh
Audio Analysis
When just simply playing
music isn’t enough

20. AudioContext
@sydlawrence
@wemakeawesomesh
AudioContext
Source ? Destination

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.

24. @sydlawrence
@wemakeawesomesh
FFT

25. FFT
SUPER
SIMPLE*
*sarcasm
@sydlawrence
@wemakeawesomesh

26. FFT
@sydlawrence
@wemakeawesomesh

27. @sydlawrence
@wemakeawesomesh

28. @sydlawrence
@wemakeawesomesh
dancer.js
var dancer = new Dancer();
!
dancer.load(audio);
!
dancer.bind( 'update', function() {
var magnitude = this.getFrequency(startF, endF);
});
http://jsantell.github.io/dancer.js/

29. @sydlawrence
Here’s something
I made earlier
@wemakeawesomesh
wmas.it/musicviz/ripple/

30. @sydlawrence
@wemakeawesomesh
Audio Filters
Let’s pretend we are super star DJS

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

34. Audio Filters
SUPER
SIMPLE*
*sarcasm
@sydlawrence
@wemakeawesomesh

35. @sydlawrence
Here’s something
I made earlier*
@wemakeawesomesh
wmas.it/vineboard
!
!
*I didn’t make it,
@skattyadz & @robhampson did

36. @sydlawrence
@wemakeawesomesh
Audio Synthesis
Now we can pretend
we are musicians

37. @sydlawrence
@wemakeawesomesh
Tone Synthesis
var context = new webkitAudioContext(),
oscillator = context.createOscillator();
!
oscillator.type = 0; // sine wave
oscillator.frequency.value = 2000;
oscillator.connect(context.destination);
oscillator.noteOn && oscillator.noteOn(0);

38. @sydlawrence
@wemakeawesomesh
Tone Synthesis
http://codepen.io/sydlawrence/pen/lruEy

39. @sydlawrence
Here’s something
I made earlier*
@wemakeawesomesh
somakeit.github.io/potzy
!
!
*I didn’t make it,
@Benjie & @MichDdev did

40. @sydlawrence
@wemakeawesomesh
Web MIDI
Let’s use instruments with the web

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

43. navigator.requestMIDIAccess().then(success,error);
!
var success = function(midi) {
inputs = midi.inputs();
outputs = midi.outputs();
};
!
var error = function() {
console.log('oops');
};
@sydlawrence
Request MIDI Access
@wemakeawesomesh

44. input.onmidimessage = function(e) {
var message = e.data; // [ channel, key, velocity ]
};
!
output.send( [ channel, key, velocity ] );
@sydlawrence
Send & Receive MIDI
@wemakeawesomesh

45. Web MIDI
SUPER
SIMPLE*
*NO SARCASM!!!!!
@sydlawrence
@wemakeawesomesh

46. @sydlawrence
Here’s something
I made earlier
@wemakeawesomesh
wmas.it/midi

47. Thank you for listening
@sydlawrence
@wemakeawesomesh