2b:null 2c:["$","title",null,{"children":"Music experiments | Yuanjie (Tukey) Tu | Observable"}] 31:T643,{ const octaveKeyboardWidth = 161; const octaveKeyboardHeight = 120; const octaves = octaveMax - octaveMin + 1; const W = octaves * octaveKeyboardWidth; const H = octaveKeyboardHeight; const theKeyboard = htl.svg`

`; const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(width, 120); const ctx = renderer.getContext(); function makeBarNotes(keys, beatsPerBar, clef) { const notes = []; for (let key of keys) { const note = vfNote(key, duration, clef); notes.push(note); } const remainderBeats = notes.length % beatsPerBar; if (remainderBeats) for (let i = remainderBeats; i < beatsPerBar; i++) notes.push(vfNote("r", duration)); return notes; } const [beatsPerBar, barWidth] = duration == "q" ? [4, 250] : duration == "h" ? [2, 130] : [1, 60]; const bars = Math.ceil(keys.length / beatsPerBar); const maxBassClefFreq = freqRange(["D#4"])[0]; const clef = freqRange(keys)[1] <= maxBassClefFreq ? "bass" : "treble"; const clefWidth = 40; const wid = clefWidth + bars * barWidth; let stave = new Stave(10, 0, barWidth + clefWidth); stave .addClef(clef) /*.addTimeSignature("4/4")*/ .setContext(ctx) .draw(); do { const notes = makeBarNotes(keys.slice(0, beatsPerBar), beatsPerBar, clef); Formatter.FormatAndDraw(ctx, stave, notes); keys = keys.slice(beatsPerBar); if (keys.length > 0) { const newStave = new Stave(stave.x + stave.width, 0, barWidth); newStave.setContext(ctx).draw(); stave = newStave; } } while (keys.length > 0); return div; }34:Tdcf,// // Returns an array of SVG paths representing 12 keys (one octave) of a traditional piano. The class // of each path is the associated pitch // function oneOctaveKeys() { return [ // White keys htl.svg``, htl.svg``, htl.svg``, htl.svg``, htl.svg``, htl.svg``, htl.svg``, // Black keys htl.svg``, htl.svg``, htl.svg``, htl.svg``, htl.svg`` ]; }35:[{"id":"5b8e219fe23466b5c4ac52ba7e86fede255d7096e64137418b46346e98a059abcc5f4bba8b957f6e17d666c102013e221bc8efed8b171cb44c6444a62cdc0d28","href":"https://static.observableusercontent.com/files/5b8e219fe23466b5c4ac52ba7e86fede255d7096e64137418b46346e98a059abcc5f4bba8b957f6e17d666c102013e221bc8efed8b171cb44c6444a62cdc0d28","name":"Chord Database@2.csv","type":"text/csv","lastModified":1696527179164.745,"size":3520}] 2f:{"id":"b5e3ca7151b07908","slug":null,"title":"Music experiments","thumbnail":null,"access_level":"public","create_time":"$D2023-10-05T17:32:59.164Z","update_time":"$D2024-02-22T06:52:00.766Z","view_time":null,"first_public_time":"$D2023-10-05T17:32:59.164Z","has_unpublished_edits":null,"fork":{"id":"af8ce38ce0084801","slug":"music-experiments","title":"Music experiments","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"stars":0,"starred":false,"owner":{"type":"team","id":"38d64ae7e708b9b5","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/34bc1666f6489c9f64e21f0c1ce4779151877d75c3f3c3f065e58f6a9bd14f0e","tier":"starter_2024"},"version":583,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"450fe71eaac7001f","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/ea52f9066051a7ecd9e98037b8a1e1c0cf765011b054117f0758a83f8e870f29","tier":null}],"members":[{"type":"individual","id":"450fe71eaac7001f","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/ea52f9066051a7ecd9e98037b8a1e1c0cf765011b054117f0758a83f8e870f29","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Music experiments","cells":[{"id":0,"value":"# Music experiments\n\nSome experiments on music rendering and playing.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":578,"value":"$${textcolor('In progress', 'Red')} ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"
\n## Piano\n\nA virtual piano. Use the mouse to play notes.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"//\n// The piano is rendered between octaveMin and octaveMax. Change the cells below to\n// render more or less octaves\n//\noctaveMin = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"octaveMax = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"//\n// Key striking velocity (0-1). Higher velocities play louder!\n// \nvelocity = 0.7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"
\n## Chord and arpeggio playing\n\nFrom [Wikipedia's list of chords](https://en.wikipedia.org/wiki/List_of_chords)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":329,"value":"viewof chordName = Inputs.select(\n [...chordDatabase].map((d) => d.name),\n { label: \"Chord name\", value: \"Major chord\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"viewof tonic = Inputs.select(\n [\"C\", \"C#\", \"D\", \"D#\", \"E\", \"F\", \"F#\", \"G\", \"G#\", \"A\", \"A#\", \"B\"],\n { label: \"Tonic note\", value: \"C\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"viewof octave = Inputs.select([2, 3, 4, 5], { label: \"Octave\", value: 4 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"viewof arpeggioSpeed = Inputs.range([50, 1000], {\n label: \"Arpeggio speed (ms)\",\n value: 100,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"viewof playType = Inputs.radio([\"Chord\", \"Arpeggio\"], { value: \"Chord\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"playType == \"Chord\" ? showNotes([chordNotes], \"w\") : showNotes(chordNotes, \"q\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"disp = pianoDisplay()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"{\n const button = Inputs.button(\"Play\");\n button.oninput = () => {\n let timing = [];\n if (playType === \"Chord\") {\n for (let note of chordNotes) {\n timing.push({ press: 0, release: 1000, note });\n }\n } else {\n const duration = chordNotes.length * arpeggioSpeed;\n let time = 0;\n for (let note of chordNotes) {\n timing.push({ press: time, release: duration, note });\n time += arpeggioSpeed;\n }\n }\n disp.playNotes(timing);\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"chordNotes = {\n const entry = chordDatabase.filter((d) => d.name == chordName)[0];\n const pc = entry.pitchClasses\n .split(\" \")\n .map((digit) =>\n digit >= 0 && digit <= 9 ? +digit : digit == \"t\" ? 10 : 11\n );\n const P = [...pitches, ...pitches, ...pitches];\n const zero = pitches.indexOf(tonic);\n return pc.map((i) => {\n let j = i + zero;\n return P[j] + (octave + Math.floor(j / 12));\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"pitches = [\"C\", \"C#\", \"D\", \"D#\", \"E\", \"F\", \"F#\", \"G\", \"G#\", \"A\", \"A#\", \"B\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"
\n## The piano instrument","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"//\n// Number of velocity levels for the piano sampling (up to 16). More levels mean more quality, but also more processing\n//\nvelocities = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"piano = {\n const piano = new Piano({ velocities });\n\n // connect it to the speaker output\n piano.toDestination();\n\n // load samples\n await piano.load();\n\n return piano;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"
\n## Music notation utility","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"showNotes([\"C#4\", \"B4\", \"r\", [\"C4\", \"E4\"], \"C4\", \"C4\", \"C4\", \"C4\", \"C4\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"vfNote = {\n const { StaveNote, Accidental } = VexFlow;\n\n return function vfNote(keyOrKeys, duration = \"q\", clef = \"treble\") {\n if (keyOrKeys == \"r\" || keyOrKeys == \"R\") {\n return new StaveNote({ keys: [\"b/4\"], duration: duration+\"r\" });\n } else {\n const keys = keyOrKeys.constructor === Array ? keyOrKeys : [keyOrKeys];\n const vfKeys = [];\n const accidentals = [];\n for (let key of keys) {\n const [_, pitch, accidental, octave] = key.match(\n /([a-zA-Z])(#|b)*(\\d+)/\n );\n vfKeys.push(pitch + \"/\" + octave);\n accidentals.push(accidental ? new Accidental(accidental) : null);\n }\n let note = new StaveNote({ keys: vfKeys, duration, clef });\n for (let i = 0; i < accidentals.length; i++) {\n if (accidentals[i]) {\n note.addModifier(accidentals[i], i);\n }\n }\n return note;\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"function freqRange(keys) {\n const sorted = keys\n .filter((k) => k != \"r\")\n .flat()\n .map((k) => Tone.Frequency(k))\n .sort();\n return [Math.min(...sorted), Math.max(...sorted)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"
\n## Piano keys SVG\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"## Chord database\n\nFrom [Wikipedia's list of chords](https://en.wikipedia.org/wiki/List_of_chords)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"chordDatabase = await FileAttachment(\"Chord Database@2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"chordDatabase","database":"$undefined"},{"id":90,"value":"
\n## Imports\n\n\n - [Tone.js](https://github.com/Tonejs/Tone.js) for synthesizing sound.\n - [@tonejs/piano](https://github.com/tambien/Piano) piano instrument samples.\n - [Vex.Flow](https://www.vexflow.com/) for music notation.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"Tone = require(\"tone\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"Piano = import(\"https://cdn.skypack.dev/@tonejs/piano@0.2.1?min\").then(\n (obj) => obj.Piano\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"VexFlow = require(\"vexflow\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"