Season 1 Episode 4

Episode 4:

Play this playlist for the intro, the run-down on what we’ll learn and do in Episode 4, the show and tell, the interview, and the five part lab.

• Audio Demos
• Music Practice App

Episode 4.1:

Ben gives a quick run-down on what we’ll learn and build today, the technologies we’ll use, who we’ll be talking to, and what they built.

Tools and technology we’ll use today:

• Web MIDI
• Tone.js
• Pitch Detection
• Piano Keys Web Component
• Lit
• Web Dev Server

Episode 4.2:

Ben shows off his already built music practice app called “BeSharp”, available at besharp.app. More importantly, though, he shows the audio technology that goes into it. Ben shows demos with Web MIDI, Tone.js, Pitch Detection with the Web Audio API, and a pretty great piano keys component. On the Lit side, he then teases how all of these technologies can come into a project using Lit’s new Reactive Controllers

Episode 4.3:

Ben chats with Cassondra Roberts who is an all around amazing developer working at Adobe. However, you might have seen her around in the Web Component spec community, on the CSS working group, as well as helping maintain some prominent Web Component libraries. Cassondra came on to talk about her book in progress on Web Component CSS and styling. She also gives Ben some pointers for styling the music app we’re diving into today.

Episode 4.4:

In this video we explore Web MIDI. We’ll build a quick MIDI keyboard connected demo and watch out for what note gets hit, whether its a press or release, and even how hard (or the velocity) of the press.

Episode 4.5:

Now, we explore pitch detection using your normal browser connected microphone using the Web Audio API. We’re heavily borrowing/stealing from Alex Ellis (https://alexanderell.is) here as his blog post “Detecting pitch with the Web Audio API and autocorrelation” does a fantastic job of accomplishing this

Episode 4.6:

Next we try out Tone.js to make some noise. And how better to make some noise (if you don’t have a MIDI keyboard) than a nice little Piano Key Web Component?

Episode 4.7:

Now we get to take all of our audio demos and code, and make them into Lit Reactive Controllers to make them super easy to use from a Web Component app without lots of messy code intruding on your HTML markup!

Episode 4.8:

We’re going to fast forward to having our demo work all functioning in an un-styled app. We’ll explore some Web Component styling, especially exploring some of the advice of our guest Cassondra Roberts. We’ll also talk a bit about using a mini design system to style the app.