Rowdy Rabouw

Beats in the Browser: Coding Music with JavaScript

Can your browser talk to MIDI controllers and heart rate monitors? Learn how to build a JavaScript drum machine that bridges the physical and digital worlds.

Beats in the Browser: Coding Music with JavaScript
#1about 7 minutes

The history and cultural impact of Roland drum machines

Roland's TR-808 and TR-909 drum machines were commercial failures that later became iconic in hip-hop and dance music.

#2about 3 minutes

Generating basic sounds in the browser with Web Audio API

The Web Audio API allows for sound generation in the browser using an AudioContext and an oscillator node to create simple waveforms.

#3about 3 minutes

Simplifying audio playback in the browser with Tone.js

Instead of complex synthesis, use WAV files and the Tone.js library to easily load and play audio samples with minimal code.

#4about 6 minutes

Connecting physical MIDI controllers using the Web MIDI API

The Web MIDI API enables browsers to receive messages from physical hardware like keyboards and drum pads to trigger in-browser events.

#5about 7 minutes

How to build a step sequencer in JavaScript

A step sequencer can be built using HTML checkboxes for the interface and the Tone.js scheduling feature to loop through and play selected notes.

#6about 4 minutes

Controlling music tempo with the Web Bluetooth API

The Web Bluetooth API can connect to low-energy devices like a heart rate monitor to dynamically control application parameters like music tempo.

#7about 3 minutes

A live karaoke demo and concluding thoughts

A fun demonstration combines the browser-based drum machine with karaoke, followed by a look back at early DJing experiences.

Related jobs
Jobs that call for the skills explored in this talk.

job ad

Saby Company
Delebio, Italy

Intermediate

d

Saby Company
Delebio, Italy

Junior

Matching moments

Building music sequencers with the Web Audio API
56:55 MIN

Building music sequencers with the Web Audio API

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw

Combining a drum machine with karaoke for a live performance
30:26 MIN

Combining a drum machine with karaoke for a live performance

Beats in the Browser: Coding Music with JavaScript

Building a step sequencer using Tone.js for looping beats
19:01 MIN

Building a step sequencer using Tone.js for looping beats

Beats in the Browser: Coding Music with JavaScript

Triggering browser audio with the Web MIDI API
12:48 MIN

Triggering browser audio with the Web MIDI API

Beats in the Browser: Coding Music with JavaScript

Creating basic sounds with the Web Audio API
06:58 MIN

Creating basic sounds with the Web Audio API

Beats in the Browser: Coding Music with JavaScript

Creative web tech for music notation and modern CSS
29:07 MIN

Creative web tech for music notation and modern CSS

WeAreDevelopers LIVE - Dapr / Pixels and Generative Art / Open Source and Communities / and more

Using the Web Bluetooth API to control music tempo
26:10 MIN

Using the Web Bluetooth API to control music tempo

Beats in the Browser: Coding Music with JavaScript

Connecting hardware prototypes to the browser
00:39 MIN

Connecting hardware prototypes to the browser

Prototyping with Hardware and the Web

Featured Partners

Related Videos

Beats in the Browser: Coding Music with JavaScript32:54

Beats in the Browser: Coding Music with JavaScript

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw1:13:35

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw

Chris Heilmann & Daniel Cranney & Rowdy Rabouw

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

The Eventloop in JavaScript - How does it work?30:36

The Eventloop in JavaScript - How does it work?

Christian Woerz

Building a Browser-Based Karaoke Game with Web Speech API28:09

Building a Browser-Based Karaoke Game with Web Speech API

Ana Rodrigues

Using all the HTML, Running State of the Browser and "Modern" is Rubbish1:15:44

Using all the HTML, Running State of the Browser and "Modern" is Rubbish

Chris Heilmann & Daniel Cranney and David Letorey

Prototyping with Hardware and the Web30:58

Prototyping with Hardware and the Web

George Cave

Coffee with Developers - Andrew Taylor - CODE100 Manchester09:08

Coffee with Developers - Andrew Taylor - CODE100 Manchester

Andrew Taylor

Related Articles

View all articles
CH
Chris Heilmann
Dev Digest 136 - No JS(on) of mine
News and ArticlesDouglas Crockford is our featured video, so let's talk about evolving JavaScript and all things JSON. Judicious JSON explains all the weird things in it, you can learn why it can be incredibly slow, people wonder what even is a JSON ...
Dev Digest 136 - No JS(on) of mine
CH
Chris Heilmann
WeAreDevelopers LIVE days are changing - get ready to take part
Starting with this week's Web Dev Day edition of WeAreDevelopers LIVE Days, we changed the the way we run these online conferences. The main differences are:Shorter talks (half an hour tops)More interaction in Q&AA tips and tricks "Did you know" sect...
WeAreDevelopers LIVE days are changing - get ready to take part
CH
Chris Heilmann
Dev Digest 109 -Egg-citing things…
As we are heading into the Easter break, here are some things to spend some time on. There's resources on improving the performance of your code and you hear from the winners of CODE100 Amsterdam what it was like to be on stage. Also, hang tight as t...
Dev Digest 109 -Egg-citing things…

From learning to earning

Jobs that call for the skills explored in this talk.