Skip to content
DIG 345 Radical Software

Sound & Music

Overview Create sound and music with code

This introduction to audio in the browser covers the fundamentals of Tone.js and Strudel libraries for creating dynamic music.

HTML5 audio

Section titled “HTML5 audio”

The HTML <audio> element simplays plays pre-recorded audio files within a web page. The following will display controls to play an audio source.

Web Audio API - createOscillator and Audio Nodes EXPLAINED

Strudel

Section titled “Strudel”
  • Strudel is a live coding platform that lets you write expressive dynamic music in the browser.
  • Strudel is a JavaScript port of tidalcycles, a popular live coding language for music. Both are free/open source software.

Usage

Section titled “Usage”
  • Click play/stop to sample embedded examples below.
  • Click the REPL button to open any example in the interactive Strudel REPL (Read-Eval-Print Loop), then continue on for a tutorial.

Embed reference, package list and code samples

👉 Getting started with Strudel

Section titled “👉 Getting started with Strudel”

You don’t have to know much about music (trust me!) to start using Studel:

  1. Click play below. This plays the casio sound in a continuous loop.
  2. Within the quotes, add a space and another casio. Press ctl+enter each time you update.
  3. Some sounds have different samples. Add :1 after the second casio to play a different sample in the sound.
  4. Change your sounds to "casio insect casio:1 metal"
Solution

👉 Strudel drum machine

Section titled “👉 Strudel drum machine”
  1. Many music software use bpm (beats per minute), Strudel (like Tidal) uses cycles to set music tempo. By default a cycle plays 30 times per minute (every 2 seconds or .5 times per second). Press play below and you will hear a bass drum (kick) playing at 30 bpm (1 beat per cycle).
  2. A way to increase the tempo is by adding beats per cycle (bps). Change the code below to "bd sd bd rim" (kick, snare, kick, and rim) and press ctl+enter to change to the tempo to 120 bpm (30 cycles/minute * 4 beats).
  3. You can play multiple sounds at once by wrapping the phrase in square brackets [] and using a comma in between tracks. Update your sound to look like this: "[bd sd bd rim, hh*8]" and update. You will hear the the original sound as well as a high hat playing twice as fast as before.
  4. The other method to change the tempo is to update the speed the cycle runs. An intuitive way to do this is to use the intended bpm divided by the perceived beats per second. If you add setcpm(120/4) to the top of the code you will notice no change, because the cycle is already 30 and you haven’t changed the beats. Change change the code to setcpm(90/4) and you will hear the beat at 90 bpm in 4/4 music rhythm (a.k.a. “common time”).
Solution

Strudel Synth

Section titled “Strudel Synth”

In addition to the sampling engine and MIDI control, strudel comes with a synthesizer to create sounds on the fly.

👉 Continue learning

Section titled “👉 Continue learning”
  1. Strudel has an excellent tutorial that introduces several fundamentals of the language and making music in general.

More Strudel samples

Section titled “More Strudel samples”

You can also load and cut samples from the web.

Run this one in your browser on your phone to control it with device motion.

Works by others using Strudel

Section titled “Works by others using Strudel”

DJ Dave My process making my track Hard Refresh ✼ ✼ ✼ #algorave #livecoding #electronicmusic

DJ Dave coding dance music in #strudel !!!!!

Switch Angel 2 Minute Deep Acid in Strudel (from scratch)

Also, check out the Strudel showcase

Section titled “Related works and tools”

Tone.js

Section titled “Tone.js”

Tone.js is a Web Audio framework for creating interactive music in the browser.

Tone.js Hello, World!

Section titled “Tone.js Hello, World!”
  1. After you import tone.js in a web page…
<script src="http://unpkg.com/tone"></script>
  1. This example creates a synthesizer to play tones. 
// create a synth and connect it to the main output (your speakers)
const synth = new Tone.Synth().toDestination();
// play a middle 'C' for the duration of an 8th note
synth.triggerAttackRelease("C4", "8n");
  1. This example will play three notes in succession. 
const synth = new Tone.Synth().toDestination();
const now = Tone.now();                             // save current time
synth.triggerAttackRelease("C4", "8n", now);        // play now
synth.triggerAttackRelease("E4", "8n", now + 0.5);  // play after 500 ms
synth.triggerAttackRelease("G4", "8n", now + 1);    // play after 1 s
  1. This example uses Tone.js oscillators to change the frequency of signals in real time. 
const osc = new Tone.Oscillator().toDestination();
osc.frequency.value = "C4";       // start at "C4"
osc.frequency.rampTo("C2", 2);    // ramp to "C2" over 2 seconds
osc.start().stop("+3");           // start the oscillator for 2 seconds

Tutorial

Section titled “Tutorial”

Complete this series to create an interactive synth in Tone.js

Getting Started with Tone.js | Web Audio Tutorial - Pts 1-5 (3:31, 6:37, 10:20, 5:59, 9:28)

More Examples

Section titled “More Examples”

More Tone.js Topics

Section titled “More Tone.js Topics”