ah ah there I
am
cool all right well a little almost 50
minutes later but we had some uh Power
issues so
welcome good that you can be here um I
want to start with a little story about
a small Japanese company and maybe
someone knows this but probably it's
better if
you oh nice it updates there but it
doesn't update there
now oh my God one of those days now it
is right Roland Roland is an u a
Japanese company that was founded in
April 72 in Osaka Japan only a month
after I was born so you know my age now
as well and they are well known for
creating synthesizers Digital P pianos
uh DJ care and amplifies stuff like that
and they had a bright idea in
9080 they launched this one the Roland
Rhythm composed TR 808 and that was the
first say drum computer that you could
program instead of having to use
presets and it was a great success only
not in 19980 but more like in the late
because then hip-hop artists would would
use it to create music with it because
in
um in in the early 80s when they sold it
it was it was there for
about uh I think they sold it for about
12200 I'm I had to calculate it in
Danish chromes but I not sure please
calculate it for me um but they only
sold about a thousand or so so a few
years later you could buy them for 100
Jus um but they uh they had a really
distinct sound in
it this one the
cowbell and you probably know a song
that's still using that cowbell do you
know this
one
anyone yes I Want To Dance With Somebody
Whitney Houston yes um it was very
popular to use later on but in the early
' 80s it was nobody wanted to have it
but Rand thought well
1983 let's create a new
one let's create a TR 909 also known as
the
909 and that was really popular as well
but in the '90s not in
19983 um it was was different they use
samples uh real samples of uh of
instruments to to use that uh but again
it was ahead of his time um I know a
producer and DJ uh from the from the
states Tyreek Cooper in the late 80s
bought one for
50 and made a lot of records with it um
but you know songs as well you might
need might not be as old as I am but you
know the songs for instance this
[Music]
one
[Music]
anyone almost bump up the gem
technotronic yes from Belgium uh this
one say if you know
it V Madonna yeah also not in the 1983
but later on this is used and want to
learn
it tell
me it's on the tip of your tongue I can
see it to unlimited correct we still
don't know where they Belgium or German
or Belgium or Dutch but I'm from the
Netherland so I'm saying they're Dutch
um so those were very distinct sounds
and it were sounds that I grew up with
um
and me that's I'm
again it has some lag oh no we have to
go hold
on is it still playing
no and me that's rowdy I'm from the
Netherlands um and I thought well AI is
high high in Hip now let's let's
introduce let me introduce myself with
AI so I asked Chad tpg who am I
yeah no one okay thanks I'll do it
myself
then there we go um this is going to be
a tough night for me um I'm a front end
Focus senior devops engineer at the
large insurance company in the
Netherlands um and I built my first
website in
1996 with HTML CSS no JavaScript I did
use some Pearl on the backand and I used
to be a club DJ in the late 80s and
early 90s and that's my love for Euro
dance hip house uh house music in in in
general um we're going to talk about web
audio API because I want to recreate
that feeling I had in the in the early
90s and the web audio API is a way is a
JavaScript API is a way of creating
music or playing music or sounds on your
for
device it's well supported fortunately
on all the major
browsers and to do that you first need
to create something that's called an
audio context that's like the the mother
of all things and that's pretty easy to
do if the screen
updates all right sometimes I have to go
back and forward unfortunately so what
we can do is just create a new audio
context but that audio context doesn't
do anything by itself what we do need is
an oscillator node an oscillator node uh
will generate that
sound and the way we are creating it is
like new oscillator node and connect it
to the audio context but it needs two
things first of
all first of
all
it's one slide behind that's nice first
of all it needs a frequency and a
frequency is nothing more than the
number of cycles that is going on in a
second so it's uh what we call
Herz um and oh
Jesus there we go uh so I'm setting a
frequency of 440 and 440 Hertz is the C
note on uh any um piano for instance
but we also need something
else and that's a waveform and a
waveform determines how that sound is uh
coming to your ears let's say and there
are multiple multiple
ways for instance we have the sign and
the sign is smooth it's going up and
it's going down in the same Rhythm and
this is usually the most Pleasant sound
to listen to or we can have a
triangle that's the same uh way it's
going but it's more steeper and more
etchy we have the square as
well that is going down rapidly and
going up rapidly as well I'm going to
show you how that sounds and we have the
Sawtooth that's um going rapidly up or
steadily up and rapidly
down all right so this is what we feeded
and the next
thing the next thing we can do now is
connect that oscillator to the
destination of the audio context and the
destination is in this case speakers
above us and we're going to start it and
we have to stop it if it don't don't
stop it it will continue until you
restart your computer so I'm setting
here well after 3 seconds let's let's
stop
it this is going to to be a long
night all right I'm switching that goes
well good you can see I have the same
code here now and if I hit
play I get a sound I can uh increase the
frequency it's getting annoying but if I
make it a saw to for
instance I make it really annoying I can
go on all night with this just Anno to
annoy you but let's let's continue
so that's a way you produce a
sound yeah make a photo of my
Agony there we go uh the next part we're
going to talk about is the web media API
and the web media API makes it possible
to connect media
devices um like a keyboard or a sequence
or something and have that work
interacting with your device like my
laptop and it's also buildin it's a
javascrip API it's built in the browser
support however Safari is like we don't
like Mei that's
fine it's not something that you would
regular uh regularly use on a website
it's it's like for geeking out so it's
okay so I would like to use this one
this is a media device it has keys it
has pads it has dials or knobs or
however you want to call it and
that's and if it
works drops again there we go uh because
we want to use it in the browser and
Safari doesn't support it I just have an
if statement there whether it's media
access uh request media access is
supported or not I request media access
and if I get it I go to the success
method here the success method um gives
me all kinds of information about this
device for instance I can listen to the
state change event and that means when I
plug it in or plug it out I get in this
case the manufacturer and the name of
the
device well that's that's nice I can
display that but doesn't do anything
right more importantly I can listen to
the inputs that I'm getting here uh this
device has only one input it's the
output of device but it's the input put
in my laptop but there are also uh media
devices that have more inputs and
outputs as well so I'm listening to the
input there we go so for each input in
this case one I'm going to add an event
listener on the mini message as soon as
I get a med message I want to do
something with it and I'm doing that
through handle input
method and this is how a media message
looks like it's an array of three
integers the first one is the
command um that number depends on the
media device you're using in this case
the this one is using 144 if I press the
key and if I release it it's I think
128 the second one is the note or the
key that I'm touching that could be also
a dial I'm uh turning for instance and
the last one is the velocity so how hard
am I pressing that key or how gently am
I pressing that
key and if you release a key the
velocity will always be
zero right let's have some fun with
it let's switch to the
browser and connect this
one what I did is I created a website
there's a link at the end where you can
also uh do this without medy keyboard so
I can just
hit no not in this case in a different
demo you can do that in this case it's
all about registering the medy commands
so if I hit this key you can see it's
144 that's on it's key 48 and I press it
really hard probably because I'm a
little bit
agitated um but I can do it now this is
eight or I can hit the pad with 99 or
fiercely 127 so the lowest value is zero
the highest one is
127 and also if I turn up the dials you
can see the number stays the same of the
key but the velocity increases or
decreases with that
knowledge we can do other stuff this is
my handle input and in as I said that
input is an array of three integers so
the first one is the command the second
the note the third one the velocity and
based on the command so it's a 144 I'm
saying oh it's press so I'm uh calling a
method called node on and if you release
it you get a 128 and it's node off it's
good to
know the node on um method itself gets
the node and the velocity because I want
to know how hard you press it pressed it
what I now can do
is create that oscillator
again and I also need to create
something called a gain so that's the
volume of that oscill
oscillator then to be able to change
that I also created something called in
this case a veloc I call it a velocity
gain to be able to influence the
oscillator gain
itself
and how do I do that well because it's
going from 0 to
127 I calculate the Velocity in a value
that's between zero and one all the
values we need to work with are between
uh in this case zero and
one I put it to a sign for the nice uh
the nice feeling and I need to calculate
a frequency because I do get a note but
I have no idea what frequency that
should
be and there's some magic like lemon
said he can't calculate me neither so I
just sto it somewhere but trust me it
works and what I also have to do is uh
make sure that I have an array with all
the notes that are currently active
because I want to have some information
later on from it so that's why I'm
putting it in an array here an empty
array when we start and then I can start
the oscillator and that means make the
note make the noise the not off in
another way is I'm going to find in my
uh array I'm going to find that note
again because I want to make sure that
the sound
stops but if I do that immediately you
will hear clicks if I say oscillator
stop it it will click so what I'm going
to do is I'm going to uh make sure that
it gradually goes to zero in the
end so that's why we need to have to do
this and to be able to stop it and
disconnect I even wait 50 milliseconds
to prevent that
click and then I delete that
note I know it's a lot of code it will
become easier but I want you to show you
how complex it can be at this point all
right let's make some very loud nois
so let's go to the
browser and go to
synthesizing and here you can play
around with it yourself so I can click
on the
notes um but what I want to do is I
connect to the medidi device and you can
see it's the Akai mpk mini3 so if I hit
a note here now you can hear it if I hit
it
harder oh
I'm going to break them tonight then it
will be hard and you can see the
percentage on the right on the right
hand side um but what I also can do is
change the um uh waveform so if I hit
this
one we get a very
annoying but if I dial this one I can
make my um comparison Hertz even higher
so
until the point it's very
annoying um I can still hear it
fortunately but if you're younger than
me then you can definitely hear that uh
that noise but it's all nice and fun but
that's not really what I'm
about I want to have drums that's what I
like I want have pumping house and
techno
drums we can do that as
well and if I go to the demo there
synthesizing
drums I can have a
kick or a
[Music]
snare but have a look at the amount of
code I had to write for that this is the
kick I have a distortion curve I have to
generate some wide noise I have to play
it I have set it to a triangle and by
the way that's only the kick right now
we go to the snare it's even
more that's no
fun only to get some
samples so a better way of doing stuff
is using files MP3 files or what I
prefer wave files they've been around
since 1991 they're uncompressed they
have great quality audio in
it I shouldn't use this one I
think yeah that works better um what I
want to be able to do is well hit these
pads that I have on this
device and have some samples coming out
of
there the way to do that because I also
want to be able to do it in the browser
without the medy device is I Define some
buttons and I gave it a data Note and
that note the number corresp corresponds
with the note I'm hitting on the
pad and if that button is clicked then I
want to have a wave file called the 999
kick being loaded so that's why it's in
data attributes
here that one that kick I love
[Music]
it to do that I have a CER selector all
on all the buttons I have there are
eight and for each one I'm adding an
event list on the
click and what I will do is I will load
that wave file and play it well loading
and playing I still need to write some
code for that and I want to do it on
this one as well so I need to do
something extra we had that handle input
for the media uh messages we're getting
so I'm going to grab the note and
because I wrote data node is 16 I can
now relate with the query select and say
well just click it so I'm actually
clicking here and then make sure it's
clicked on
screen but we have to load and play the
file as
well loading is nothing more than
fetching the wave file like you would
fetch uh um an an API or something but
you're fetching it locally here
now from that um wave file I now I have
to create an array bu far and that's
been
decoded so it it's available for the
browser the play wve will get that audio
buffer will create an audio buffer
Source
node connect it to the destination so to
your speakers and then it will
start it works but it's a lot of
work let's see if we can make it
work so I'm going away from this
one and go to my mey sampling so I can
hit it it in the
browser but I prefer to use my media
[Music]
device I can k out all
day but still I have to have that Rhythm
to keep doing that but it's it's loading
pretty fast turn
the but there's an easier way this this
is a JavaScript library called tone
JS tone JS makes it easier to work with
the web audio API we had to go go
through all that code
and Agony of writing a lot of stuff and
figuring stuff out if you use tone JS I
can do this I can say a kick is a new
tone. player with this wave file and
send it to a destination and then say
start so all that code I wrote is uh
brought down to only
this well I got my sounds now but I want
to recreate that feeling at a high head
in the '90s with the sequencers with a
909 and a sequencer uh if you don't know
what it is it's actually saying well I
have a pattern of kicks or high heads or
whatever you want and it's repeated over
over and over and over
again and it's pretty fundamental
nowadays back in the days but also
nowadays in creating
EDM remember the
909 well if I want to buy it I have to
pay 7,000 Euros or dollars nowadays it's
very hard to get by because everybody
wants one um so I had to go for
something second best and that's the
Akai fire that's this
one um if if you look at the
909 where are
you no other way around if you look at
the 909 you can see it only had one line
so you had to switch saying okay I
program my kicks now I Pro program my uh
cowbell or whatever you want uh this one
has four so that makes it a little bit
easier and I recreated this say this
more or less this inside of the browser
so so I have for instance on top the
kicks and I have 16 positions I can
program the kicks
in there we go and those positions are
nothing more than
checkboxes I style them nicely to look
them like the uh the keyboard or say the
sequencer but it's nothing more than uh
checkboxes and what we do if we get a
medy message in uh where the velocity is
over zero so I'm hitting something I'm
not releasing something it will look at
that note inside of uh the sequencer and
will click it so make sure that check
mark is marked is
checked and what I can do now is I can
have the sequencer repeat itself over
and over over again I've used 16 steps
because I
16 uh buttons per
line and the repeat this is
simplification of it this is only the
kicks this is only the top line the
repeat does
actually uh pretty simple stuff what it
does it will look at is it muted or not
so that's the that's the first button
here if this one is clicked nothing is
being played then it will look whether
one of these is uh checked or not and if
they're checked we given a class of
active so it lights up nicely then it
will go over it and we'll check whether
what the previous ones are and make sure
that um if you pause that the active
class is removed so you don't see uh
that one active being active anymore I
will show you later on it's easier to
see there and what we want to do is that
if mute kicks is not checked
H but the kicks itself is checked then
we will start it and we'll just Loop
over and over and over and over
again um this one is nice but when I was
creating this demo I wanted to use these
knobs these dials for you know putting
panning left left and right um change
the BPM the beats per minute for
instance uh but these ones only give me
uh back one 1 and 127 so nothing in
between so I have to use this one as
well but that's
okay I plug it in as
well and let's go to that
demo so we're now in the
sequencer
and if everything goes
well I first have to initialize it I
have to make sure that the audio context
is available um that used to be implicit
but people make misuse of it just played
music when you uh come came at the
website so that's not good and I'm
connecting the media as well you can now
see I have two devices connected the mpk
that's the the keyboard and the
sequencer which is the
studio and if I now press a button here
you can see it lights up here and it
will light up on the screen as well so
these are
connected let me put it here and I can
now for
instance press a button here below and
start
it maybe add some other
[Music]
stuff
[Music]
so you get the idea it's going forward
all the time and just starts over and if
I'm now going to use the dials and I
have to make sure that are responding to
my there we
go what I can do now for instance is if
I play it again
again I can
see all the lows go there all the highs
go there can you hear that do you hear
the
difference I hope it's stereo
here what I also can do is switch the
pitch of the low
notes make it a little bit faster for
instance
you get the Techno feeling now you're
free to dance by the way if you want
to let me stop that for a bit um but
also created like I can preload stuff
so prin is a slower
song I'm not sure if you're familiar
with the late 80s soul to soul I see
people
like maybe you know this
[Music]
one but essentially what I'm doing here
is I just have Json files that have
saying well these ones needs to be
selected and these one uh these are
not and if I hit this
one hold
on going to refresh this one because I
hate that little Distortion that we're
getting now let's do this
[Music]
one fun part of
uh the web audio API is that you you can
also re record music so if I want to
keep this one I can say well I hit
record here and just mess
around that's fast enough right but you
can see I now created an audio file
here this is not my best mix I'm not at
my best tonight but this is what you can
do you can just record what you just
did and it works with uh microphone as
well so that's also an application of
the web audio
API and the way to do that
is using uh all again the tone U library
I can say new tone recorder I just
started and whenever I want
to I stop it and I get a recording back
and I can create an object URL from that
and pass it through an oh Jesus
sorry
the moment I go back it appears there we
go I create an audio element element so
uh a player and I can say the URL is now
the URL I got from the create object URL
and the browser itself give me the
option now to save
it and in this case I'm just appending
it because it wasn't there I created and
I pend it to the square on
top and if something goes wrong I think
I don't know if you were with the talk
about Murphy's Law what uh yesterday if
something goes wrong it will go wrong I
had a nice web Bluetooth API uh demo as
well but I either lost my heart rate
monitor or it's still in my hotel room I
hope the last one uh but essentially
what you can do with web blooth is you
can connect Bluetooth devices to your
browser and either read data or right
data to
it it's not supported by Firefox in this
case as well like
Safari
um well I can't do demo but I want to
explain how it works what you need to do
is you need to request a device and what
will happen that I can
show
is where we go here we go it will pop up
and will search for a Bluetooth
device if you don't do this like a name
prefix and uh the services you want to
look for what might happen is what
happened to a friend of mine at a
conference when he did a talk about web
Bluetooth he didn't specify for instance
the filter and he got 200 phones trying
to connect to his laptop and and you can
imagine the browser crashed so that's
one of the things you need to be be
aware of so you you want to connect to a
specific device specific service and
then the steps
are quite easy after that one is that
you have to connect to something that's
called a g and that you can see that as
an array of
objects and from that uh server that's
that's array of object you can now look
for the
servers the object and in the end you
want to
have what
I don't drink alcohol but I need a
beer um yeah you get the characteristic
that say the property and with that and
in this case I want to show you this one
a heart rate monitor I put on my arm I
can listen to uh the signals it will
return every time it I think it does it
every second it will uh ra uh measure my
heart rate
and
I so I can't do this one unfortunately I
can tell you what I would have done
because I'm standing here my heart rate
is about 90 95 or so um but yeah to have
some good house music some good EDM you
want to be about 1225 130 so I would
have run up the stairs up and down to
get my heart rate
pumping just imagine it for now please I
can I can run but it doesn't nothing uh
nothing will
change
um another thing we can do um is
analyzing and visualizing data as well
and I have an example of that
one let me go
there I'm not going to explain it
intensively because you can look at a
code it's it has quite some things you
need to do to to get it working um but I
love these Graphics uh when I was a DJ
in that club I was about 16 years old or
something and the club owner gave me the
key never give a 16 year 16y old a key
to your to your Club um but it made for
me I uh I didn't have all the equipment
like uh the turntables and stuff like
that because it was too expensive for me
uh but I could go through uh during the
week just to practice and have some fun
there and I always was mes mesmerized by
The Meters you you would see
there by the way uh there were times I
would leave after 30 minutes as well
because the story goes there once was a
girl that fell down the stairs broke her
neck and died and if you're alone in
that room and you hear uh steps on the
floor above you it's like like I'm fine
I'll be back tomorrow maybe but what we
can do and what I really like is stuff
like
this it will analyze it in real
time so in the middle you have the
volume say on the left hand side all the
different
tones
I can look at this for
hours if if anybody knows this song you
way too old but it was a nice one to
have that
experience all
right
um
I still have to say thank you for
sticking around with me this is probably
one of my worst nights being on stage
but very thank you for being there look
at of how nice and small and Tiny and
lovely I was back in the day I sold my
own mixtapes for
10 gilders back in the day so that's
about four or something
um if you want to look at the code and
and the slides and have a better feeling
about it you can go to ro. code CDF or
use the uh QR code to go directly there
I see a few phones that's nice because
for me I would say there have been
better days but if you have questions we
have plenty of time uh and otherwise go
have a drink I might even
will thank
you
oh and I do have stickers if you want
to yeah that's okay I make it up to you
with uh with
stickers