Let's Make Some Noise with Web Audio API

Web Audio API

Let’s Make Some Noise!

Rostyslav Siryk, Globallogic

Kharkiv Front-End PracticeJuly 22, 18:00-22:00

Kharkiv Palace Premier Hotel "Dunai" conference hall

front-end.globallogic.com.ua

audio context→ is the place where audio is operated

audio nodes→ are basic elements of audio

modular routing→ connects nodes with each other

audio routing graph→ the network of audio nodes

Web Audio API: Concepts

Complex audio with dynamic effects, like:→ drum machines→ sequencers (timbre.js)→ synthesizers→ visualisers

Many sources within in a single context is OK.

Modular design → flexibility

Audio Nodes: Input, Effect, Destination

Web Audio Workflow

1. Create audio context2. Inside the context, create sources:

<audio>, oscillator, stream etc...3. Create effects nodes: reverb, biquad filter,

panner, compressor.4. Choose destination of audio: speakers5. Route the abovementioned.

Web Audio Step by Step

AudioContext audio-processing graph of audio

modules.

AudioNode processing module: source (HTML

<audio> or <video>), destination, or intermediate.

AudioParam module parameter: value or a

change, can be scheduled.

ended (event) fired when playback has stopped.

Web Audio General Objects

OscillatorNode a sine wave with frequency

AudioBuffer short audio residing in memory

AudioBufferSourceNode audio from AudioBuffer

MediaElementAudioSourceNode <audio> <video>

MediaStreamAudioSourceNode WebRTC MediaStream (webcam or mic)

Web Audio: Sources

BiquadFilterNode AN as filter, tone control, graphic EQConvolverNode linear Convolution (reverb effect etc.)DelayNode delay between the input and outputDynamicsCompressorNode prevent clipping etcGainNode change in volumeStereoPannerNode left | rightWaveShaperNode non-linear distorter + warmer soundPeriodicWave may shape the output of an OscillatorNode

Web Audio: Effects filters

AudioDestinationNode interface, usually speakers

MediaStreamAudioDestinationNode WebRTC MediaStream with a single AudioMediaStreamTrack

Web Audio: Destinations

AnalyserNode real-time frequency and time-domain analysis information

Web Audio: Visualisation

ChannelSplitterNode separates into of mono outputs.

ChannelMergerNode reunites mono inputs

Web Audio: Split & Merge

AudioListenerthe position and orientation of the unique person listening to the audio scene

PannerNodesignal in space, moving with velocity vector using a directionality cone

Web Audio: Spatialization

Web Worker is a method of running scripts in the background, isolated from the web page.

Audio Workers arent’ implemented in browsers yet (July 20, 2015), but will:

AudioWorkerNodeAudioWorkerGlobalScopeAudioProcessEvent

Web Audio Future: Audio Workers

((((0_0_2710)_(6_0_2710)_(c_0_2710)_(12_2_2712)_(18_2_2712)_(1e_3_2713)_(24_3_2713)_(2a_3_2713)_(30_0_2710)_(36_0_2710)_(3c_0_2710)_(0_0_2710)))_(((0_c_6)_(3_e_4)_(4_d_5)_(7_e_4)_(8_c_6)_(b_e_4)_(c_d_5)_(f_e_4)_(10_c_6)_(13_e_4)_(14_d_5)_(17_e_4)_(18_c_6)_(1b_e_4)_(1c_d_5)_(1f_e_4)_(20_c_6)_(23_e_4)_(24_d_5)_(27_e_4)_(28_c_6)_(2b_e_4)_(2c_d_5)_(2f_e_4)_(30_c_6)_(33_e_4)_(34_d_5)_(37_e_4)_(38_c_6)_(3b_e_4)_(3c_d_5)_(3f_e_4))_((0_-15b.4a2e3fd6e91_3e.1ab3f_46_b387ff_e)_(1_-9a.15e27cc3d11_df.24f473_23_4527a0_d)_(2_2.185b03339ccb0f_-117.4b1a13_96_ede7f6_c)_(3_-27.be11f76f7c32_9.2d13759_46_b387ff_e)_(4_e9.5d81e68a7cf_136.1836e21_23_4527a0_d)_(5_17b.6b265c366cf_0.53d1ac1_96_ede7f6_c))_((-c8_2bc_2)_(0_2bc_4)_(fa_2bc_8)))_(((4_1b_0)_(5_1a_14)_(8_1a_14)_(a_19_7)_(d_1c_f)_(e_1b_0)_(11_1a_14)_(13_19_7)_(15_1c_f)_(17_1b_0)_(19_1c_f)_(1a_1b_0)_(1b_19_7)_(1d_1a_14)_(1f_1c_f)_(21_1b_0)_(24_1b_0)_(25_19_7)_(29_1a_14)_(2a_1b_0)_(2b_1c_f)_(2d_1b_0)_(30_1b_0)_(31_19_7)_(35_1a_14)_(35_1b_0)_(37_1c_f)_(3a_1b_0)_(3a_1c_f)_(3c_1b_0)_(3e_19_7))_((0_4_b)_(7_0_a)_(f_1_8)_(14_7_6))_3_5)_(((1_(-1_2_-1)_10)_(10_(3_0_-3)_12)_(1c_(1_0_-1)_12)_(24_(-1_2_-1)_10)_(34_(3_0_-3)_12)_(3f_(0_-1_1)_11)))_(((3e_16_5.1_0)_(1e_18_5.6_2))_((16_ffffff_f2fbfd)_(17_4dd0e0_3dccde)_(18_b1eaf2_9fe6ee)_(14_97a7_a9bd)_(15_6064_7b85))))

Google I/O 2015 Audio Experiment

WTF? See http://www.instrument.com/latest/google-io-2015-audio-experiment

JS Lib for Objective Sound Programming:T("sin").play();T("saw").play();

Example: Timbre.js

mohayonao.github.io/timbre.js/

mohayonao.github.io/timbre.js/khoomii.html

Web Audio Exampleschromium.googlecode.com/svn/trunk/samples/audio/samples.htmlhtml5rocks.com/en/tutorials/webaudio/intro

Web Audio Ring Visualizer:airtightinteractive.com/demos/js/reactive/chromeexperiments.com/?q=audio

Google I/O 2015 Audio Experimentinstrument.com/latest/google-io-2015-audio-experimentevents.google.com/io2015/?experiment#

Record and Export Audio, Video with Recorder.js:https://truongtx.me/2014/08/09/record-and-export-audio-video-files-in-browser-using-web-audio-api/

Web Audio Links

Web Audio Toolsaudiolib.jsgithub.com/jussi-kalliokoski/audiolib.js

timbre.jsJavaScript Library for Objective Sound Programmingmohayonao.github.io/timbre.js/mohayonao.github.io/timbre.js/khoomii.html

Web Audio API Docs:developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

Web Audio API on GitHubgithub.com/WebAudio/web-audio-api

Web Audio Browser Support

Rostyslav Siryk, GlobalLogicfacebook.com/rastislavr

github.com/rostagtwitter.com/rostjsfiddle.net/rost

Let’s Make Some

Practice:Web Audio API: Load, Filter, Gain, Play

http://jsfiddle.net/rost/efzabd36/

Let’s Make Some

Practice:Web Audio API: Load, Filter, Gain, Play

http://jsfiddle.net/rost/efzabd36/

iGov.org.uaParticipate:github.com/e-government-ua/i/wiki/Як-почати-роботу

iGov.org.ua - офіційна група:facebook.com/groups/458833010941504/

My Favorite Project, now: