Slide 1
Slide 1 text
JavaScript, JavaScript…
Rocks You!
Slide 2
Slide 2 text
Vitalii Bobrov
Lead JS Engineer @ EPAM
@AngularWroclaw organizer
Guitar player
@bobrov1989
https://bobrov.dev
Slide 3
Slide 3 text
Web Audio
Slide 4
Slide 4 text
a uni-directed graph containing
audio nodes
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API
Slide 5
Slide 5 text
Uni-directed Graph
input output
effects
Slide 6
Slide 6 text
Guitar Stack
input output
Slide 7
Slide 7 text
Guitar Stack
input output
effects
Slide 8
Slide 8 text
Connect a Guitar
Slide 9
Slide 9 text
Stream Source
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamAudioSourceNode
try {
const context = new AudioContext();
const stream = await navigator.mediaDevices
.getUserMedia({
audio: true
});
} catch (err) {
console.error(err);
}
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Media Stream Constraints
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/audio
const stream = await navigator.mediaDevices
.getUserMedia({
audio: true
});
Slide 12
Slide 12 text
Media Stream Constraints
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/audio
const stream = await navigator.mediaDevices
.getUserMedia({
audio: {
echoCancellation: false,
autoGainControl: false,
noiseSuppression: false,
latency: 0
}
});
Slide 13
Slide 13 text
Connect to Destination
https://developer.mozilla.org/en-US/docs/Web/API/AudioDestinationNode
const lineInSource = context.createMediaStreamSource(stream);
lineInSource.connect(context.destination);
Slide 14
Slide 14 text
Volume Control
Slide 15
Slide 15 text
Gain Control
sin(x) 0.5sin(x)
Slide 16
Slide 16 text
Gain Node
https://developer.mozilla.org/en-US/docs/Web/API/GainNode
const gainNode = new GainNode(context);
gainNode.gain.value = 0.5;
source.connect(gainNode).connect(context.destination);
Slide 17
Slide 17 text
Distortion
Slide 18
Slide 18 text
group of effects shaping
a sound wave
Slide 19
Slide 19 text
Overdrive
Distortion
Fuzz
Effects
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Wave Shape
sin(x) (PI + k) * x / (PI + k * abs(x))
Slide 22
Slide 22 text
Distortion vs Overdrive vs Fuzz
Slide 23
Slide 23 text
Wave Shaper Node
https://developer.mozilla.org/en-US/docs/Web/API/WaveShaperNode
const waveShaper = new WaveShaperNode(context);
waveShaper.curve = makeDistortionCurve(amount1);
function makeDistortionCurve(amount) {
const k = amount * 150 + 50;
const n = 8096;
const curve = new Float32Array(n + 1);
for (let i = 0, x: number; i <= n; ++i) {
x = i * 2 / n - 1;
curve[i] = (Math.PI + k) * x / (Math.PI + k * Math.abs(x));
}
return curve;
}
Slide 24
Slide 24 text
Biquad Filter Node
https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode
const toneNode = new BiquadFilterNode(context, {
type: 'lowpass',
frequency: 350
});
toneNode.frequency.value = tone; // 350 - 22050
Slide 25
Slide 25 text
Cabinet
Slide 26
Slide 26 text
Impulse Response
a short sample with
impulse characteristics record
Slide 27
Slide 27 text
Convolver Node
https://developer.mozilla.org/en-US/docs/Web/API/ConvolverNode
const convolver = new ConvolverNode(context);
fetch('impulse.wav')
.then(response => response.arrayBuffer())
.then(buffer => {
context.decodeAudioData(buffer, decoded => {
convolver.buffer = decoded;
});
});
Slide 28
Slide 28 text
Equalizer
Slide 29
Slide 29 text
Three Band Equalizer
Bass < 500 Hz
Middle ~1500 Hz
Treble > 3000 Hz
Slide 30
Slide 30 text
Biquad Filter Nodes
https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode
const bassNode = new BiquadFilterNode(context, {
type: 'lowshelf',
frequency: 500
});
const midNode = new BiquadFilterNode(context, {
type: 'peaking',
frequency: 1500
});
const trebleNode = new BiquadFilterNode(context, {
type: 'highshelf',
frequency: 3000
});
Slide 31
Slide 31 text
Reverb
Slide 32
Slide 32 text
Reverb Graph
Channel
Splitter Node
Channel
Merger Node
“Dry”
Gain Node
“Wet”
Gain Node
Delay Node
Biquad Filter
Node
Convolver
Node
Slide 33
Slide 33 text
Reverb Nodes
https://developer.mozilla.org/en-US/docs/Web/API/ChannelSplitterNode
https://developer.mozilla.org/en-US/docs/Web/API/DelayNode
const splitter = new ChannelSplitterNode(context);
const delayNode = new DelayNode(context);
const toneNode = new BiquadFilterNode(context);
const convolver = new ConvolverNode(context);
const wet = new GainNode(context);
const dry = new GainNode(context);
const merger = new ChannelMergerNode(context);
Slide 34
Slide 34 text
Connect Nodes
https://developer.mozilla.org/en-US/docs/Web/API/ChannelMergerNode
splitter.connect(delayNode);
delayNode.connect(toneNode);
toneNode.connect(convolver);
convolver.connect(wet);
wet.connect(merger);
splitter.connect(dry, 1).connect(merger, 0, 1);
Slide 35
Slide 35 text
Connect line to destination
Gain Node
Distortion
Wave Shaper Node
Biquad Filter Node
Cabinet
Convolver Node
Reverb
Channel Merger/Splitter Node
Delay Node
Recap
Slide 36
Slide 36 text
Rock it!
Slide 37
Slide 37 text
@bobrov1989
https://bobrov.dev
https://github.com/vitaliy-bobrov/js-rocks
https://bobrov.dev/js-rocks/