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.
#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
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
02:28 MIN
Combining a drum machine with karaoke for a live performance
Beats in the Browser: Coding Music with JavaScript
07:09 MIN
Building a step sequencer using Tone.js for looping beats
Beats in the Browser: Coding Music with JavaScript
06:13 MIN
Triggering browser audio with the Web MIDI API
Beats in the Browser: Coding Music with JavaScript
02:47 MIN
Creating basic sounds with the Web Audio API
Beats in the Browser: Coding Music with JavaScript
14:22 MIN
Creative web tech for music notation and modern CSS
WeAreDevelopers LIVE - Dapr / Pixels and Generative Art / Open Source and Communities / and more
04:16 MIN
Using the Web Bluetooth API to control music tempo
Beats in the Browser: Coding Music with JavaScript
Dev Digest 136 - No JS(on) of mineNews 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 ...
Chris Heilmann
WeAreDevelopers LIVE days are changing - get ready to take partStarting 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...
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...
Chris Heilmann
Micro Components - a different approach to a simpler component-based webThere has been a lot of heated discussion lately in the web community about component based development. One side argued that Web Components are a standard we should follow whereas others complained that they still lag behind in what frameworks offer...
From learning to earning
Jobs that call for the skills explored in this talk.
14:44
30:36
1:15:44
30:58
09:08
52:01
41:54
