Web Components in Space Episode 4

This is a cross-post of the fourth episode of my spacelab based Web Components learning video series called "Web Components in Space"!

  • Episode 4: Watch all of 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.

  • Episode 4.1: Episode 4 Run-down

    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:

  • Episode 4.2: Show & Tell

    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: Interview with Cassondra Roberts

    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: Lab Step 1 - Web MIDI

    Demo Code

    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: Lab Step 2 - Pitch Detection

    Demo Code

    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: Lab Step 3 - Playing sounds with Tone.js

    Demo Code

    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: Lab Step 4 - Lit Reactive Controllers

    Demo Code

    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: Lab Step 5 - Styling Web Components and a Mini Design System

    BeSharp Music App

    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.