Skip to content
0:00 / 0:00

#vanillajs#javascript30#audio-api

Make a JavaScript Drum Kit in Vanilla JS! #JavaScript30 1/30

Wes Bos

220K subscribers • 3 videos on Hallway

YouTube
  • Recommended by 2 people: 2 in engineering communities.
  • A classic. People kept recommending it from 2019 to 2023.
  • Presented by Wes Bos
  • May be out of date. Uploaded 9 years ago, in an area where tools change fast.

Beginner. No background in the topic needed.

466K views9 years ago2 recommendations

Web developmentProgramming languagesJavaScriptHTTP, REST and GraphQL

Wes Bos demonstrates how to build a responsive drum kit using vanilla JavaScript to listen for key events and play audio.

Day 1 of 30. Let's make a JavaScript Drum kit and bunch along the way. Get all 30 videos and Starter files for free over at JavaScript30.com.

Why it's here

2 people recommend this

What people say. Recommended as a great hands-on project for beginners to get comfortable with vanilla JavaScript and DOM events.

u/FriesWithThatin r/Frontend • Recommends

On “Beginner Question Megathread. Weekly /r/Frontend Discussion - June 16, 2019”

It can be as simple as using JS to listen for key events. Or with that new API you can probably create a fully functional synthesizer, or do cool stuff in the browser by manipulating the audio from the microphone or camera sensors.

u/sahil3066in r/Frontend • Recommends

On “How did you learn JavaScript?”

IMO Best way to learn JS is get your hands dirty...get started with some realy world js apps after you get familiar with JS move to TypeScript(Bulletproof JS) Here is the roadmap for JavaScript : Roadmap Link Here is some tutorials for JavaScript that might help 1. Beginner's Series to: JavaScript 2. JS 30 by Wes Bos Link | Full Courses : Link 3. Typescript