Date post: | 13-Aug-2015 |
Category: |
Engineering |
Upload: | globallogic-ukraine |
View: | 395 times |
Download: | 1 times |
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
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
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/