music is the soul - the web is the platform fowa london 2014

Music is the Soul The Web is the Platform

@sydlawrence @wemakeawesomesh

DISCLAIMER There are no GIFs


Audio Playback Audio Metadata

Audio Analysis Audio Filters

Audio Synthesis Web MIDI


Audio Playback We are literally swimming in music


Alright, not literally

Simple MP3 Playback


var audio = new Audio(); audio.src = 'mysong.mp3'; audio.play();

Soundcloud Playback


SC.stream('/tracks/6049255', function(sound){ sound.play(); });

https://developers.soundcloud.com/

https://developers.soundcloud.com/

rdio Playback


var player = document.getElementById('rdio'); player.rdio_play('http://rd.io/x/QUxMDDdzOP0/');

http://www.rdio.com/developers/

http://www.rdio.com/developers/

Deezer Playback


DZ.player.playTracks([82230030]);

http://developers.deezer.com/

http://developers.deezer.com/

Spotify Playback


Computer says no

Emeddable widget only

https://developer.spotify.com/

https://developer.spotify.com/

Toma.hk Playback


var track = window.tomahkAPI.Track( 'Never Gonna Give You Up','Rick Astley', { disabledResolvers: ['spotify'] } ); $('body').append(track.render()); track.play();

http://toma.hk/api.html

http://toma.hk/api.html

Audio Metadata “Get me all the songs by Rick Astley”


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

the echonest


http://developer.echonest.com/

http://developer.echonest.com/

http://api.musicgraph.com/api/v2/artist/e41999c6-a6b5-11e0-b446-00251188dd67/tracks ?api_key=<YOUR_API_KEY>

Music Graph


https://developer.musicgraph.com/

https://developer.musicgraph.com/

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


https://developer.gracenote.com/

https://developer.gracenote.com/

gracenote


SUPER SIMPLE* *sarcasm


Audio Analysis When just simply playing

music isn’t enough

AudioContext


AudioContext

Source Destination?

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) { audioBuffer = buffer; }, onError); }; request.send();

AudioContext Playback


// 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);


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.


FFT


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/

http://jsantell.github.io/dancer.js/


Here’s something I made earlier

wmas.it/musicviz/ripple/

http://wemakeawesomesh.it/musicviz/ripple/


Audio Filters Let’s pretend we are super star DJS


Setup the audio node

var audioContext = new webkitAudioContext; !

var gainNode = audioContext.createGain(); !

gainNode.connect(audioContext.destination);


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;


Add the filter to the audiogainNode.connect(lowPassFilter);

Audio Filters




Here’s something I made earlier*

wmas.it/vineboard !

!

*I didn’t make it, @skattyadz & @robhampson did

http://wemakeawesomesh.it/vineboard


Audio Synthesis Now we can pretend

we are musicians


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);


Tone Synthesis

http://codepen.io/sydlawrence/pen/lruEy

http://codepen.io/sydlawrence/pen/lruEy


Here’s something I made earlier*

somakeit.github.io/potzy !

!

*I didn’t make it, @Benjie & @MichDdev did

http://somakeit.github.io/potzy/


Web MIDI Let’s use instruments with the web


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


It is experimental! Behind a flag in chrome

OR Install a browser pluginhttp://jazz-soft.net/doc/Jazz-Plugin/

http://jazz-soft.net/doc/Jazz-Plugin/


Request MIDI Accessnavigator.requestMIDIAccess().then(success,error); !

var success = function(midi) { inputs = midi.inputs(); outputs = midi.outputs(); }; !

var error = function() { console.log('oops'); };


Send & Receive MIDIinput.onmidimessage = function(e) { var message = e.data; // [ channel, key, velocity ] }; !

output.send( [ channel, key, velocity ] );


Web MIDI

SUPER SIMPLE* *NO SARCASM!!!!!


Here’s something I made earlier

wmas.it/midi

http://wmas.it/midi


Thank you for listening

music is the soul - the web is the platform fowa london 2014

Technology