Beats in the Browser: Coding Music with JavaScript

Can your own heartbeat set the tempo for your music? See how JavaScript and the Web Bluetooth API can power a drum machine in the browser.

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

The history and influence of Roland drum machines

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

#2about 3 minutes

Creating basic sounds with the Web Audio API

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

#3about 3 minutes

Simplifying audio playback with Tone.js and WAV files

Instead of complex Web Audio API code, the Tone.js library provides a simple abstraction for loading and playing audio files like WAVs.

#4about 6 minutes

Triggering browser audio with the Web MIDI API

The Web MIDI API enables connecting hardware controllers to a web application by requesting access and listening for MIDI messages to trigger events.

#5about 7 minutes

Building a step sequencer using Tone.js for looping beats

Create a looping drum pattern by building a step sequencer that uses the Tone.js transport scheduler to repeatedly trigger sounds based on user input.

#6about 4 minutes

Using the Web Bluetooth API to control music tempo

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

#7about 2 minutes

Combining a drum machine with karaoke for a live performance

A live demonstration showcases the creative possibilities of browser-based music tools by combining the custom drum machine with a karaoke performance.

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

Matching moments

Building music sequencers with the Web Audio API
16:40 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

How to build a step sequencer in JavaScript
07:12 MIN

How to build a step sequencer in JavaScript

Beats in the Browser: Coding Music with JavaScript

A live karaoke demo and concluding thoughts
02:31 MIN

A live karaoke demo and concluding thoughts

Beats in the Browser: Coding Music with JavaScript

Connecting physical MIDI controllers using the Web MIDI API
06:05 MIN

Connecting physical MIDI controllers using the Web MIDI API

Beats in the Browser: Coding Music with JavaScript

Generating basic sounds in the browser with Web Audio API
03:08 MIN

Generating basic sounds in the browser with Web Audio API

Beats in the Browser: Coding Music with JavaScript

Simplifying audio playback in the browser with Tone.js
03:03 MIN

Simplifying audio playback in the browser with Tone.js

Beats in the Browser: Coding Music with JavaScript

The history and cultural impact of Roland drum machines
06:33 MIN

The history and cultural impact of Roland drum machines

Beats in the Browser: Coding Music with JavaScript

Controlling music tempo with the Web Bluetooth API
04:10 MIN

Controlling music tempo with the Web Bluetooth API

Beats in the Browser: Coding Music with JavaScript

Featured Partners

Related Videos

See all videos
Beats in the Browser: Coding Music with JavaScript
32:54

Beats in the Browser: Coding Music with JavaScript

Rowdy Rabouw

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw
1: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 code
14:44

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

Chris Heilmann

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

Building a Browser-Based Karaoke Game with Web Speech API

Ana Rodrigues

Prototyping with Hardware and the Web
30:58

Prototyping with Hardware and the Web

George Cave

Creating games to make the web fun again
41:03

Creating games to make the web fun again

Nolan Royalty

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

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

Chris Heilmann & Daniel Cranney and David Letorey

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

Building a Browser-Based Karaoke Game with Web Speech API

Related Articles

View all articles
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
Chris Heilmann
Dev Digest 131 - AI'm not sure about OSS
News and ArticlesRust and Typescript are rising stars in programming languages 2024 survey, the State of CSS 2024 survey is open and here is what's new in ECMAScript.In security news, a Microsoft update bricks Linux dual-boot systems, they patched a ...
Dev Digest 131 - AI'm not sure about OSS

From learning to earning

Jobs that call for the skills explored in this talk.

Joby

Joby

Saby Company Page
Sarajevo, Bosnia and Herzegovina

Remote
€40-45K
Junior
Ruby on Rails
Microsoft SQL Server
Google Cloud Platform
+2
Frontend Developer

Frontend Developer

JO Media Software Solutions GmBh
Brunn am Gebirge, Austria

Senior
CSS
Angular
JavaScript
TypeScript