2d:null 2e:["$","title",null,{"children":"Coding with Music | Neil Turley | Observable"}] 33:[] 31:{"id":"c2797ba90deb5251","slug":"coding-with-music","title":"Coding with Music","thumbnail":"bf9100ee492f0aa1d12f5a897bca7c0748ceb20a373f5960efee185e58e2cd0e","access_level":"public","create_time":"$D2019-07-23T05:56:43.201Z","update_time":"$D2021-09-20T06:01:36.879Z","view_time":null,"first_public_time":"$D2019-07-24T05:02:04.399Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"d3a5c7e199005588","login":"nturley","name":"Neil Turley","avatar_url":"https://avatars-next.observableusercontent.com/1144dcde8da195bed152315b9c34a7cd1cc33f52ca513a9b8582d9a077aff812","tier":"starter_2024"},"version":1402,"publish_version":1402,"role":null,"authored":false,"authors":[{"type":"individual","id":"08c0e1b672bab3d7","login":"nturley","name":"Neil Turley","avatar_url":"https://avatars-next.observableusercontent.com/1144dcde8da195bed152315b9c34a7cd1cc33f52ca513a9b8582d9a077aff812","tier":null}],"members":[{"type":"individual","id":"08c0e1b672bab3d7","login":"nturley","name":"Neil Turley","avatar_url":"https://avatars-next.observableusercontent.com/1144dcde8da195bed152315b9c34a7cd1cc33f52ca513a9b8582d9a077aff812","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"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 \"Enable Beats\" checkbox\"\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"viewof config = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"md` ## Beats\nWe will play random notes in a chord while looping a randomly generated chord progression every ${config.mpl} measures. Each measure will have ${config.bpmeasure} beats.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"measureBeat = loopBeat % config.bpmeasure","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"measure = Math.floor(loopBeat / config.bpmeasure)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"md`\n## Chords\nOur chord progression will only use the primary chords (I, IV, V) in a random order, but it must start with I, and ends with an authentic cadence (V to I).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"key = 'C'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"chords = chordNums.map(n => majorScale[n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"currentChord = chords[measure]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"viewof hihatConfig = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"md`Let's use the hi hat on odd beats. Playing the hi hat on odd beats gives it a bit more of a swing and makes it sound less like a metronome.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"mutable hihatCircle = {\n if (hihatConfig.enabled && measureBeat%2==1) {\n hihat.start()\n return html``\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"viewof bassConfig = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1389,"value":"md`The bass will just play all three tones in the chord for the full measure. We adjusted the volume of the lower notes to be at a slightly louder volume than the high notes because the human ear is more sensitive to the higher frequencies.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"{\n if (bassConfig.enabled) {\n if (measureBeat == 0) {\n bass.forEach((b,i) => b.triggerAttackRelease(chordTones[measure][i], oneBeatSecs*config.bpmeasure));\n }\n return renderNotes(chordTones[measure], 'w')\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"viewof trebleConfig = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1393,"value":"md`This melody is just playing random notes in the chord an octave above the bass. It always starts each measure with the base of the current chord kinda like a guitar plucking pattern.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"{\n if (trebleConfig.enabled) {\n let note = Math.floor(Math.random()*3)\n if (measureBeat == 0) note = 0\n const noteName = majorScale[chordToneNums[measure][note]+7]\n treble.triggerAttackRelease(noteName, oneBeatSecs)\n return renderNotes([noteName], 'q')\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"import {form} from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"Tone = require('tone')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"treble = getSynth(new Tone.Synth(), trebleConfig.volume)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"bass = [1,-5,-10].map(v => getSynth(new Tone.Synth(), bassConfig.volume+v))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"convertBpmToMspb = (bpm) => {\n let bps = bpm / 60;\n let spb = 1/bps;\n let mspb = spb * 1000;\n return mspb;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"convertBpmToSpb = (bpm)=> {\n return convertBpmToMspb(bpm) / 1000;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"getSynth = (synthType, volume=1) => {\n const synth = synthType.toMaster();\n invalidation.then(() => synth.dispose());\n synth.volume.value = volume;\n return synth;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"oneBeatSecs = convertBpmToSpb(config.bpm)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"hihatUrl = 'https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/hihat-close.wav'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"{\n hihat.volume.value = hihatConfig.volume\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"hihat = new Tone.Player(hihatUrl, hihatConfig.volume).toDestination();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"renderNotes = (notes, duration) => {\n const VF = Vex.Flow;\n const result = html`

`\n var renderer = new VF.Renderer(result, VF.Renderer.Backends.SVG);\n var context = renderer.getContext();\n var stave = new Vex.Flow.Stave(0, 0, 400);\n renderer.resize(80, 120);\n stave.addClef(\"bass\")\n stave.setContext(context).draw();\n var notes = [\n // A quarter-note C.\n new VF.StaveNote({clef: \"bass\", keys: notes.map(n => n[0]+'/'+n[1]), duration: duration }),\n];\n\n// Create a voice in 4/4 and add the notes from above\nvar voice = new VF.Voice({num_beats: duration=='q'?1:4, beat_value: 4});\nvoice.addTickables(notes);\n\n// Format and justify the notes to 400 pixels.\nvar formatter = new VF.Formatter().joinVoices([voice]).format([voice], 400);\n\n// Render voice\nvoice.draw(context, stave);\n return result\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1106,"value":"Vex = require('https://bundle.run/vexflow@3.0.9')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"chordTones = chordToneNums.map(n => n.map(t => majorScale[t]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"chordToneNums = chordNums.map(c => [0,2,4].map(n => c+n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"chordNums = Array.from(Array(config.mpl).keys()).map(i => {\n if (i==0 || i==config.mpl-1) return 0\n if (i == config.mpl -2) return 2\n return Math.floor(Math.random()*3)\n}).map(n => primaryChordNums[n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1010,"value":"primaryChordNums = [0,3,4]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"primaryChords = primaryChordNums.map(c => majorScale[c])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"majorScale = Tone.Frequency(key+'2').harmonize([0, 2, 4, 5, 7, 9, 11, 12, 14, 16, 17, 19, 21, 23, 24, 26]).map(t => t.toNote())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"beatsPerLoop = config.bpmeasure * config.mpl ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"loopBeat = {\n let i = 0;\n while (true) {\n if (config.unmute) {\n yield i;\n }\n i = (i + 1) % beatsPerLoop;\n await Promises.delay(convertBpmToMspb(config.bpm));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"

Song Config

Hi Hat

Bass

Melody