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
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
19:01 MIN
How to build a step sequencer in JavaScript
Beats in the Browser: Coding Music with JavaScript
30:23 MIN
A live karaoke demo and concluding thoughts
Beats in the Browser: Coding Music with JavaScript
12:56 MIN
Connecting physical MIDI controllers using the Web MIDI API
Beats in the Browser: Coding Music with JavaScript
06:45 MIN
Generating basic sounds in the browser with Web Audio API
Beats in the Browser: Coding Music with JavaScript
09:53 MIN
Simplifying audio playback in the browser with Tone.js
Beats in the Browser: Coding Music with JavaScript
00:12 MIN
The history and cultural impact of Roland drum machines
Beats in the Browser: Coding Music with JavaScript
26:13 MIN
Controlling music tempo with the Web Bluetooth API
Beats in the Browser: Coding Music with JavaScript
Featured Partners
Related Videos
32:54Beats in the Browser: Coding Music with JavaScript
Rowdy Rabouw
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
14:44Catching up on the basics you don't really need that much code
Chris Heilmann
28:09Building a Browser-Based Karaoke Game with Web Speech API
Ana Rodrigues
41:03Creating games to make the web fun again
Nolan Royalty
30:58Prototyping with Hardware and the Web
George Cave
1:15:44Using all the HTML, Running State of the Browser and "Modern" is Rubbish
Chris Heilmann & Daniel Cranney and David Letorey
28:09Building a Browser-Based Karaoke Game with Web Speech API
From learning to earning
Jobs that call for the skills explored in this talk.
Frontend Web Developer - JavaScript | React | Angular | Vue.js | Bootstrap | Tailwind | HTML | CSS
Tech Solutions Gmbh
API
CSS
GIT
HTML
Scrum
+5
ML Software Engineer - Music Creation Apps
Apple Firmenprofil
C++
Python
Machine Learning
Amazon Web Services (AWS)
ML Software Engineer - Music Creation Apps
Apple Firmenprofil
C++
Python
Machine Learning
Amazon Web Services (AWS)