hello welcome to another video about
audio in p5 yes if you watched in these
other videos you'll know that audio is
not really a thing that I know that much
about but I'm gonna give it a try I'm
gonna look at the reference and examples
and try to make something the thing that
I'm gonna look at and make in this video
is how can I have a webpage listen to my
voice and respond to my voice now that I
just sort of mislead you there on that
that could mean a lot of different
things and at some point we might look
at I might I'd love to make a video that
tries to listen to the words that I'm
speaking and respond to those words but
really all I'm gonna do in this video is
start with the basic simplest idea which
is the microphone of the computer
listens to the volume of whatever sound
is it's hearing and visualizes some
results based on that volume so how do
what do we need for this we need the p5
sound library so I'm gonna click on this
here you can see this is the reference
page for the p5 sound library in
particular I want to use this object
called p5 audio in here something really
important and I should just state before
I even get into this I am using this web
browser called chrome and Chrome and you
know possibly other web browsers have a
security restriction where you cannot
access the microphone or the camera of a
computer first of all without the user
giving your permission so we're gonna
see this we might see a little pop-up
saying oh can I have permission for the
microphone but beyond that the page has
to be hosted through HTTPS what does
that mean well let's go to some website
I don't know google.com you can see here
it says HTTPS and a little like lock
because it's locked it's secure so when
a website is served through HTTPS there
is additional security and encryption
involved if a website is not served
through HTTPS google won't even not
serve through HTTPS let's try to find I
don't know yahoo.com
yeah okay fine let's let's go to
Schiffman net there you can see here
this website is not served through HTTPS
and in which case the sketch that I'm
going to make if you publish it to the
web
it's got to be published through HTTP
which sort of depends on where are you
hosting it and how are you doing it and
that sort of thing okay now the
exception to that is when I run my
examples I'm running a local web server
on the computer just so I can write my
code and look at it quickly chrome
allows you to do any of this stuff with
localhost so while you're testing and
debugging you know it will work we're
gonna find out if it works at least okay
let's so let's go back to the reference
page and let's look at the pieces that
we need so I need to create I want to
create a variable I'm gonna create a
variable called var Mike and I'm gonna
I'm gonna go to my code which is right
here and I'm gonna create a variable
called Mike for microphone and I'm gonna
say Mike equals new p5 audio in so this
is making audio in object a lot of
objects that you can create with a p5
library like p5 dom duchess or p5 sound
fjs have the p5 prefix it's kind of like
a name spacing thing this is not a audio
in object it's a p5 audio in object and
then for to for it to start listening
I've got to say Mike dot start so let's
just run this in the browser I look at
this localhost 8001 Stu use your
microphone this means by the way if I'm
gonna give permission I've really got to
protect myself so I highly recommend
doing this before you click allow click
allow and I you can see some I get some
messages here so it should listening and
I'm seeing this like red record button
there in the top corner so things are
working good stuff right ok so now it's
listening how do I get access to it well
I need to call the function on the Mike
object to say hey could you give me the
current something-or-other right now and
I what I want to listen to is just the
volume so I'm going to save our volume
equals Mike and I think the function is
called gate level it might be called get
volume who knows let's just write it and
see what happens and then let's say
console dot log volume so I'm gonna run
this again and it's like look at that
these numbers now here we go did you
think that learning coding would be
really rough can you say you I think
it's saying that I can't say inside
these numbers that's definitely saying
that so you can see that the volume as I
speak the volume gets live so one thing
we can glean glean from this is that
we're getting tiny little numbers and
I'm pretty sure the range that we're
getting is a number between 0 and 1 1
being a very loud sound
now here the microphones over here by
the way so my microphones here so I go
we can maybe we solve some big numbers
go by there so what I probably want to
do instantly I don't think I need this
anymore
is I could do something like let's draw
an ellipse let's set a background let's
create a canvas let's draw an ellipse in
the center and let's give it size volume
times 200 volume times 200 and we can
run this again and here we go so now as
I speak the circle it really messed up
my hair wearing that wellthank how as I
speak you can see the circle growing and
shrinking and you know I guess I said I
was gonna try to make it like a little
mouth talking so one thing I could do is
I could give it a fixed width and now I
could just sort of talk and I
puppeteering the thing running in the
browser and in a way this is kind of all
I want to show you in this video I mean
you could think of some things you might
do like what if I use lurk go find my
lerp video and smooth it so the the
mouth kind of like opens and closes more
smoothly well if that's the kind of
response you want you know what other
types of interactions and responses
could you imagine doing based on a
person speaking could I play a game like
the lap as I you know pong so when I
speak I think somebody IIT P made this
project actually where you would shout
it to your phone I'm gonna have to look
it up and maybe link to it in this video
so what if I were to speak and as I
speak the one of the paddles moves up
the louder I am or moves down so there's
all sorts of kind of ways you might
apply this particular
analysis and visualize so in the next
video I'm going to move from reading the
volume of my speaking voice or whatever
is going into the microphone and
actually read the amplitude of an mp3
file while it's playing well and at some
point I'll also look at frequency
analysis with that as well okay
see you in the next video perhaps