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:T68a,{ 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-Z_])(?[#b])?(?\d+)?(?-*)/gu)].map((x) => { let { letter, octave, modifier, length } = x.groups octave = Number(octave ?? 4) const duration = (length.length) + 1 let hz if (letter === '_') { hz = 0 } else { hz = scale[letter] hz *= modifier === '#' ? semitoneMultiplier : modifier === 'b' ? 1 / semitoneMultiplier : 1 hz *= octaveMultiplier ** (octave - 4) } return { hz, duration } }) } let nowPlaying async function play() { nowPlaying?.stop() const parts = Object.values(inputs).map((x) => { const fn = fns[x.wave] const noteStr = x.notes const volume = x.volume const fade = x.fade const audioDatas = parse(noteStr).map(({ hz, duration }) => { const seconds = duration * durationMultiplierSeconds return getAudioData({ volume, seconds, hz, fn, fade }) }) return concat(audioDatas) }) nowPlaying = playAudioData(multiplex(parts)) await nowPlaying.finished } return htl.html`

` }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":570,"value":"\nviewof inputs = Inputs.form({\n ...part({ name: 'melody', wave: 'square', volume: 0.5, fade: 1,\n // // Super Mario\n // notes: `\n // E5 E5 _ E5 _ C5 E5 _ G5- __ G4- __\n // C5-- G4-- E4- A4- B4- Bb4 A4- G4 C5 E5 A5- F5 G5- E5- C5 D5 B4--\n // C5-- G4-- E4- A4- B4- Bb4 A4- G4 C5 E5 A5- F5 G5- E5- C5 D5 B4--\n // `\n notes: `\n C- C\n D-- C-- F--\n E----- C- C\n D-- C-- G--\n F----- C- C\n C5-- A-- F--\n E-- D-- Bb- Bb\n A-- F-- G--\n F-----\n `\n }),\n ...part({ name: 'harmony', wave: 'sawtooth', volume: 0.2, fade: 0.3,\n notes: `\n _--\n F3----- F3--\n Bb3----- Bb3--\n C4----- C4--\n F3--------\n D4----- D4--\n Bb3----- Bb3--\n C4----- C4--\n F3-----\n `\n }),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":235,"value":"// Modified from https://stackoverflow.com/questions/3399925/actionscript-creating-square-triangle-sawtooth-waves-from-math-sin\n\nfns = {\n const sawtooth = (x) => (x - Math.floor(x + 1/2)) * 2\n \n return {\n sine: (x) => Math.sin(x / (1 / (Math.PI * 2))),\n square: (x) => Math.sign(Math.sin(2 * Math.PI * x)),\n sawtooth,\n triangle: (x) => 1 - Math.abs(sawtooth(x - 1/4)) * 2,\n whiteNoise: (x) => 2 * (Math.random() - 0.5),\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":789,"value":"function concat(audioDatas) {\n const length = audioDatas.reduce((total, arr) => total + arr.length, 0)\n const out = new Float32Array(length)\n\n let i = 0\n for (const audioData of audioDatas) {\n out.set(audioData, i)\n i += audioData.length\n }\n \n return out\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"function multiplex(audioDatas) {\n const length = Math.max(...audioDatas.map((x) => x.length))\n const out = new Float32Array(length)\n for (let i = 0; i < length; ++i) {\n for (const x of audioDatas) {\n out[i] += x[i] ?? 0\n }\n }\n\n return out\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"## Utils","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"function playAudioData(audioData) {\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(context.destination)\n source.start(0)\n\n return {\n stop: source.stop.bind(source),\n finished: new Promise((res) => source.addEventListener('ended', res)),\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"function getAudioData({ volume, seconds, hz, fn, fade }) {\n fade ??= 0\n \n const sampleFreq = context.sampleRate / hz\n const length = Math.floor(context.sampleRate * seconds)\n \n return Float32Array.from({\n length,\n }, (_, i) => fn(i / sampleFreq) * volume * (1 - (i / length * fade)))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"context = new AudioContext()","pinned":true,"hidden":false,"mode":"ojs"},{"id":690,"value":"part = ({ name, notes, wave, fade, volume, hz, seconds }) => ({\n [name]: Inputs.form(Object.fromEntries(Object.entries({\n _: htl.html`${name.charAt(0).toUpperCase() + name.slice(1)}`,\n wave: wave && fnNameSelect({ label: 'wave', value: wave ?? 'square' }),\n // easing: easingNameSelect({ label: 'easing', value: easing ?? 'inOutSin' }),\n volume: volume && Inputs.range([0, 1], { label: 'volume', value: volume, step: 0.1 }),\n fade: fade && Inputs.range([0, 1], { label: 'fade', value: fade, step: 0.1 }),\n notes: notes && Inputs.textarea({ label: 'notes', value: notes.trim().replaceAll(/^\\s+/gm, '') }),\n hz: hz && Inputs.number([100, 3520], { label: 'hz', value: hz, step: 1 }),\n seconds: seconds && Inputs.range([0.1, 1], { label: 'seconds', value: seconds, step: 0.1 }),\n }).filter(([_, v]) => v)))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"fnNameSelect = (props) => Inputs.select(Object.keys(fns), props)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}