31:T556,keybindings = { const ret = html`Put your cursor in this field to use keybindings:
space to pause/play; left and right move the interval; shift left/right change interval size; up and down arrows set adjustment size.` ret.onkeydown = e => { const js = mutable jump_size console.log(e.code, a.paused) e.code == 'Space' ? mutable on ? (mutable on = false) : (a.currentTime = mutable start, mutable on = true) : e.code == 'ArrowUp' ? (mutable jump_size = Math.min(a.duration, js + (mutable end - mutable start) * .05), null) : e.code == 'ArrowDown' ? (mutable jump_size = Math.max(.02, js - (mutable end - mutable start) * .05), null) : e.code == 'ArrowRight' && e.shiftKey ? (mutable end = Math.min(mutable end + js, a.duration), null) : e.code == 'ArrowLeft' && e.shiftKey ? (mutable end = Math.max(mutable end - js, mutable start), null) : e.code == 'ArrowRight' ? (mutable start = Math.min(mutable end, mutable start + js), mutable end = Math.min(mutable end + js, a.duration), null) : e.code == 'ArrowLeft' ? (mutable start = Math.max(0, mutable start - js), mutable end = Math.max(mutable end - js, mutable start), null) : console.log(e) document.dispatchEvent(new CustomEvent('test')) mutable key_pressed = true } return ret }32:T75e,graph_freq_anon = { const canvasCtx = canvas.getContext('2d'); canvasCtx.clearRect(0, 0, canvas.width, canvas.height); // driven by data data function draw() { //Draw gray background canvasCtx.fillStyle = 'rgb(110, 110, 110)'; canvasCtx.fillRect(0, 0, canvas.width, canvas.height); //Draw spectrum const barWidth = (width / 88); let posX = 0; const max_fft_height = -80 canvasCtx.fillStyle = 'rgb(255, 110, 110)'; canvasCtx.fillRect(0, canvas.height - ((sensitivity + 90) / 250 * canvas.height * 3), canvas.width, 2) const key_height = 80 for (let i = 1; i <= 88; i++) { let f = (27.5*2**((i-1)/12)) let name = key_name(f) let color = name && name.includes('#') ? 'black' : 'white' canvasCtx.fillStyle = color == 'white' ? 'rgb(255, 255, 255)' : 'rgb(0, 0, 0)' canvasCtx.fillRect((i-1) * barWidth, 0, barWidth, key_height) // key dividers canvasCtx.fillStyle = 'rgb(110, 110, 110)' canvasCtx.fillRect((i-1) * barWidth, 0, 1, key_height) } for (let i = 0; i < analyser.frequencyBinCount; i++) { let f = i * (context.sampleRate /2) / analyser.frequencyBinCount let name = key_name(f) let color = name && name.includes('#') ? 'black' : 'white' const barHeight = (data[i] == 0 ? 0 : data[i] + 90) * 7; // if (!mutable peaks.includes(f) && mutable peaks.map(key_name).includes(name)) { // continue; // } if (!mutable peaks.includes(f)) { canvasCtx.fillStyle = 'rgb(255, 0, 255)' canvasCtx.fillRect(key_n(f) * barWidth, canvas.height-barHeight, barWidth, barHeight) continue; } canvasCtx.fillStyle = 'rgb(255, 50, 50)'; // red bar canvasCtx.fillRect(key_n(f) * barWidth, canvas.height - barHeight, barWidth, barHeight); // red key canvasCtx.fillRect(key_n(f) * barWidth, 0, barWidth, key_height) //posX += barWidth + 1; } }; draw(); }33:[{"id":"967cdbbaeae0110f3a9c4e43f518507c92ac4d2872324b6a3d3d4823df58fb429e67c159703ce73e4a81425c23bba8d4bcf72b44d34bb3d39d101dba43337276","href":"https://static.observableusercontent.com/files/967cdbbaeae0110f3a9c4e43f518507c92ac4d2872324b6a3d3d4823df58fb429e67c159703ce73e4a81425c23bba8d4bcf72b44d34bb3d39d101dba43337276","name":"海が見える街 (Jazz Version)-palWMnxi4GU.mp3","type":"audio/mpeg","lastModified":1632692832876.43,"size":3822597}] 2f:{"title":"Piano transcription tools","cells":[{"id":0,"value":"md`# Piano transcription tools`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1367,"value":"md`Still needs work:\n* fix off-by-one notes\n * this may be an issue with the way the bars are drawn\n * right now it's just drawing the highest point in the bucket\n* ignore resonant tones\n* show rolling history like flowkey`","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"viewof buttons = {\n const pause_b = button({value: 'pause'})\n const play_b = button({value: 'play'})\n pause_b.onclick = () => pause()\n play_b.onclick = () => {\n play()\n }\n return html`${play_b}${pause_b}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"canvas = {\n const ctx = DOM.context2d(width, 350)\n return ctx.canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"file_choose_gui_anon = {\n const el = file_input({title: 'Choose an MP3', value: undefined})\n el.onchange = e => mutable file = e.target.files[0]\n return el\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"viewof test = {\n key_pressed\n \n const el = rangeSlider({title: \"Loop range [(shift) left + right]\", value: [mutable start, mutable end], max: a.duration})\n \n el.oninput = e => {\n mutable start = e.target.value[0]\n mutable end = e.target.value[1]\n }\n\n return el\n }\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"viewof position = {\n now\n return slider({value: a.currentTime, max: a.duration})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1088,"value":"viewof sensitivity = slider({title: 'Sensitivity', value: mutable default_sensitivity, min: -100, max: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"viewof filter_treble = select({title: 'Filter treble', options: [ 'no', 'yes',]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"viewof ms_between_loops = slider({title: 'Loop pause length (ms)', value: 1000 * 2.5, max: 1000 * 5})","pinned":false,"hidden":false,"mode":"ojs"},{"id":778,"value":"viewof jump_size_slider = {\n key_pressed\n mutable jump_size = Math.min(end - start, mutable jump_size)\n mutable jump_size = Math.max(.02, mutable jump_size)\n const el = slider({title: 'Keyboard jump size (s) [up + down arrows]', value: mutable jump_size, min: .02, max: end - start})\n el.onchange = e => {\n mutable jump_size = Number(e.target.value)\n }\n return el\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"viewof playbackrate = slider({title: 'Playback Rate', value: 1, min: 0.01, max: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1158,"value":"viewof n_bins = select({value: 8192, options: [...Array(5)].map((_, i) => 2**(11 + i))})","pinned":true,"hidden":false,"mode":"ojs"},{"id":970,"value":"mutable peaks_hist = [[]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":964,"value":"mutable peaks = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":661,"value":"viewof autoloop = {\n const el = select({title: 'Auto-loop', options: [ 'yes', 'no'], value: 'yes'})\n return el\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":619,"value":"mutable file = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":788,"value":"mutable jump_size = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":718,"value":"mutable start = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"filter = {\n const f1 = context.createBiquadFilter()\n f1.type = 'lowpass'\n f1.frequency.setValueAtTime(100, context.currentTime)\n const f2 = context.createBiquadFilter()\n f1.type = 'lowshelf'\n f2.frequency.setValueAtTime(240, context.currentTime)\n f2.gain.setValueAtTime(40, context.currentTime)\n return f1.connect(f2)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":805,"value":"mutable on = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":815,"value":"pause = () => {\n mutable on = false\n mutable looping = false\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":861,"value":"play = () => {\n mutable on = true\n mutable looping = true\n if (a.currentTime >= end) a.currentTime = start \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":808,"value":"handle_on_change_anon = {\n on ? (context.resume(), a.play()) : a.pause()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":733,"value":"mutable end = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":749,"value":"mutable key_pressed = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":1099,"value":"{ \n a.playbackRate = playbackrate\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"a = {\n filter\n \n const el = html`

`\n el.crossOrigin = 'anonymous'\n await new Promise(resolve => el.onloadedmetadata = resolve)\n return el\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"context = new AudioContext()","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"analyser = {\n output\n \n const ret = context.createAnalyser()\n output.connect(ret)\n ret.fftSize = n_bins//4096//2048\n return ret\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"data = {\n const data = new Float32Array(analyser.frequencyBinCount)\n while(true) {\n if (!mutable on) {\n yield data\n continue\n }\n analyser.getFloatFrequencyData(data)\n let data_max = data.reduce((acc, p) => p > acc ? p : acc, -9999999)\n let all_peaks = [...data].map((p, i) => data[i-1] < p && data[i+1] < p ? p : undefined).filter(p=>p)\n mutable default_sensitivity = data_max - Math.abs(data_max) *.2\n mutable peaks = [...data].map((p, i) => p > sensitivity && data[i-1] < p && data[i+1] < p ? i * (context.sampleRate /2) / analyser.frequencyBinCount : undefined).filter(p => p)\n if (JSON.stringify(mutable peaks.map(key_name)) != JSON.stringify(mutable peaks_hist[0].map(key_name)) && mutable on)\n mutable peaks_hist = [mutable peaks.map(key_name), ...mutable peaks_hist].slice(0, 10)\n yield data\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1091,"value":"mutable default_sensitivity = -41","pinned":true,"hidden":false,"mode":"ojs"},{"id":1085,"value":"mutable temp = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":1001,"value":"key_name(1119)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1011,"value":"key_n(440)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1009,"value":"key_n = f => Math.round(49 + 12 *Math.log2(f/440))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1235,"value":"freq = n => 2**((n - 49)/12) * 440","pinned":true,"hidden":false,"mode":"ojs"},{"id":1241,"value":"freq(3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1276,"value":"names = [\"A\", \"A#/Bb\", \"B\", \"C\", \"C#/Db\", \"D\", \"D#/Eb\", \"E\", \"F\", \"F#/Gb\", \"G\", \"G#/Ab\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1274,"value":"[...Array(88)].map((_, i) => names[i % names.length] + (Math.floor(i / names.length) + 1).toString()) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":986,"value":"key_name = f => {\n let n = Math.round(49 + 12 * Math.log2(f/440))\n const names = [\"A\", \"A#/Bb\", \"B\", \"C\", \"C#/Db\", \"D\", \"D#/Eb\", \"E\", \"F\", \"F#/Gb\", \"G\", \"G#/Ab\"]\n const all_names = [...Array(88)].map((_, i) => names[i % names.length] + (Math.floor(i / names.length) + 1).toString()) \n return all_names[n - 2]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1150,"value":"2048 * (context.sampleRate /2) / analyser.frequencyBinCount","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"source = context.createMediaElementSource(a)","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"output = {\n source.disconnect()\n if (filter_treble === 'yes') {\n const ret = source.connect(filter); \n filter.connect(context.destination);\n return ret\n } else {\n source.connect(context.destination)\n return source\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"play_on_page_refresh = a.play() // keep playing on page refresh","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":812,"value":"mutable looping = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"handle_autoloop_anon = { // handle auto-looping\n while (true) {\n if (a.currentTime < start || a.currentTime > end + .2) {\n a.currentTime = start\n mutable on = true\n }\n if (a.currentTime > end && !a.paused) {\n a.pause()\n mutable looping = autoloop == 'yes'\n setTimeout(() => {\n console.log('looping')\n if (mutable looping && mutable on && a.currentTime >= end) {\n a.currentTime = start\n a.play()\n mutable looping = false\n }\n }, ms_between_loops)\n }\n yield\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"url = file ? 'data:audio/mp3;' + (await Files.url(file)).split(';')[1] : FileAttachment(\"海が見える街 (Jazz Version)-palWMnxi4GU.mp3\").url()//'https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {slider, button, select, file as file_input} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}