2f:T6c3,chart = { const { wave, volume, fade, hz, seconds } = sound const fn = fns[wave] // const easing = easings[easingName] // const cutoff = Math.floor(context.sampleRate / 100) const audioData = getAudioData({ volume, seconds, hz, fn, fade }) const visualizedData = getAudioData({ volume, seconds: displayedSeconds, hz, fn, fade }) const play = () => playAudioData(audioData) const data = visualizedData // chart dimensions const width = 640 const height = 400 const marginTop = 25 const marginRight = 20 const marginBottom = 35 const marginLeft = 40 const x = d3.scaleLinear() .domain(d3.extent(data.keys(), d => d)) .range([marginLeft, width - marginRight]) const y = d3.scaleLinear() .domain(d3.extent([-1, 1], d => d)).nice() .range([height - marginBottom, marginTop]) const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;") svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x)) svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) svg.append("polyline") .datum(data.entries()) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("points", d => [...d].map(([cx, cy]) => [x(cx), y(cy)].join(',')).join(' ')) return htl.html`

${audioData.length.toLocaleString('en-US')} samples condensed to ${visualizedData.length.toLocaleString('en-US')}

${svg.node()}

` }30:T609,getAudioFromNotes = () => { const durationMultiplierSeconds = 0.1 const aLow = 440 const aHigh = 880 const octaveMultiplier = 2 const semitoneMultiplier = octaveMultiplier ** (1 / 12) const A = 440 const scale = Object.fromEntries(Object.entries({ C: -9, D: -7, E: -5, F: -4, G: -2, A: 0, B: 2, }).map(([k, v]) => [k, A * semitoneMultiplier ** v])) function parse(noteStr) { return [...noteStr.matchAll(/(?[A-Ga-gX_])(?[#b])?(?\d+)?(\s*)(?-*)/gu)].map((x) => { let { letter, octave, modifier, length } = x.groups octave = Number(octave ?? 4) + (semitoneModifier / 12) const duration = ((length.length) + 1) / speedModifier let hz if (letter === '_') { hz = 0 } else if (letter === 'X') { hz = 1 } else { hz = scale[letter] hz *= modifier === '#' ? semitoneMultiplier : modifier === 'b' ? 1 / semitoneMultiplier : 1 hz *= octaveMultiplier ** (octave - 4) } return { hz, duration } }) } const parts = Object.values(inputs).map((x) => { const fn = fns[x.wave] const noteStr = x.notes const volume = x.volume * volumeModifier const fade = x.fade const audioDatas = parse(noteStr).map(({ hz, duration }) => { const seconds = duration * durationMultiplierSeconds return getAudioData({ volume, seconds, hz, fn, fade }) }) return concat([new Float32Array(12e3), ...audioDatas]) }) return multiplex(parts) }31:[] 2d:{"title":"Audio Experiments","cells":[{"id":0,"value":"# Audio Experiments\n\nAudio experiments","pinned":false,"hidden":false,"mode":"md"},{"id":882,"value":"## Sound","pinned":false,"hidden":false,"mode":"md"},{"id":819,"value":"viewof sound = part({ name: 'sound', wave: 'sine', volume: 0.5, fade: 1, hz: 440, seconds: 1 }).sound","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"viewof displayedSeconds = Inputs.range([0.01, sound.seconds], { label: 'Displayed as seconds', value: 0.01, step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"### Waveform","pinned":false,"hidden":false,"mode":"md"},{"id":2,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"## Melody and Harmony","pinned":false,"hidden":false,"mode":"md"},{"id":998,"value":"viewof speedModifier = Inputs.range([0.05, 2], { label: 'Speed modifier', value: 1, step: 0.05 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1000,"value":"viewof semitoneModifier = Inputs.range([-24, 24], { label: 'Semitone modifier', value: 0, step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1185,"value":"viewof volumeModifier = Inputs.range([0.1, 2], { label: 'Volume modifier', value: 1, step: 0.05 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"\nviewof inputs = Inputs.form({\n ...part({ name: 'melody', wave: 'triangle', volume: 1, fade: 0.6,\n notes: `\n G4 - C5 - C5 D5 C5 B4 A4 - F4 -\n A4 - D5 - D5 E5 D5 C5 B4 - G4 -\n B4 - E5 - E5 F5 E5 D5 C5 - A4 -\n G4 G4 A4 - D5 - B4 - C5 - - - - -\n `\n }),\n ...part({ name: 'harmony', wave: 'square', volume: 0.1, fade: 0.2,\n notes: `\n G1 -\n C3 - - - - - F3 - - - - -\n G3- F#3 - G3- E3 - - - - -\n A3 - - - - - F3 - - - - -\n G3 - F3 - E3 - C3 - - - - -\n `\n }),\n ...part({ name: 'percussion', wave: 'whiteNoise', volume: 0.1, fade: 0.9,\n notes: `\n _ -\n X _ X X X _ X _ X _ X _\n X _ X X X _ X _ X _ X _\n X _ X X X _ X _ X _ X _\n X X X _ X _ X _ X X X - -\n `\n }),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"{\n return htl.html`\n

\n \n \n

\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"{\n // https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaStreamDestination\n\n function save() {\n const chunks = []\n const audioData = getAudioFromNotes()\n \n const dest = context.createMediaStreamDestination()\n const mediaRecorder = new MediaRecorder(dest.stream)\n\n const buffer = context.createBuffer(1, audioData.length, context.sampleRate)\n const source = context.createBufferSource()\n\n buffer.copyToChannel(audioData, 0)\n\n source.buffer = buffer\n source.connect(dest)\n\n mediaRecorder.start()\n source.start(0)\n\n source.addEventListener('ended', (e) => {\n mediaRecorder.stop()\n })\n\n mediaRecorder.addEventListener('dataavailable', (e) => {\n chunks.push(e.data)\n })\n \n mediaRecorder.addEventListener('stop', (e) => {\n const file = new File(chunks, 'audio.webm', { type: \"video/webm;codecs=vp8\" })\n\n downloadFile(file)\n })\n }\n\n return htl.html`