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.
Apaleo
München, Germany
Remote
€65-85K
Senior
JavaScript
.NET
+2
Matching moments
03:13 MIN
How AI can create more human moments in HR
The Future of HR Lies in AND – Not in OR
03:28 MIN
Shifting from talent acquisition to talent architecture
The Future of HR Lies in AND – Not in OR
05:10 MIN
How the HR function has evolved over three decades
The Future of HR Lies in AND – Not in OR
06:51 MIN
Balancing business, technology, and people for holistic success
The Future of HR Lies in AND – Not in OR
06:04 MIN
The importance of a fighting spirit to avoid complacency
The Future of HR Lies in AND – Not in OR
06:10 MIN
Understanding global differences in work culture and motivation
The Future of HR Lies in AND – Not in OR
06:59 MIN
Moving from 'or' to 'and' thinking in HR strategy
The Future of HR Lies in AND – Not in OR
04:22 MIN
Navigating ambiguity as a core HR competency
The Future of HR Lies in AND – Not in OR
Featured Partners
Related Videos
Beats in the Browser: Coding Music with JavaScript
New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw
Chris Heilmann & Daniel Cranney & Rowdy Rabouw
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
Ana Rodrigues
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
Chris Heilmann, Daniel Cranney & Jan Deppisch
Unleash your web skills on native!
Rowdy Rabouw
Prototyping with Hardware and the Web
George Cave
Catching up on the basics you don't really need that much code
Chris Heilmann
Related Articles
View all articles



From learning to earning
Jobs that call for the skills explored in this talk.

BoraBora GmbH
Barcelona, Spain
React
MongoDB
Node.js



Frontend Revolution
Amsterdam, Netherlands
Angular
JavaScript
Test Driven Development


Live Wire
Python
Unreal Engine

Tech Solutions Gmbh
Berlin, Germany
API
CSS
GIT
HTML
Scrum
+5


Tech Solutions Gmbh
Brandenburg an der Havel, Germany
API
CSS
GIT
HTML
Scrum
+5