[Music]
I'll raise rock
oh I don't hear it
I'm ready to rock okay so let's go
[Music]
so yeah every city occurred voice
precedes by JavaScript and actually Web
Audio stuff so before I go and deep how
to make it I just introduced myself so
my name is Vitaly I'm Ukrainian who
lives and working in Poland nice city
called broad Slav I'm working for a
company called open systems
I'm Corgan izing and go abroad Slav
meetups here and yeah I have a hobby to
play a geezer time to time and to relax
you can follow me on Twitter this is my
handle and my personal blog so web audio
what is that how we can use it actually
Web Audio is a uni directed graph that
contain out there notes so what is
actually uni directed graph it's a bunch
of dots connected with some directed
arrows basically we have some input or
source of our sound and we have an
output between source and output we have
some nulls that's going to add some
effects processor audio our audio
analyse it whatever and we have the same
four meter stack we have an input our
instrument and we have output speakers
or some stack of speakers and between
those we have some effects amplifiers
cabinets distortions OverDrive's all the
stuff so first of all how we can connect
our Geezer to Web Audio to do that we
need first of all create an audio
context so we create in our audio
context and is the main point where we
operate in audio graph then very
question is in
idea using navigator media devices and
if you want to use only audio video
question audio that's easy yeah but it
won't be that easy so wait for a moment
to use an instrument as a stream as I
said be requesting audio true getting
user media but to clean up our sound we
need to use some constraints because by
default browsers apply an echo
cancellation noise suspension after gain
control and some latency to our input so
to have the clean input we need to use
those constraints and this is last step
we creating a media stream source that's
the stream that goes through our inputs
audio card and then we connect in our
source with context destinations that
our speakers or another destinations
that we can choose in our system so when
we connect something we want to control
the volume how loud it is how to do so
we have a special mode gain node and we
can imagine our sound wave as a sign and
if we divided by 2 or multiply by 0 5 we
will get the smaller sine wave and the
amplitude of this sine wave actually
means our volume how loud our sound so
to reduce sound we need to divide by 2
to increase sound we need to multiply by
some number so house looks in cold
recreational gain node using constructor
or factory method on context and after
that we can apply value we use gain node
gain where
you and set up zero will mean our sound
will be muted one is it's normal and if
it's higher than 1 it will be louder
than original input next we need to
build this graph so we have our source
then we connected to gain node to
control volume and connect again to
destination so let's try it how it looks
like okay let's do that
not it's not visible okay let's desert
[Applause]
okay oh that's better and
okay
now it's better
so yeah I have an application and I have
connected source here and we got this
green sound
[Music]
and I have a volume control so I can
make it not the cloud
[Music]
so yeah it was the basic stuff actually
as this manager I wrote myself some time
ago so okay the first effect I want to
show is this social so you can't imagine
any rock music without distortion sound
and basically what is this ocean it's a
group of effects that shaping our way
input sound with some function so what
is this group of effects we have few of
them overdrive distortion and fools and
all of them still called fools I want to
tell sorry how it was invented so in the
past the amplifiers wasn't that good as
they are now and they were broken
sometime so who if speaker was broken is
that to produce disordered sound so some
people started to distil destroy their
amplifiers themselves to get this sound
before it was done by some transitions
and so on now you don't need to do that
you can just use Web Audio for that yeah
don't destroy speakers so how its look
like again we have any input that's
actually a say a sine wave yes and we
apply some function to it to make it
more square so this mu squared sound
gives out our sound to be disordered for
example we can apply that function that
is here but what's the difference
between overdrive distortion and food so
the difference is how smooth is that
curve overdrive is usually something
lamp based so it's more smooth curve
distortions have some more harder one
and fools basically sounds like
something ditional it's almost flat sine
wave
so to shape our input in way we want it
we can use wave shape or node we can
create in and apply a curve and curve is
a floating 32-bit array containing
numbers that will be applied by Web
Audio and reshape our sound so we
creating some array we loop sweet and to
plan our function then that function
will be Bill rebased on our input to
achieve the desired sound also we want
to control tone or even create some
equation for our effect to create simple
tone control we can use big wide filter
node this type of flow paths low-pass
big glass filter means that everything's
everything that goes down to some
particle frequency will be cut off from
our sound so controlling this frequency
of this filter from lower 350 to highest
we control it if our sound will be
higher or lower west right
so I have a bunch of distortions here so
now we have a clean sound yeah and let's
try some overdrive
[Music]
and let's try to use some tone we can
make it darker
and white sir
this kind of classic overdrive let's
make some some crunch
[Music]
okay let's switch to some distortion
more heavy sounds
[Music]
okay I have something more heavy it's
quite noisy but it sounds like something
matter
[Music]
yeah that sounds really nice but it
still sounds digitally so to make it
more realistic we need to simulate
cabinets or amplifiers so to simulate
amplifiers we can use something called
impulse response so it's a short sample
really just a second or even less that
captures the impulse response from some
real device
imagine this impulse response like a
photograph of the sound so like
photograph is taking a snapshot of some
light at some moment the same with
impulse response we have a snapshot of
something in real life so how to apply
it in Web Audio we can use special mode
can go over node and it's actually
really awesome because that node hides a
lot of complexity it gets this impulse
response for you and applies it via fast
Fourier transformations so all heavy
work was done for you by controller node
so you just fashioned an impulse
response then converting it to array
buffer then this array buffers need to
be decoded by audio context and applied
as a buffer for controller also usual
amplifiers has equalization at least
romantic visor so we also want to do it
so what is sexual is romantic reviser we
have bus is everything that goes behind
500 we have me do that takes from five
hundred to three thousand and treble
that takes everything highest and three
thousand gates
and we have special notes for that in
Web Audio we can again use big fat
filter loud but different types of
filters now so region wall shelf what
does it mean it takes everything that is
above the frequency and cut its off
beacon is take the nearest range from
the provided frequency and amplifies it
high shelf it takes everything that
above some frequency and amplifies and
cut off everything behind below this
frequency let's read
okay so I have is the faucets also kind
of crunchy amplifier we can turn it off
it's clean so it sounds more realistic
and we can apply different impulse
responses to get different kinds of
amplifiers simulators and first-rate
musical Iser who has cut off all middle
frequencies
[Music]
or increase them with treble
[Music]
okay let's reset it right now and try
distortion without amplifier first
[Music]
let's apply our controller notes right
now
[Music]
so it's make our sound more realistic
yeah and the icing usually when some
company doing sound record in they
applied ifficult reverberation to add
some volume to the record room so
basically we usually to hear some sounds
more realistic we imagined it in some
space in room or Hall or something else
so how to do this whether it's more
complicated effect to implement so
basically we want to split our input
into few two channels just what will be
clean Channel and untouched completely
we will mix it with the modified stream
merging it again at the end and on the
second stream we want to slightly g'way
our sound to express the times that gets
for the sound to go to the walls and
come back to you so it's trying to do
the same thing that in real world then
we apply some the tone control this big
fat filter and apply special impulse
response you can not only have impulse
responses for amplifiers you can have it
for some spaces right rooms or concert
halls holes or theaters so then we get
in this chain and merging it back to one
stream and we can switch how many the
anti sound we want and
how many of modified we want so do that
with mixing it out and achieving more
realistic sound that's right okay so now
we have reverberate that sound
[Music]
and we can increase delay to immolate
response from some space let's try some
hole okay and if you combined everything
together we can achieve some white
Lydian guitar sound ready for solos
[Music]
right listen for it without libration it
sounds without volume like
[Music]
let's try something more
[Music]
or we can do something like that
[Applause]
[Music]
[Applause]
[Music]
[Applause]
so yeah as I told you before we creating
all these vows for reverberation click
create channel splitter first then we
create in the delay node we creation
tone note this big fat filter the
creation can go over and gain nose for
increasing make up our come over
afterwards then we create another gain
node that will be used in parallel for
dry sound and we created merger to merge
everything back then we need to actually
build this graph so we connection
everything chain by chain splitter with
the lead away with don't always come
over and over we sweat and to merger and
in parallel we connections right again
note if we connect in splitter to it and
then dry no to merger and that's how we
achieve it so should recap what I showed
today so I showed first of all how to
connect your stream source to
destination how to control volume using
game node how to create distortion
effects using wave shaper note that
because filter for tone control I showed
how to emulate cabinets with controller
nodes and how to implement reverberation
using channel measure and splitter delay
nodes because filters and making
everything up so just try it at home
every all the code available on github
application is deployed on github pages
as well try it and rocket thank you for
listening
[Applause]
[Music]
[Applause]
[Music]