3f:null 40:["$","title",null,{"children":"Coding with Music | Dan Brickley | Observable"}] 46:[] 44:{"id":"cd1f69d16e68ccb1","slug":"coding-with-music-requirefixed","title":"Coding with Music","thumbnail":"84b1c40fc422acdec63948dbd45746cc0f1081fbcbc07d661a6ebe3532cef27c","access_level":"public","create_time":"$D2021-09-18T13:24:07.713Z","update_time":"$D2021-09-18T13:41:23.750Z","view_time":null,"first_public_time":"$D2021-09-18T13:30:44.651Z","has_unpublished_edits":null,"fork":{"id":"c2797ba90deb5251","slug":"coding-with-music","title":"Coding with Music","owner":{"id":"d3a5c7e199005588","login":"nturley","name":"Neil Turley"}},"stars":4,"starred":false,"owner":{"type":"team","id":"6aa75e0ed4c47ade","login":"mazeballsold","name":"Dan Brickley","avatar_url":"https://avatars-next.observableusercontent.com/c1e798353c1834a30de7804f61bbfd5116503c44db4803547a43228e89afc8cb","tier":"starter_2024","bio":"broken account, please ignore - migrating","following":false},"version":832,"publish_version":832,"role":null,"authored":false,"authors":[{"type":"individual","id":"44d3c304df1c5e78","login":"mazeballsold","name":"Dan Brickley","avatar_url":"https://avatars-next.observableusercontent.com/c1e798353c1834a30de7804f61bbfd5116503c44db4803547a43228e89afc8cb","tier":null,"bio":"broken account, please ignore - migrating","following":false}],"members":[{"type":"individual","id":"44d3c304df1c5e78","login":"mazeballsold","name":"Dan Brickley","avatar_url":"https://avatars-next.observableusercontent.com/c1e798353c1834a30de7804f61bbfd5116503c44db4803547a43228e89afc8cb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Coding with Music","cells":[{"id":0,"value":"md`# Coding with Music\n\nThis notebook is experimenting with using ObservableHQ notebooks for music. To turn on the sound, check the \"Unmute Sound\" check box. I also recommend you don't modify Beats per Minute while the sound is unmuted.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"viewof config = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"md` ## Beats\nWe will loop a section of music kinda like a measure. Each measure will have some number of beats. All cells that reference the beat number will get executed every time the beat number changes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"beat = {\n let i = 0;\n while (true) {\n if (config.unmute) {\n yield i;\n }\n i = (i + 1) % config.bpl;\n await Promises.delay(convertBpmToMspb(config.bpm));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"viewof hihatConfig = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"{\n hihat.volume.value = hihatConfig.volume;\n (mutable hiHatEn = hihatConfig.enabled);\n return md`Volume: ${ hihatConfig.volume } dB`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"md`Here, we create sound player object for the hi hat.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"hihat = new Tone.Player (hihatUrl).toMaster();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"md`On the offbeats (odd beat numbers), we play the hihat sound`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"{\n // use a mutable to avoid re-executing when they modify the volume\n if (mutable hiHatEn) {\n if (beat % 2 == 1) hihat.restart()\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"md`Tonejs has a couple of preset synthesizers to user, the basic one is just named \"Synth\". We will create a synthesizer for each voice, because it seems like the same synthesizer can't play two notes simultaneously.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"s1 = getSynth(new Tone.Synth())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"md`We're going to use 1, 3, 5, and 8 in the key of C. The numbers here correspond to the numbers in the zero-indexed chromatic scale.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"n1 = Tone.Frequency(\"C4\").harmonize([0, 4, 7, 11])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"md`Every beat we will pick a random number from n1 and play it for half a beat`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"{\n beat;\n s1.triggerAttackRelease(n1[Math.floor(Math.random()*n1.length)], oneBeatSecs/2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"md`Our second synth is going to be a bit louder (seven decibals)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"s2 = getSynth(new Tone.Synth(), 7)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"md`On beats 0, 3, and 6 we will play E3, C3, and A2 for two beats`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"{\n if (beat == 0) {\n s2.triggerAttackRelease('E3', oneBeatSecs*2);\n } else if (beat == 3) {\n s2.triggerAttackRelease('C3', oneBeatSecs*2);\n } else if (beat == 6) {\n s2.triggerAttackRelease('A2', oneBeatSecs*2);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"s3 = getSynth(new Tone.FMSynth(), 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"md`For s3 we will play a C2 for 4 beats and then a G1 for 4 beats`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"{\n if (beat == 0) {\n s3.triggerAttackRelease('C2', oneBeatSecs*4);\n }\n if (beat == 4) {\n s3.triggerAttackRelease('G1', oneBeatSecs*4);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"s4 = getSynth(new Tone.FMSynth, -2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"{\n if (beat == 1) {\n s4.triggerAttackRelease('A4', oneBeatSecs);\n } else if (beat == 3) {\n s4.triggerAttackRelease('G4', oneBeatSecs*2);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"import {form} from '@mbostock/form-input'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"renderScale('Eb')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"norm = (sciName) => {\n return sciName.replace('#', '').replace('b',''); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"Tone = require('tone')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"cMajorScale = Tone.Frequency(\"A4\").harmonize([0, 2, 4, 5, 7, 9, 11, 12]).map(t => t.toNote())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"//Vex = require(\"vexflow\")\n\nVex = require('https://bundle.run/vexflow@3.0.9')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"renderNotes = (noteArray, key) => {\n let notesCopy = [...noteArray];\n notesCopy[0] += '/q';\n let ezStr = notesCopy.join(', ')\n const result = html`

`;\n const renderer = new Vex.Flow.Renderer(result, Vex.Flow.Renderer.Backends.SVG);\n let vf = new Vex.Flow.Factory({renderer: renderer});\n let score = vf.EasyScore();\n let notes = score.notes(ezStr, {stem: 'up'});\n score.set({time:(noteArray.length+'/4')});\n let system = vf.System();\n system.options.width = 60 * noteArray.length+40;\n let voice = score.voice(notes, {stem: 'up'});\n system.addStave({voices: [voice]}).addClef('treble').setKeySignature(key)\n vf.draw();\n const playButton = html`

Hi Hat Configuration