2b:null 2c:["$","title",null,{"children":"Tone.JS Sequencer | Carsten Heisterkamp | Observable"}] 31:T125f,p5Code = p5(sketch => { //---------------------------------------------------------------------- sketch.setup = async function() { sketch.createCanvas(width, height); sketch.background("#702632"); // Setup audio config Tone.Transport.bpm.value = 120; // Setup a reverb with ToneJS const reverb = new Tone.Reverb({ decay: 4, wet: 0.2, preDelay: 0.25, }); await reverb.generate(); // Load the reverb // Create an effect node that creates a feedback delay const effect = new Tone.FeedbackDelay(`${Math.floor(numCols / 2)}n`, 1 / 3); effect.wet.value = 0.2; // Setup the synths a little bit synth.set({ voice0: { oscillator: { type: "triangle", }, volume: -30, envelope: { attack: 0.005, release: 0.05, sustain: 1, }, }, voice1: { volume: -20, envelope: { attack: 0.005, release: 0.05, sustain: 1, }, }, }); synth.volume.value =volume; // +++ this could be in the draw loop as editing code in cells and running changes volume level // Wire up our nodes: synth.connect(effect); synth.connect(Tone.Destination); effect.connect(reverb); reverb.connect(Tone.Destination); // Every two measures (loops), we randomize the notes // We use Transport to schedule timer since it has to be exactly in sync with the audio // music.cancelRepeat = Tone.Transport.scheduleRepeat( reSequence, "2m"); music.cancelRepeat = Tone.Transport.scheduleRepeat( newSeq, "2m"); } //--------------------------------------------------------------------- // Render loop that draws shapes with p5 sketch.draw = function() { // Our synth isn't loaded yet, don't draw anything if (!synth) return; // blue background sketch.background("#702632"); if (music.playing) { // The audio is playing so we can show the sequencer const margin = dim * 0.2; const innerSize = dim - margin * 2; const cellSize = innerSize / numCols; sketch.push(); sketch.translate(width / 2 - dim / 2, height / 2 - dim / 2); // Loop through the nested data structure, drawing each note for (let y = 0; y < musicData.length; y++) { const row = musicData[y]; for (let x = 0; x < row.length; x++) { const u = x / (numCols - 1); const v = y / (numRows - 1); let px = sketch.lerp(margin, dim - margin, u); let py = sketch.lerp(margin, dim - margin, v); sketch.noStroke(); sketch.noFill(); // note on=fill, note off=stroke if (row[x] === 1) sketch.fill(255); else sketch.stroke(255); // draw note sketch.circle(px, py, cellSize * 0.75); // draw a rectangle around the currently playing column if (x === music.currentColumn) { sketch.rectMode(sketch.CENTER); sketch.rect(px, py, cellSize, cellSize); } } } sketch.pop(); } else { // Draw a 'play' button sketch.noStroke(); sketch.fill(255); polygon(width / 2, height / 2, dim * 0.1, 3); } } // ---------------------------------------------------------- // When the mouse is pressed, turn on the sequencer sketch.mousePressed = function () { // No synth loaded yet, just skip mouse click if (!synth) { return; } if (music.playing) { // If we are currently playing, we stop the sequencer music.playing = false; music.sequence.stop(); Tone.Transport.stop(); Tone.Transport.clear(music.cancelRepeat); // allows for the changeing of the transport.scheduleRepeat be changed without making multi events. } else { // If we aren't currently playing, we can start the sequence // We do this with an array of indices [ 0, 1, 2 ... 15 ] // create the sequence, passing onSequenceStep function music.sequence = new Tone.Sequence(onSequenceStep, noteIndices, noteInterval); // Start the sequence and Transport loop music.playing = true; music.sequence.start(); Tone.Transport.start(); } } // ----------------------------------------------------------------------------------- // Draw a basic polygon, handles triangles, squares, pentagons, etc function polygon(x, y, radius, sides = 3, angle = 0) { sketch.beginShape(); for (let i = 0; i < sides; i++) { const a = angle + TWO_PI * (i / sides); let sx = x + Math.cos(a) * radius; let sy = y + Math.sin(a) * radius; sketch.vertex(sx, sy); } sketch.endShape(sketch.CLOSE); } })32:T4b8,This is a Modified version of the *Frontend masters **[Web-Audio by Matt DesLauriers](https://github.com/mattdesl/workshop-web-audio) **([tone.js](https://tonejs.github.io/))* so it can work in observable. [Video Replay only available as editing still happening](https://frontendmasters.com/workshops/web-audio/).

TODO:

Make p5 sketch more observable friendly/functional...

Add a better start and stop button instead of using ALL the mouse click events.

Use D3 SVG instead of P5

Expand the generation abilities.
- Allow lead channels/tracks and rhythm channels/tracks.

--- ## Add *input* selectors to change the settings like: - volume - reverb = new Tone.Reverb({ decay: 4, wet: 0.2, preDelay: 0.25) - effect Tone.FeedbackDelay(`${Math.floor(numCols / 2)}n`, 1 / 3); - effect.wet.value = 0.2; - synth = new Tone.PolySynth({numRows}, Tone.DuoSynth); - synth.set({ - voice0: { oscillator: { type: "triangle4", }, volume: -30, envelope: { attack: 0.005, release: 0.05, sustain: 1, }, }, - voice1: { volume: -10, envelope: { attack: 0.005, release: 0.05, sustain: 1, }, }, }); 33:T7ac,## docs of interest: The basics are: `synth = new Tone.PolySynth({numRows}, Tone.DuoSynth)` https://tonejs.github.io/docs/r13/PolySynth fix for [r14](https://tonejs.github.io/docs/14.7.77/PolySynth.html): https://github.com/pamruta/Computational-Music/issues/1 https://tonejs.github.io/docs/r13/Oscillator - [Types of Oscillator.](https://tonejs.github.io/docs/r13/Oscillator#:~:text=%3C/%3E-,.type,-%E2%86%9D%20String%20%23) [Reverb](https://tonejs.github.io/docs/r13/Reverb): [WET](https://tonejs.github.io/docs/r13/Reverb#wet) .[generate](https://tonejs.github.io/docs/r13/Reverb#generate)() RETURNS a promise which returns *this* object. Generate the Impulse Response. Returns a promise while the Impulse Response is being generated. .[Filter](https://tonejs.github.io/docs/r13/Filter)() https://tonejs.github.io/docs/r13/FatOscillator https://tonejs.github.io/docs/r13/FatOscillator#connect still looking for more docs on the oscillator prefix 'fat' that spreads the oscillator over multiple frequencies. https://tonejs.github.io/docs/r13/Oscillator#connect https://tonejs.github.io/docs/r13/Transport https://tonejs.github.io/docs/r13/Transport#schedulerepeat --- ### [Tone.Sequence](https://tonejs.github.io/docs/14.7.77/Sequence)() A sequence is an alternate notation of a part. Instead of passing in an array of [time, event] pairs, pass in an array of events which will be spaced at the given subdivision. Sub-arrays will subdivide that beat by the number of items are in the array. `sequence = new Tone.Sequence(onSequenceStep, noteIndices, noteInterval);` > **onSequenceStep** the function to call. **noteIndices[]** an array the size of the number of notes. **noteInterval** the number of columns expressed as ["`${numCols}n`"](https://tonejs.github.io/docs/14.7.77/type/Time) timeClass. [Tone.Draw](https://tonejs.github.io/docs/14.7.77/Draw)***[.schedule](https://tonejs.github.io/docs/14.7.77/Draw#schedule)***()34:T435,// starting one track at a time gives a smooth tune intoduction function newSeq() { const chance = d3.randomUniform(0.5,1.5)() // Choose a % chance so that sometimes it is more busy, other times more sparse // to change one track at a time i need to cycle through the track and not update all the tracks at one time. // for (let track = 0; track < musicData.length; track++) { // Loop through the for tracks and create some random on/off values const row = musicData[tuneData.track%notes.length]; tuneData.track++ // update the row. for (let x = 0; x < row.length; x++) { row[x] = Math.abs(d3.randomNormal()()) > chance ? 1 : 0; // added Math.abs to gen more notes } // Loop through again and make sure we don't have two consectutive on values (as it sounds bad) for (let x = 0; x < row.length - 1; x++) { if (row[x] === 1 && row[x + 1] === 1) { row[x + (d3.randomInt(2)())] = 0; // was row[x + 1] = 0; but the random adds in double notes // x++; } } //} // next track }35:[{"id":"837118dbda941341b4e4e579f2d48de78056008bbd2766333be678f500abd4cbde84e31263c60ee8e4f1d5583a48ec61a7821a717ffb55820184b446f2f67707","href":"https://static.observableusercontent.com/files/837118dbda941341b4e4e579f2d48de78056008bbd2766333be678f500abd4cbde84e31263c60ee8e4f1d5583a48ec61a7821a717ffb55820184b446f2f67707","name":"image@1.png","type":"image/png","lastModified":1700319703315.097,"size":3725}] 2f:{"id":"bf11a7ce7e24f1db","slug":null,"title":"Tone.JS Sequencer","thumbnail":"a92befea7a9ef67e405aa85e9da4f40fc16dfd023ab93e8b85f8ec59b3e6b463","access_level":"public","create_time":"$D2023-11-18T15:01:43.315Z","update_time":"$D2023-11-18T15:01:43.315Z","view_time":null,"first_public_time":"$D2023-11-18T15:01:43.315Z","has_unpublished_edits":null,"fork":{"id":"d6e75cb8935ac959","slug":"tone-js-sequencer","title":"Tone.JS Sequencer","owner":{"id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ca1db434202075d0","login":"carstenheisterkamp","name":"Carsten Heisterkamp","avatar_url":"https://avatars-next.observableusercontent.com/4fc9f6546221d82e7ce4520896dcfede25ba6ba6650d3355d21513f8893d383f","tier":"starter_2024"},"version":1376,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b787da0d50e70f6e","login":"carstenheisterkamp","name":"Carsten Heisterkamp","avatar_url":"https://avatars-next.observableusercontent.com/4fc9f6546221d82e7ce4520896dcfede25ba6ba6650d3355d21513f8893d383f","tier":null}],"members":[{"type":"individual","id":"b787da0d50e70f6e","login":"carstenheisterkamp","name":"Carsten Heisterkamp","avatar_url":"https://avatars-next.observableusercontent.com/4fc9f6546221d82e7ce4520896dcfede25ba6ba6650d3355d21513f8893d383f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Tone.JS Sequencer","cells":[{"id":0,"value":"# Tone.JS Sequencer\n\nClick on the Enable sound below and then the ${ await FileAttachment(\"image@1.png\").image({\n style: \"border-radius: 50%;\",\n width: 42,\n title: \"Play Button\",\n alt: \"Play Button\"\n})} to start.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"viewof soundEnabled = Inputs.button('Enable sound', {required: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"// Here is the fixed scale we will use, you can try other scales/notes.\n // notes = [\"F#4\", \"E4\", \"C#4\", \"A4\"];\n// notes = [\"A3\", \"C4\", \"D4\", \"E3\", \"G4\"];\nnotes = ['A3', 'C4', 'D4', 'E4', 'G4', 'A4'];\n // notes = ['A3', 'C4', 'D4', 'A3', 'E4', 'G4', 'A4'];\n\n// notes = [ \"A4\", \"D3\", \"E3\", \"G4\", 'F#4' ];\n// notes = [\"C5\", \"A3\", \"D4\", \"G4\", \"A4\", \"F4\"]; \n// notes = [\"F#4\", \"E4\", \"C#4\", \"A4\", \"A2\", \"C4\", \"D4\", \"E2\", \"G4\" ];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"Tone = soundEnabled, require('tone')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":400,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"volume = -30 // Master volume in decior audio","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"// Number of rows is the number of different notes\nnumRows = notes.length;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"// Number of columns is depending on how many notes to play in a measure\nnumCols = 16;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"noteInterval = `${numCols}n`; // default hardcoded to 16","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"noteIndices = d3.range(numCols);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"dim = Math.min(width, height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"// Setup a synth with ToneJS\n// We use a poly synth which can hold up to numRows voices\n// Then we will play each note on a different voice\n\nsynth = new Tone.PolySynth({numRows}, Tone.DuoSynth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"music = ({\n playing: false, // Whether the audio sequence is playing\n sequence: 0, // The current Tone.Sequence\n currentColumn: 0, // The currently playing column\n cancelRepeat: 0, // event thst drives the repeat and need to be reset to stop multi events from being made.\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"# Below is where we play the audio.\n ```js\n function onSequenceStep(time, column) {} \n ```\n called via:\n ```js\n music.sequence = new Tone.Sequence(onSequenceStep, noteIndices, noteInterval);\n ```\n \n We build up a list of **notesToPlay**, which will equal the **numRows** (how many [notes](https://observablehq.com/d/d6e75cb8935ac959#notes) are in our scales). \n This gets passed into our [PolySynth](https://observablehq.com/d/d6e75cb8935ac959#synth).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"// // Here is where we actually play the audio\nfunction onSequenceStep(time, column) { // We build up a list of notes, which will equal the numRows. This gets passed into our PolySynth\n let notesToPlay = [];\n\n musicData.forEach((row, rowIndex) => { // Go through each row \n if (row[column] == 1) { // See if the note is \"on\". If its on, add it to the list of notes to play\n const note = notes[rowIndex];\n notesToPlay.push(note);\n }\n });\n\n // Trigger a note\n const velocity = d3.randomUniform(0.5,1.5)();\n synth.triggerAttackRelease(notesToPlay, noteInterval, time, velocity);\n Tone.Draw.schedule(function () { return music.currentColumn = column; }, time); // sets and uses the current coloum\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"// Create a Row*Col data structure that has nested arrays filled with zeros\nmusicData = d3.range(numRows).map( ()=> d3.range(numCols).map ( ()=>0) )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"---\n# the generation of the notes to play.\n\nHere we randomize the sequencer to play with some data \nThe data can be 0 (off) or 1 (on) but not two on's next to each other.\n\n\nThe **sequencer** changes all rows at the same time.\n\nI want to change the node data one row per refresh. either in a sequential order or random order.\n\ninstead of using loops, i could use data.map() \n\n---\nI want to change the random sequencer so it only randomly changes one line at a time to avoid pattern shock.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"// the orgional re sequencer\n\nfunction reSequence() { \n const chance = d3.randomUniform(0.5,1.5)() // Choose a % chance so that sometimes it is more busy, other times more sparse\n for (let y = 0; y < musicData.length; y++) { // Loop through and create some random on/off values\n const row = musicData[y];\n for (let x = 0; x < row.length; x++) {\n row[x] = Math.abs(d3.randomNormal()()) > chance ? 1 : 0; // added Math.abs to gen more notes\n }\n // Loop through again and make sure we don't have two consectutive on values (it sounds bad)\n for (let x = 0; x < row.length - 1; x++) {\n if (row[x] === 1 && row[x + 1] === 1) {\n row[x + 1] = 0;\n x++;\n }\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1209,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1216,"value":"tuneData = ({\n \n track:0,\n tracks: musicData\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"height = width/3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"PI = Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"TWO_PI = PI*2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"// Tone = require('tone')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import {p5} from \"@tmcw/p5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"