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
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
30:26 MIN
Combining a drum machine with karaoke for a live performance
Beats in the Browser: Coding Music with JavaScript
19:01 MIN
Building a step sequencer using Tone.js for looping beats
Beats in the Browser: Coding Music with JavaScript
12:48 MIN
Triggering browser audio with the Web MIDI API
Beats in the Browser: Coding Music with JavaScript
06:58 MIN
Creating basic sounds with the Web Audio API
Beats in the Browser: Coding Music with JavaScript
26:10 MIN
Using the Web Bluetooth API to control music tempo
Beats in the Browser: Coding Music with JavaScript
00:39 MIN
Connecting hardware prototypes to the browser
Prototyping with Hardware and the Web
17:41 MIN
Presenting live web scraping demos at a developer conference
Tech with Tim at WeAreDevelopers World Congress 2024
Featured Partners
Related Videos
32:54Beats in the Browser: Coding Music with JavaScript
14:44Catching up on the basics you don't really need that much code
Chris Heilmann
30:36The Eventloop in JavaScript - How does it work?
Christian Woerz
1:15:44Using all the HTML, Running State of the Browser and "Modern" is Rubbish
Chris Heilmann & Daniel Cranney and David Letorey
30:58Prototyping with Hardware and the Web
George Cave
09:08Coffee with Developers - Andrew Taylor - CODE100 Manchester
Andrew Taylor
52:01Unleash your web skills on native!
Rowdy Rabouw
41:03Creating games to make the web fun again
Nolan Royalty
From learning to earning
Jobs that call for the skills explored in this talk.
Interactive Developer (Javascript, JS Libraries, MVC) &ndash
Thegiglab
Amsterdam, Netherlands
CSS
MVC
Node.js
MooTools
JavaScript