►
Description
Speakers: Ryan Jarvinen, Jan Kleinert
Getting students to practice piano - or any instrument - can be a challenge, but combining learning with technology and games in an interactive way can make practice more enticing. With a digital keyboard, JavaScript, and the Web MIDI API, Jan created a web app to help her kids practice reading music. Through demos and an exploration of how the app was built, you'll learn the basics of MIDI and the Web MIDI API and maybe a thing or two about reading music, too!
A
A
If
you
want
to
look
at
any
of
this
later,
so
I'm
really
excited
about
this
talk.
This
is
the
first
time
I've
given
it,
and
it's
also
I
think
the
first
time
in
many
years
that
I've
done
that
talk.
That
was
just
totally
based
off
of
a
random
fun
side
project.
So
I'm
really
excited
to
be
able
to
do
this
today.
A
So
I'm
Jam,
cleaner
with
me,
is
Ronnie
and
Jarvan,
and
we
are
both
developer
advocates
at
Red,
Hat
I'm
gonna,
be
talking
through
most
of
this
Ryan's
gonna
be
helping
with
the
demo
and
probably
jumping
in
also
with
more
color.
As
he
goes
he's
a
lot
more
knowledgeable
of
music
in
general,
I
would
say
electronic
music
than
I
am
so.
He
may
have
some
interesting
thoughts
that
I
don't
touch
on
as
we
go
along.
No
pressure.
B
A
The
way
this
came
about
is
related
to
this
picture,
so
I
have
two
kids,
two
daughters
and
they
both
take
piano
lessons
and
what
you
kind
of
can't
see
here
at
the
top
is
this
is
a
web
app
that
their
piano
studio
uses
as
part
of
their
their
practice
and
their
music
theory
stuff,
and
so
it's
really
it's
cool
for
what
it
is.
So
it
shows
at
the
top
that
you
can't
see
right
now.
The
treble
clef
with
a
note
displayed
and
what
they're
supposed
to
do
is
click
on
the
keyboard.
A
A
So
we
got
a
new
digital
piano,
maybe
about
six
months
ago,
and
it
had
MIDI
out
on
it.
It
was
like
USB,
which
is
kind
of
exciting,
and
that's
what
this
basically
came
from.
I
wanted
to
create
something.
So
my
kids
could
practice
like
their
their
note
homework,
basically,
but
by
actually
pressing
the
notes
on
the
keyboard,
so
it
would
really
trigger
in
their
mind,
okay
middle
C.
A
So,
if
you're
like
me,
when
you
think
about
the
word
MIDI,
this
is
typically
what
comes
to
mind
if
we
can
get
it.
Y'all
can
only
hear
it
through
here,
but
this
kind
of
sound
is
typically
what
I
would
think
of
from
like
mid-90s
websites.
Oh
that's,
okay.
You
know,
you
know
what
it
is,
but
but
MIDI
is
not
actually
that
kind
of
sound
MIDI
is
not
sound
at
all.
A
You
can
create
sound
from
MIDI
messages,
but
but
MIDI
is
not
sound
and
it's
not
that
any
kind
of
stuff
that
we're
used
to
from
like
old
PC
games
and
things
like
that.
What
it
is
instead
is
stands
for
a
musical
instrument,
digital
interface
and
it's
a
technical
standard-
that's
been
around
since
the
80s,
and
there
are
several
components
to
it,
but
essentially
what
it
is
in
the
context
of
what
we're
going
to
talk
about
today.
A
It's
it's
a
way
for
digital
musical
instruments,
audio
devices,
computers,
anything
that
can
can
transmit
these
MIDI
messages
to
communicate
with
each
other
and
there's
a
ton
of
things
that
you
can
do
with
that.
But
it's
a
it's
basically,
a
protocol,
a
communication
standard
for
these
devices
to
be
able
to
communicate
this
musical
information
so
to
go
into
a
little
bit
more
detail
on
that.
There
are
quite
a
few
different
types
of
messages
that
that
MIDI,
composes
or
comprises.
A
We
are
only
going
to
look
at
a
couple
things
here
for
the
for
what
I'm
doing
I'm
only
using
something
called
a
channel
voice
message,
and
even
more
specifically,
the
only
message
that
I
care
about
for
this
demo
is
note
on.
So
what
note
on
means
is
somebody
has
pressed
a
note,
so
in
the
sense
of
a
keyboard,
has
pressed
a
key
that
would
generate
this
note.
On
message
and
they've
got
this
144
in
parentheses
here,
because
that's
the
numeric
value
for
that
note
on
event.
A
So,
like
the
MIDI
message
that
would
that
would
come
through?
That's
got
three
parts.
One
is
this
like
this
event?
That's
no
on,
so
that
would
be
144.
The
next
piece
of
information
that
comes
through
is
the
note
number
I
found
this
interesting.
The
note
numbers
can
go
from
0
to
127,
which
is
more
than
the
number
of
keys
on
the
piano
so
like
the
the
notes
that
you
can
represent
with
MIDI
are
beyond
like
what
you
can
do
on
a
standard
like
88
key
piano.
A
So
that's
I,
don't
know
if
that's
useful
information,
but
I
thought
it
was
kind
of
cool.
So
the
note
number
comes
through
middle
C
in
my
voice,
middle
C
is
60,
which
you'll
be
useful
later
to
know,
but
so
60
is
middle
C.
As
you
go
higher
up
in
the
notes.
The
number
goes
up
and
the
same
for
as
you
go
lower
and
then
the
third
piece
of
information
is
velocity
and,
as
ryan
is
demonstrating
over
here,
velocity
is
basically
in
the
sense
of
a
keyboard.
How
hard
are
you
pressing
the
key?
A
So
if
you
gently
press
the
key,
the
velocity
is
going
to
be
a
low
number.
If
you
just
like
slam
it,
it's
gonna,
be
a
much
higher
number
and
so
that,
as
your
you
know,
that
can
be
useful.
If
you
are
then
taking
this
MIDI
information
and
playing
it
back
out
in
some
way
that
can
influence
how
you
decide
to
produce
that
sound.
In
our
case,
what
we're
going
to
be
doing
we're
not
producing
any
sound
with
this
demo
instead
we're
using
the
MIDI
information,
that's
coming
from
the
keyboard
to
to
match
against.
A
What's
on
the
screen
and
see
if
they're
playing
the
right
note,
so
we'll
look
at
that
once
we
get
to
the
demo,
but
so
those
are
the
three
important
pieces
of
information
that
I
ended
up
needing
to
use
in
order
to
do
this
was
in
this
channel
voice
message:
I
want
to
look
at
I'm.
Listening
for
the
note
on
event,
I
don't
care
about
no
off
or
some
of
these
other
types
of
events
that
can
happen.
A
I
need
to
know
what
note
number
was
played
and
then
I
don't
really
care
about
the
velocity,
but
it's
coming
through
for
us
all
right,
so
that's
MIDI.
But
then
how
can
we
get
that
to
actually
work
with
the
browser?
And
that's
where
the
web
MIDI
API
comes
in
so
web
MIDI
API
lets
you
have
MIDI
devices
communicating
with
with
your
browser
and
with
web
applications,
and
the
API
itself
is
actually
pretty
simple.
A
The
most
important
thing
to
know,
first,
though,
is
does
the
browser
you're
using
actually
support
the
web
MIDI
API,
and
this
is
the
slightly
sad
part.
So
this
is
the
request
you
can
use
to
find
the
answer
to
that
navigator,
dot,
request,
MIDI
access,
your
browser
supports
it,
you'll
be
great
and
you
can
move
on.
If
not,
there
are
some
alternatives,
and
here
is
the
current
state
of
the
world
from
can
I
use
for
web
MIDI,
so
chrome
supports
it.
A
Opera
supports
it
and
like
the
amp,
Android
Chrome
for
Android
and
opera
mobile
browsers,
but
nothing
nothing
else,
maybe
that'll
change
in
the
future,
but
that's
unfortunate.
That
makes
it
not
as
easy
to
use
these
things
in
a
widespread
way,
but
there
are
some
alternatives
out
there
now
I'll,
just
I
haven't
actually
tried
this,
but
this
is
what
I've
always
seen
referenced
as
an
alternative
that
makes
this
work
in
in
other
browsers.
A
If
everything's
looking
good,
we'll
end
up
over
here
in
our
success
handler-
and
so
this
is
giving
you
kind
of
a
sense
of
what
this
demo
app
is
going
to
do,
it's
a
scratch,
be
at
there's
probably
much
better
ways
of
writing
this,
but
this
is
what
we're
doing
today.
So
to
start,
we
have
an
array
of
notes,
so
I
mentioned
before
middle
C
is
60,
so
what
I'm
covering
here
is
basically
from
middle
C,
then
C
sharp
would
be
61,
D
would
be
62
d,
sharp
is
63
and
so
on.
A
So
every
like
every
note
goes
up
by
one
that
makes
sense
right,
so
we're
going
up
to
72,
which
is
the
next
C
higher
than
middle
C.
The
reason
I
stopped
there
is
that's
where
this
demo
keyboard
stops,
so
there's
no
sense
in
going
any
higher.
If
we
were
doing
this
for
like
a
full
piano,
you
could
there's
probably
a
much
more
efficient
way
of
doing
this,
but
for
for
demo
purposes.
A
That's
where
we're
at
so
what
we're
doing
in
here
is
I'm
shuffling
this
array,
because
I
don't
want
to
present
my
kids,
the
notes
in
the
same
order,
every
time
or
they're
gonna,
just
memorize,
which
note
is
which
so
we
shuffle
that
then
we're
gonna
draw
whatever
the
new
first
note
in
the
array
is
draw
it
on
a
staff
and
then
we're
gonna
get
our
list
of
MIDI
inputs
I'm
showing
outputs
here
just
so.
You
know
that
you
can
output
to
a
MIDI.
A
You
can
output
as
well
I
only
care
about
inputs
what's
plugged
into
my
laptop
at
our
house.
It
would
be
our
big
digital
piano
here.
It's
this
little
keyboard
could
be
multiple
things
so
we're
we
are
cycling
through
I've
only
got
one
plugged
in
so
we're
going
to
get
our
input
and
then,
when
a
message
comes
through,
so
like
a
key
press,
we're
going
to
get
that
message
and
do
something
with
it,
this
all
making
sense
so
far,
cool
okay,
all
right!
So
we
talked
about
the
note
on
command
here.
A
That's
what
we're
going
to
do
when
we
get
a
MIDI
message,
we're
going
to
look
at
this
message
now:
here's
the
three
parts
that
we
talked
about
the
command
the
note
and
the
velocity.
So
those
are
those
three
pieces
of
data
that
we
get.
We
have
a
switch
statement
with
one
case,
that's
exciting,
but
you
could
build
it
out.
So
that's
why
that's
why
we've
got
that
there
and
note
on
is
1:44.
So
when
we
get
that
one,
what
we're
gonna
do
is
I've
got
just
like
a
little
lake
text
string.
A
That
comes
up
to
say
what
note
was
played
and
then
we're
going
to
go
into
this
note
on
and
that's
where
the
actual
logic
happens,
and
rather
than
printing
all
the
code
out
for
that
here,
what
it's
doing
its
checking,
if
the
note
that
was
played
matched
the
note
that
we
were
at
we
had
displayed
on
the
screen,
so
checking
those
note
numbers
against
each
other
to
make
sure
they
match.
If
they
do
changes
it
to
green,
if
they
don't,
it
changes
it
to
red.
A
My
kids
have
already
given
me
a
feature
request
that
also
needs
a
thumbs
up
in
a
thumbs
down
picture
next
to
it.
We
don't
have
that
today,
then,
after
one
and
a
half
seconds,
which
is
just
to
give
us
time
to
register
the
correct
or
incorrect
feedback,
it's
gonna
display
the
next
note
in
the
array.
So
it's
gonna
cycle
through
all
13
of
those
notes,
giving
you
a
chance
to
play
them
and
get
it
right
or
wrong
and
at
the
end,
it'll
tell
you
how
many
out
of
that
13.
A
You
got
correct,
so
it's
really
simple,
but
it
kind
of
can
show
you
what
you
can
start
to
do
with
this
sort
of
API
and
I
love
that
the
API
itself
is
so
easy
to
work
with.
That's
really
for
a
basic
thing:
that's
really
all
there
is
to
it
so
Ryan
you
wanna
know
this
isn't
fair,
because
this
is
their
treble
cleff
demo
and
I'm
ryan
familiar
with
bass
clef.
A
A
C
A
A
C
C
Yeah
what
we
were
talking
about,
you
know
what
you
could.
We
don't
really
have
this
playing
out
audio,
but
it
we
could
wire
it
up
to
all
kinds
of
fun
things
like
change,
the
brightness
of
a
light
bulb.
If
you
had
some
IOT
lights,
you
know
the
harder
I
smashed,
the
keys,
the
brighter
the
lights
are
or
I,
don't
know.
C
A
What
it
does
is,
it
turns
the
green
or
red,
but
you
get
the
idea,
so
you
can
cycle
through
these
and
actually
I
added
something
in
to
kind
of
give
a
very
simple
sense
of
other
things
you
can
do.
If
you
go
up
I'll,
do
it
cuz,
I
I
know
you're
trying
to
hold
it.
You
can
also
so
these
lower
notes
down
here
on
the
keyboard
or
just
changing
the
background
color
of
the
page,
just
to
drive
home
the
point
that,
like
it's
musical
information,
but
you
don't
have
to
just
use
MIDI
for
musical
applications.
A
You
could
use
this
to
do
whatever
you
want
with
it's
also
something
that
is
often
when
you're
doing
more
interesting
and
complex
things
using
the
web.
Midi
API
alongside
the
Web
Audio
API,
would
allow
you
to
do
a
lot
of
really
interesting
applications.
So
you
know:
there's
ice
I've
seen
some
demo
apps
out
there
that
are
kind
of
like
like
a
digital
synthesizer
or
you
could
you
can
do
all
sorts
of
cool
stuff
with
it,
but
for
this
example,
we've
got
this
this
use
case
here
and.
C
A
C
D
A
We
did
to
it
but
yeah,
so
that
that
gives
you
a
sense
of
how
you
can
work.
You
know
a
web
application
with
this
MIDI
data,
something
else
in
case
this
is
new
to
you
all
like
it
was
to
me
so
I'm,
just
using
SVG
to
draw
the
staff
in
the
notes
and
then
basically
just
I've
got
the
measurements
of
like
where
the
note
needs
to
be
placed
relative
to
this
staff.
A
But
I
hadn't
worked
with
SVG
much
in
the
past
and
I
didn't
realize
you
couldn't
just
like
set
the
color
of
it.
You
can't,
but
you
can
use
filter,
filter
on
it
to
get
the
color
to
be
what
you
want,
and
it's
really
kind
of
interesting
how
that
works.
So
you
can
like
rotate
the
hue,
if
you
think
about
on
the
color
wheel-
and
this
might
be
obvious
to
everybody,
but
me,
but
I
thought
that
was
pretty
awesome
to
go
from
one
color
to
another
for
these
SVG
things
so
bonus
all
right.
A
So
that
was
our
demo
and
then
there's
a
lot
of
information
out
there.
That
I
also
want
to
point
to
I
used
a
lot
of
resources
when
I
was
figuring.
This
out
myself,
one
of
the
best
ones
I
found.
Was
this
article
I'm
getting
started
with
the
web
MIDI
API?
There
is
an
awesome
example
where
they
are
doing
they
programmed
kind
of
like
a
luck
code
for
like
almost
like
an
escape
room
thing
where
you
had
to
figure
out
like
the
pattern
of
keys
to
play
to
like
solve
a
puzzle
like.
A
Totally
I'm
so
horrified
that
I
can't
remember
that
part
of
the
movie,
but
but
it's
a
really
cool
example.
They've
got
some
of
the
code
there
and
that's
doing
a
slightly
more
complex
thing:
that's
not
a
just
a
pure
music
learning
application
to
it.
There's
also
information
on
the
web,
MIDI
API
on
MIDI
org,
which
is
a
great
resource.
If
you
just
want
to
learn
more
about
MIDI
in
general.
This
page
here
also
has
a
bunch
of
links
out
to
cool
examples
and
demos,
and
things
like
that.
A
This
is
the
slides
and
then,
if
you
want
to
play
around
with
the
code
for
this
demo,
you
can
find
it
here
again.
Like
I
said
it's
scrappy,
there's
probably
ways
it
could
be
way
more
efficient,
but
it
works,
and
you
are
welcome
to
to
try
it
out
ahead
in
bass.
Clef.
If
you
want-
and
let
me
know
if
you
have
any
questions,
so
we
finished
a
little
bit
early.
Does
anybody
have
questions
about
this
or
wanted
to
come
play
the
keyboard
yeah.
B
C
C
Yeah
yeah
really
cool
stuff.
You
said
he,
if
you
didn't
weren't
able
to
hear
start
off
a
melody
and
it
will
detect
based
on
the
first
couple
notes,
will
follow
this
progression,
chord
progression
and
try
to
make
something:
Bach
style,
sounding
based
on
tensorflow
neural
nets
and
and
yeah
outputting,
MIDI,
I,
guess
well,
I'm,
not
sure
yeah,
probably
MIDI
yeah,
but
magenta
sounds
like
a
really
interesting
creative
process
to
the
research.
C
D
Here
we
were
just
using
OneNote,
it
looked
like
what
about
if
there's
a
chord
progression
and
there's
multiple
notes,
anything
special
you
think
to
handle
those
like,
for
example,
I
know,
human
hands
won't
precisely
hit
the
court
of
the
exact
same
millisecond,
for
example,
but
it
should
be
considered.
I,
don't
know
what
do
you
think
about
that,
though,.
C
C
A
press
not
a
release
of
the
button,
so
that's
a
separate
event
and
you
have
to
catch
them
both
or
the
note
will
stay
stuck
on
so
sometimes
you'll
have
when
you're
doing
MIDI.
If
it
misses
the
note
off
event,
it'll
just
be
like.
Have
this
long
tone
and
you'll
have
to
run
a
clear
all
notes
command
to
basically
signal
that
it
should
be
clear.
So
hopefully
you
don't
have
to
run
clear
all
notes,
but
these
are
all
asynchronous,
so
that
would
be
a
poly
poly
notes.
I,
don't
know
yeah
that.
A
Makes
perfect
sense,
I
think
sorry,
we're
only
keeping
track
of
like
one
thing
at
a
given
time,
but
if
you
were
keeping
track
of
how
many
had
been
down
and
then
where
they
lifted
back
up,
that
would
work.
There's
also
something
I
can't
remember
the
name
for
it
right
now,
but
there's
another
message
that
can
come
through
if
you've
pressed
down
the
key
and
then
you
press
more,
like
yeah,
see
I,
don't
know
these
things.
A
B
Yeah,
this
isn't
really
a
question.
Just
a
comment
to
follow
up
on
on
the
note
off
some
MIDI
keyboards.
Don't
actually
send
note
offs,
they
send
note
ons
with
zero
velocity,
so
just
like
FYI,
if,
like
you're
playing
around
with
a
really
cheap
keyboard,
and
it
like
all
of
your
notes,
are
getting
stuck
like.
That's
probably
why
good.
A
C
Nice
feedback
yeah
the
these
controllers,
that
we
had
that
Jan
and
I
are
using
have
aftertouch
velocity.
So
you
can
play
a
note
and
then
kind
of
hit
it
again
and
it'll
send
another
the
after
touch
event,
but
that
is
something
that's
been
kind
of
added
on
to
MIDI
in
later
years,
and
it's
funny
there's
still
some
clear
kind
of
limitations
with
the
language
of
MIDI
I.
Think
that
one
of
the
absolute
limits
since
the
80s
has
been
the
the
range
of
values
you
can
express
has
to
be
0
to
127.
C
A
C
Yeah
that'll
be
really
interesting,
more
expressive,
quality,
I
guess
and
in
the
MIDI
yeah
anyway.
Good
luck
experimenting
with
this
stuff.
A
hundred
and
twenty
seven
different
values
is
still
a
lot
to
work
with,
and
you
you
have
a
full
range
of
notes
and
a
full
range
of
chanted,
there's
twelve
channels
to
work
on.
So
you
could
send
a
lot
of
data
over
a
MIDI
bus
and
yeah.
It's
a
fun
thing
to
work
with
for
all
kinds
of
automation,
so
I
hope
you
enjoy
it
and
have
learned
something
fun.