okay right now it should be better so I
know you're already tired but who of you
have some rock'n'roll metal grunge
whatever come on
okay let's try to make some noise
[Music]
[Applause]
[Music]
[Applause]
[Music]
okay so this talk I will show you how to
sell your amp and process music life
your instrument with JavaScript
so before we start few words about
myself my name is Vitaly I came from
Poland and Here I am working as the
leads of 20 engineer at company called a
pump systems
I also Corgan eyes in angular Brussels
meetups and disclaimer I'm not a
professional guitar player so don't
judge me it's just a hobby and I used to
play punk rock groups when I was a
teenager you can find me on Twitter and
you can read my blog actually here I
started to blog posting some information
regarding this topic that I will show
today
okay so Web Audio yeah it's exists for a
while in web standards most of browsers
get a good supports of it so what is it
actually it's provide us with the
context with which you can create a uni
directed graph with audio knows those
audio notes could be get together to
create some effects create generate some
music or process live stream how it
looks like we have some input in my case
it's guitar it might be generated sound
with oscillators and we have an output
our speakers headphones whatever and
between that we have some nodes
connected these nodes we can achieve
some effects and audio processing if you
take a look at real guitar stock we have
a guitar we have some amplifiers
cabinets and between them we have some
stone boxes with some effects like
Kouros distortion and so on
so how we can actually connect
instrument this could be applied to any
instrument actually that could be
connected to an order cards but in my
case is Peter okay first of all we need
to create audio context audio context is
the main object that allows you to
create new nodes connect them and put it
to some destination so we create this
context
after that we request some stream in and
we will use navigator media devices and
we are requesting audio in my case we
you can also request video but I don't
need it that is why I don't show it and
textually you can catch errors if you
don't grant permissions to audio or
something against wrong so it's optional
that's fine but hey wait I got some
audio constraints for you what I mean by
that so that's completely fine you can
request audio using just get media audio
true but by default most of browsers
apply some post-processing for input
stream it's completely fine for
microphone for chatting application like
hangout Skype but for web borders they
will reduce amount of our signal which
we want to use so instead to passing
just through we need to pass some
constraints to remove echo cancellation
after gain control noise suspension and
provide some latency hint doing that we
get the most clean sound as we can from
our instrument after that we get some
stream we have a context and we need to
connect this stream to destination
context destination is a default output
selected in your system
for example now it should output to the
speakers one more thing
usually we need to control the amount of
volume to not hurry our neighbors for
example at night so how to do this we
can imagine the audio signal as sine
wave yeah and the amplitude of this sine
wave is actually the amount of volume
for the sound so multiplying it or
dividing by some numbers will reduce the
amplitude and reducing the amplitude we
reduce the amount of volume how it looks
like in code so Web Audio provide us
with gain note we create an again node
and then we can apply again value the
value of zero means that our sound
completely muted the value of one means
that the sound not changed the volume is
as it is so by putting the values
between zero and one we can control the
amount of volume or even more we can add
add some values more than one and
amplify our sound so when we create such
a node we need to connect our graph so
we have source we connect it to gain
node and after that connect to
destination so let's let me show how it
looks like
in real life okay so I connected clean
sound so it's nice and what
[Music]
and they have this master volume control
so now it's a value of one and I can
reduce it to make it
or even muted completely no sound and
come back to one okay let's miss fish to
slice again okay
so the first effect I want to show how
to create with a buff order is
distortion distortion often reused in
some rock music metal and so on
so actually it's a group of effects that
change our input sine-wave
with some transfer function and this
process called wave shape so bit of
history about this effect back in test
times the equipment for guitarists
wasn't there bad is it good sorry and
when it was broken
for example speaker was cut off the
sound became disordered but get replaced
while like this effect so much so they
started to destroy the speaker's
themself that's how it was born only
after few years the first the
semiconductor effect the in form of
pedal was done by different producers
but now you don't mean that
you can use just Web Audio okay as I
said before distortion is a group of
effects it contains of overdrive
distortion and fuss so what is the
difference between them again we can
imagine how a sound wave as a sine wave
and we apply wave shaping a function to
our wave until become more square doing
that with generating harmonics what is
harmonic I will sound of some instrument
for example it doesn't have only one
frequency it has one a domain frequency
and a bunch of harmonics as a
frequencies with possibly lower
amplitude and during wave shaping we
increase amount of harmonics so our
original wave become more richer and
harder
so difference between overdrive
distortion and fuss if we will see on
Soundwave after we apply transfer
function of different types for
overdrive it will be more curved for
Distortion
slightly more Square and for fuss it
will be almost completely square so this
such changes in a wave shape we be
reducing or increasing amount of
harmonics we are to original sound and
more harmonics we add to it
more effect under sound we achieve how
it looks like with web order so we have
a know some web shaper note provided by
Web Audio why it's awesome you just
provided a lookup table with values
calculated beforehand for harmonics
which of transfer function and Web Audio
applies it using fast Fourier transforms
to your source input so most of hard
work a hidden and done for you by Web
Audio API so we creating some wave
lookout table and assign it adds a curve
for way shape or node so how look this
function would be so we have some amount
of gain we want to add we have number of
samples for a lookup table and we filled
with our transfer function so basically
we apply floating 32 array to a curve
and that's it after that usually those
effects distortions they have at least
one control for tone and again hard done
hard work done for you you have big vat
filter note it a basic node for creating
different types of filters so we
creating a low pass filter low pass
filter except some frequency and
everything below that frequency will be
passed through every since that hires at
this frequency we
we'll be cut off so Morgan's this
frequency we're reducing or increasing
the amount of high frequencies mid
frequencies and low frequencies and the
interesting thing that real stompboxes
also at least some of them using such
kind of low-pass filtering but mate with
some reduced capacitors and resistors so
basically we're doing the same but in
the code in a different way so let's try
to see what the difference between
OverDrive's distortion sent so first I
have some overdrive enabled yeah
[Music]
could we make it louder slightly
[Music]
so here I apply and the most soft
transfer function I can so it's just not
the big difference between sound and we
add in not that much harmonics but let's
try another one this more harder
function
[Applause]
[Music]
[Applause]
[Music]
[Applause]
[Music]
so our sound is more harder and when I
change in the amount of effect I
statically generated cupcake so we can
use more amount I just recovered
recalculating this lookup table after
yet
[Music]
[Applause]
and here we have tone control yeah Oh
way up we have all frequencies no of our
guitar frequencies reduced
[Music]
it sounds slightly harsh and if we
reduce the amount of frequencies it will
be some modest sound
[Music]
so again with just one filter we change
our sound
different ways
[Applause]
those bows OverDrive's
now let's try some dystocia
[Music]
so our sound became more harder more
heavy and that's the basically
difference between overdrive and
Distortion
let's try another one
[Music]
okay and the last one fuss
[Music]
more heavier and more like digital
because this our sound shape become
almost square
[Music]
and again we have tone control but in
this case is slightly different control
variant
[Music]
we can make it almost
[Applause]
okay that was some distortions okay but
to make our sound more closer to real
devices we would like to create some
cabinet or amplifier simulation and we
can do it using special thing called
impulse response
what is impulse response is a short
sample containing just few milliseconds
of a sound of a real device
I mean speaker of Geezer cabinet so if
you think about you can think about it
like photo photo is a snapshot of fly
light at some point of time impulse
response is the same but applies for the
sound so it's a snapshot of some sound
in some space at some point of time so
and again Web Audio save us and hide a
lot of complicated work behind the
scenes we can use convo or not we create
this can louver node then we load this
impulse response file we create a ray
buffer free then we decode it and apply
this buffer to a lot so all the sounds
that will go through this controller
node will be goes through this impulse
response so it will be adjusted
accordingly to our sample and next thing
usually amplifies has at least three
band Equalization so to have more
control over our tone stack on either
cabinet we want to create some 3-band
equalizer so basically we need to split
our frequency range into three bands for
everything below 500 gals
it will be for bus control everything
above 300
we'll go for treble control everything
in the middle will be middle how it
looks like in code again we using big
fat filter node but now we using another
types of them for our bus node we using
low shelf filter wall shelf filter takes
a frequency and everything below that
frequency will be attenuated or
amplified depending on again value we
did for it so we can adjust the amount
of those frequencies the opposite thing
we do for high frequencies with high
shelf filter so it takes the frequency
and everything above that frequency will
be updated or amplified for middle range
we using peaking filter so it takes the
middle frequency of our range and
everything inside this range will be
amplified or attenuated okay let's try
it out
and try to see the difference between
different cabinets
okay
let's start for the screen so here I
mean
turn off any cabinet emulation now
[Music]
minutes
[Music]
then I can switch to another one for
example
it sound differently so those samples
made from real devices versus darker
sound maybe it won't be the possible
without in any effect so let's enable
some effect so now we have really really
dark come as you are let's try something
more whiter
[Music]
let's try more lighter one and let's try
ours we went equalizer so let me reduce
the amount of needle domes damnit
[Music]
or if your increasing it will be more
bright we can increase the amount of
bass
and trebles okay
let's switch back to the slides
and the last thing I want to show is a
rib abrasion what is the reverberation
is the effect that tries to simulate
some spaces for example now we are in
hole yeah and this space has its own
acoustic properties
so this reverberation we can emulate
such spaces like holes football court
for example or something else is this
effect would be slightly more
complicated so basically we want to
split our source sound into two lines
there wet one this effect and dry one
without effect
just clean sound so for wet tone we will
create some GA note actually when you
speaking in some hole as the sound goes
to the back wall and come to you back
with some delays that creates for us
meaning of the space inside some rooms
after that we will filter it slightly
and again apply convolve or not but now
we will use the impulse responses from
different places usually this sample is
just some clap few milliseconds of a
clap in different space and a plant can
convolution on it we will get the
simulation of the space then we will
merge back or wet and dry tones and
reducing the gain on wet and dry we will
control the amount of effect we want to
apply to the source so how it looks like
first of all we create splitter node to
split our Channel sound into two
channels then we are do a note tone note
with big fat filter controller note and
the gain control to control amount of
effect sound
and try not to control the amount of
clean sound and we create major to March
it back after that we need to connect
them so splitter connect to do a delay
to tone tone to convert convert wet and
back to measure and in the second fly we
connect dry and back to merger okay
let's show how the reverberation changes
the sound okay let me try this preset so
firstly I will show how to sound without
reverberation yeah it's kind of so I'm
not that good at source but anyway
is a turn table
why is the reason all sound
is there any input
okay
now yeah okay let's try it
[Music]
okay
this was the variant without regression
let's add the reverberation emulation of
West
[Music]
okay and another example here I will
show again without your vibration and
twist and I will simulate how this
vibration
[Music]
[Applause]
[Music]
okay and now we will try to break
[Music]
and we can adjust the amount of space we
want to simulate visit away time
so let's write for example there 10
milliseconds
[Music]
okay and let's switch to slides back so
should recap what we learned today
so we learnt what is web audio how to
connect your instrument to process it in
real time this Web Audio how to control
amount of volume using gain node how to
create basic distortion effects using
wave shaper and controlled tone of
effect using big wad filter node how to
simulate real guitar cabinets and
amplifiers using curved over node how to
create reverberation effect using merger
splitter and delay nodes and that's
basically what I have be 10x engineers
but better to be a rock star engineers
using Web Audio so write out all the
code available on github the app is open
source I'm open to pull request is we
want to create a new effect or fix any
issues for example mobile version it's
hard for me to create right now and all
these controls so check it out thank you
very much for coming and enjoy a
conference
[Applause]
[Music]