Rowdy Rabouw
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.
Matching moments
01:32 MIN
Organizing a developer conference for 15,000 attendees
Cat Herding with Lions and Tigers - Christian Heilmann
04:57 MIN
Increasing the value of talk recordings post-event
Cat Herding with Lions and Tigers - Christian Heilmann
02:54 MIN
Automating video post-production with local scripts
Cat Herding with Lions and Tigers - Christian Heilmann
03:17 MIN
Selecting strategic partners and essential event tools
Cat Herding with Lions and Tigers - Christian Heilmann
02:39 MIN
Establishing a single source of truth for all data
Cat Herding with Lions and Tigers - Christian Heilmann
02:44 MIN
Rapid-fire thoughts on the future of work
What 2025 Taught Us: A Year-End Special with Hung Lee
04:22 MIN
Why HR struggles with technology implementation and adoption
What 2025 Taught Us: A Year-End Special with Hung Lee
03:34 MIN
The business case for sustainable high performance
Sustainable High Performance: Build It or Pay the Price
Featured Partners
Related Videos
32:54Beats in the Browser: Coding Music with JavaScript
1:13:35New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw
Chris Heilmann & Daniel Cranney & Rowdy Rabouw
1:15:44Using all the HTML, Running State of the Browser and "Modern" is Rubbish
Chris Heilmann & Daniel Cranney and David Letorey
14:44Catching up on the basics you don't really need that much code
Chris Heilmann
1:06:20WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
Chris Heilmann, Daniel Cranney & Jan Deppisch
30:36The Eventloop in JavaScript - How does it work?
Christian Woerz
28:09Building a Browser-Based Karaoke Game with Web Speech API
Ana Rodrigues
52:01Unleash your web skills on native!
Rowdy Rabouw
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Visonum GmbH
Remote
Junior
Intermediate
React
Redux
TypeScript
BoraBora GmbH
Barcelona, Spain
React
MongoDB
Node.js
Frontend Revolution
Amsterdam, Netherlands
Angular
JavaScript
Test Driven Development