44:["$","title",null,{"children":"Visualizaciones de audio | Sergio Rodríguez Gómez | Observable"}] 4c:T61d,viewof audioTrack = { // 1. Creamos ambos inputs por separado const select = Inputs.select(new Map([ ["Centro Bogotá", centroBogota], ["Cuitlacoche", cuitlacoche], ["Contrapunto", contrapunto] ]), {label: "Audio pregrabado:"}); const file = Inputs.file({label: "O sube tu propia grabación:", accept: "audio/*"}); // 2. Los agrupamos en un solo contenedor visual const form = html`

${select}

${file}

`; // 3. Asignamos el valor inicial (el del select) form.value = select.value; // 4. Lógica de actualización: Si cambian el select, usamos el archivo pregrabado select.addEventListener("input", (e) => { e.stopPropagation(); form.value = select.value; form.dispatchEvent(new Event("input")); // Avisa a Observable que algo cambió }); // 5. Lógica de actualización: Si suben un archivo, tomamos el control file.addEventListener("input", (e) => { e.stopPropagation(); if (file.value) { // Como tu código original espera un objeto con la propiedad "audio" (audioTrack.audio), // envolvemos el archivo subido en la misma estructura. // Usamos URL.createObjectURL para convertir el archivo físico en un enlace de memoria temporal. form.value = { audio: URL.createObjectURL(file.value) }; form.dispatchEvent(new Event("input")); } }); return form; }4d:Tabd,processWaveForm = async (audioBuffer, config) => { const sampleRate = audioBuffer.sampleRate; const length = audioBuffer.length; // 1. Forzar a Mono desde el inicio para ahorrar el 50% de memoria y CPU const offlineCtx = new OfflineAudioContext(1, length, sampleRate); const source = offlineCtx.createBufferSource(); source.buffer = audioBuffer; // 2. Un solo AnalyserNode limpio (eliminamos el channelSplitter y el generalAnalyzer) const analyzer = offlineCtx.createAnalyser(); analyzer.fftSize = config.fftResolution || 2048; analyzer.smoothingTimeConstant = config.smoothingTimeConstant || 0; const stride = analyzer.frequencyBinCount; // Siempre es fftSize / 2 const processorBufferSize = config.processorBufferSize || 4096; const tickCount = Math.ceil(length / processorBufferSize); // Buffer plano gigante y eficiente para toda la data del audio const fftDataBuffer = new Uint8Array(tickCount * stride); // 3. ScriptProcessor (la mejor opción síncrona para OfflineAudioContext) offlineCtx.createScriptProcessor = offlineCtx.createScriptProcessor || offlineCtx.createJavaScriptNode; const processor = offlineCtx.createScriptProcessor(processorBufferSize, 1, 1); let offset = 0; processor.onaudioprocess = () => { // En vez de crear múltiples arreglos, mapeamos una "ventana" directamente sobre el buffer principal if (offset + stride <= fftDataBuffer.length) { const freqData = new Uint8Array(fftDataBuffer.buffer, offset, stride); analyzer.getByteFrequencyData(freqData); offset += stride; } }; // Conexiones directas source.connect(analyzer); analyzer.connect(processor); processor.connect(offlineCtx.destination); source.start(0); // Procesar todo el audio a velocidad máxima (más rápido que el tiempo real) await offlineCtx.startRendering(); const duration = audioBuffer.duration; const maxFreq = sampleRate / 2; // 4. Optimización de datos para Observable Plot const vizObj = []; for (let strideBin = 0; strideBin < stride; strideBin++) { for (let tickBin = 0; tickBin < tickCount; tickBin++) { const val = fftDataBuffer[tickBin * stride + strideBin]; // FILTRO CLAVE: Solo guardamos los datos si hay sonido real. // Esto reduce cientos de miles de objetos basura de "silencio" a una fracción. if (val > 2) { vizObj.push({ timeBin: (tickBin * duration) / tickCount, freqBin: (strideBin * sampleRate) / analyzer.fftSize, val: val }); } } } return { fft: fftDataBuffer, dbRange: { minDecibels: analyzer.minDecibels, maxDecibels: analyzer.maxDecibels }, stride, tickCount, maxFreq, duration, viz: vizObj }; }4e:Te92,spectrogram = async (data, marginOptions) => { // By Sergio Rodríguez Gómez 2023 (Optimizado con Canvas Híbrido) const height = 600; const margin = Object.assign({l: 0.1 * width, r: 0.05 * width, t: 0.05 * height, b: 0.1 * height}, marginOptions); const wm = width - margin.l - margin.r; const hm = height - margin.t - margin.b; // 1. Escalas const x = d3.scaleLinear().domain([0, data.duration]).range([0, wm]); const y = d3.scaleSymlog().domain([1, 16000]).range([hm, 0]).constant(1000).clamp(true).nice(); const c = d3.scaleLinear().domain(d3.extent(data.viz, d => d.val)).range([0, 1]); // 2. Contenedor principal (Wrapper) const container = document.createElement("div"); container.style.position = "relative"; container.style.width = `${width}px`; container.style.height = `${height}px`; // 3. CAPA DE DATOS (Canvas de alto rendimiento) const canvas = document.createElement("canvas"); // Ajuste para pantallas Retina (alta densidad de píxeles) const dpr = window.devicePixelRatio || 1; canvas.width = wm * dpr; canvas.height = hm * dpr; canvas.style.position = "absolute"; canvas.style.left = `${margin.l}px`; canvas.style.top = `${margin.t}px`; canvas.style.width = `${wm}px`; canvas.style.height = `${hm}px`; const ctx = canvas.getContext("2d"); ctx.scale(dpr, dpr); // Fondo oscuro para contrastar el modo Inferno ctx.fillStyle = "#000"; ctx.fillRect(0, 0, wm, hm); // Cálculos de tamaño de celda para evitar iteraciones dentro del bucle const freqStep = data.maxFreq / data.stride; // Añadimos un solapamiento (Math.ceil + 1) para evitar las líneas de "grid" por el antialiasing const cellW = Math.ceil(wm / data.tickCount) + 1; // Pintar los píxeles masivamente for (let i = 0; i < data.viz.length; i++) { const d = data.viz[i]; const xPos = x(d.timeBin); const yPosBottom = y(d.freqBin); // El borde inferior de la celda const yPosTop = y(d.freqBin + freqStep); // El borde superior de la celda const cellH = Math.max(1, yPosBottom - yPosTop) + 1; // Altura variable por la escala logarítmica ctx.fillStyle = d3.interpolateInferno(c(d.val)); // En Canvas se dibuja desde la esquina superior izquierda (x, yTop, width, height) ctx.fillRect(Math.floor(xPos), Math.floor(yPosTop), cellW, cellH); } container.appendChild(canvas); // 4. CAPA DE INTERFAZ (SVG para ejes y texto nítido) const svg = d3.create("svg") .classed("spectrogram-svg", true) .attr("width", width) .attr("height", height) .style("position", "absolute") .style("left", "0px") .style("top", "0px") .style("pointer-events", "none"); // Permite que el ratón "traspase" el SVG si luego quieres añadir eventos al Canvas const cont = svg.append("g").attr("transform", `translate(${margin.l},${margin.t})`); // Eje X (Tiempo) svg.append("g") .attr("transform", `translate(${margin.l},${hm + margin.t})`) .call(d3.axisBottom(x) .tickFormat(n => `${parseInt(n/60)}:${(n%60+"").padStart(2, '0')}`) .ticks(30) ); // Eje Y (Frecuencia) svg.append("g") .attr("transform", `translate(${margin.l},${margin.t})`) .call(d3.axisLeft(y).ticks(22, "s")); // Etiquetas svg.append("text") .attr("transform", `translate(${width / 2}, ${height - (margin.b / 3)})`) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .text("Segundos"); svg.append("text") .attr("transform", `translate(${margin.l / 3}, ${height / 2}) rotate(-90)`) // Rotado para mejor lectura .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .text("Frec (Hz)"); container.appendChild(svg.node()); return container; }4f:T817,spectrogramPlayer = (audioTrack, viz) => { const div = d3.create("div").style("text-align", "center"); const player = div.append("audio") .attr("src", audioTrack) .attr("controls", true); const el = player.node(); // 1. Apuntar a la capa SVG dentro del nuevo contenedor híbrido const svg = d3.select(viz).select("svg"); // 2. Recuperar dimensiones directamente del SVG const width = +svg.attr("width"); const height = +svg.attr("height"); // Recreamos los márgenes usando la misma proporción que en el espectrograma const margin = {l: 0.1 * width, r: 0.05 * width, t: 0.05 * height, b: 0.1 * height}; const wm = width - margin.l - margin.r; // 3. Crear la línea indicadora (ahora cruzará correctamente la zona de datos) svg.selectAll(".playing-line").remove(); const line = svg.append("line") .classed("playing-line", true) .attr("y1", margin.t) .attr("y2", height - margin.b) .style("stroke", "red") .style("stroke-width", "2px") .style("opacity", 0); // Oculta hasta que el usuario dé play // 4. Sincronizar usando metadatos nativos del archivo de audio el.onloadedmetadata = () => { // Usamos el.duration real del archivo en lugar de buscar un atributo const x = d3.scaleLinear().domain([0, el.duration]).range([0, wm]); // Motor de animación eficiente anclado a la pantalla del navegador const updateLine = () => { if (!el.paused && !el.ended) { line.style("opacity", 1) .attr("x1", margin.l + x(el.currentTime)) .attr("x2", margin.l + x(el.currentTime)); requestAnimationFrame(updateLine); } }; // Disparar la animación solo cuando el audio se está reproduciendo el.onplay = () => requestAnimationFrame(updateLine); // Permitir que la línea salte si el usuario adelanta o retrasa el audio manualmente el.onseeked = () => { line.style("opacity", 1) .attr("x1", margin.l + x(el.currentTime)) .attr("x2", margin.l + x(el.currentTime)); }; }; return div.node(); }50:Td38,drawWaveform = async (audioUrl, marginOptions) => { const height = 200; // Usamos los mismos márgenes laterales del espectrograma para que se alineen const margin = Object.assign({l: 0.1 * width, r: 0.05 * width, t: 20, b: 40}, marginOptions); const wm = width - margin.l - margin.r; const hm = height - margin.t - margin.b; // 1. Decodificar audio const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); const response = await fetch(audioUrl); const arrayBuffer = await response.arrayBuffer(); const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer); const rawData = audioBuffer.getChannelData(0); const duration = audioBuffer.duration; // 2. Escalas de D3 const x = d3.scaleLinear().domain([0, duration]).range([0, wm]); const y = d3.scaleLinear().domain([-1, 1]).range([hm, 0]); // 3. Contenedor Híbrido const container = document.createElement("div"); container.style.position = "relative"; container.style.width = `${width}px`; container.style.height = `${height}px`; // 4. CAPA DE DATOS (Canvas de alto rendimiento) const dpr = window.devicePixelRatio || 1; const canvas = document.createElement("canvas"); canvas.width = wm * dpr; canvas.height = hm * dpr; canvas.style.position = "absolute"; canvas.style.left = `${margin.l}px`; canvas.style.top = `${margin.t}px`; canvas.style.width = `${wm}px`; canvas.style.height = `${hm}px`; const ctx = canvas.getContext("2d"); ctx.scale(dpr, dpr); ctx.fillStyle = "#1e1e1e"; ctx.fillRect(0, 0, wm, hm); // Línea central (Amplitud 0) const centerY = y(0); ctx.strokeStyle = "#444"; ctx.beginPath(); ctx.moveTo(0, centerY); ctx.lineTo(wm, centerY); ctx.stroke(); // Pincel de la onda sonora ctx.lineWidth = 1; ctx.strokeStyle = "#3388ff"; ctx.beginPath(); const step = Math.ceil(rawData.length / wm); for (let i = 0; i < wm; i++) { let min = 1.0; let max = -1.0; for (let j = 0; j < step; j++) { const datum = rawData[(i * step) + j]; if (datum !== undefined) { if (datum < min) min = datum; if (datum > max) max = datum; } } // D3 calcula automáticamente las alturas usando nuestra escala 'y' ctx.moveTo(i, y(max)); ctx.lineTo(i, y(min)); } ctx.stroke(); container.appendChild(canvas); // 5. CAPA DE INTERFAZ (SVG vectorial) const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("position", "absolute") .style("left", "0px") .style("top", "0px") .style("pointer-events", "none"); // Eje X (Tiempo) svg.append("g") .attr("transform", `translate(${margin.l},${hm + margin.t})`) .call(d3.axisBottom(x) .tickFormat(n => `${parseInt(n/60)}:${(n%60+"").padStart(2, '0')}`) .ticks(10) ); // Eje Y (Amplitud) svg.append("g") .attr("transform", `translate(${margin.l},${margin.t})`) .call(d3.axisLeft(y).ticks(5)); // Etiquetas svg.append("text") .attr("transform", `translate(${width / 2}, ${height - 5})`) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'bottom') .text("Segundos"); svg.append("text") .attr("transform", `translate(${margin.l / 3}, ${height / 2}) rotate(-90)`) .attr('text-anchor', 'middle') .text("Amplitud (-1 a 1)"); container.appendChild(svg.node()); return container; }51:[{"id":"30105497548d738313070d599f86c4910cdf0f3bddb07e77da66e0bc27d024b491e72230d3529ef3c86076204cab7eb698d4888b4ad99f58ddba6025f75cbcbe","href":"https://static.observableusercontent.com/files/30105497548d738313070d599f86c4910cdf0f3bddb07e77da66e0bc27d024b491e72230d3529ef3c86076204cab7eb698d4888b4ad99f58ddba6025f75cbcbe","name":"fft@1.js","type":"application/javascript","lastModified":1728310161904.061,"size":4984},{"id":"a114a73611b25bc1f33ace2ea21bdb8dc30e9967ba565d13dfd6327184c6b873b0b8194616a1bdddb8159a89c47be22debe1608b124ec110742f64c25127f5c3","href":"https://static.observableusercontent.com/files/a114a73611b25bc1f33ace2ea21bdb8dc30e9967ba565d13dfd6327184c6b873b0b8194616a1bdddb8159a89c47be22debe1608b124ec110742f64c25127f5c3","name":"CATH3@1.wav","type":"audio/vnd.wave","lastModified":1679633090740.565,"size":5076992},{"id":"010770593265e8119b1a5606c401472426deeb36c3a9e09e5bc01a3c089a1c6ad1ecee08efb0c15c8223ececf315160cc55cb2a764062069f2b6a5a8f9e0d95c","href":"https://static.observableusercontent.com/files/010770593265e8119b1a5606c401472426deeb36c3a9e09e5bc01a3c089a1c6ad1ecee08efb0c15c8223ececf315160cc55cb2a764062069f2b6a5a8f9e0d95c","name":"Contrapunto.wav","type":"audio/vnd.wave","lastModified":1679633195157.261,"size":13391426},{"id":"e03424916559573a2e219197632afdf87381fb2feff8d434f272357ffa0e701693cf97a70c5971042bb232aebf256abe788beb3f3fe99f7364914cf3646b9b02","href":"https://static.observableusercontent.com/files/e03424916559573a2e219197632afdf87381fb2feff8d434f272357ffa0e701693cf97a70c5971042bb232aebf256abe788beb3f3fe99f7364914cf3646b9b02","name":"CentroBogota.wav","type":"audio/vnd.wave","lastModified":1679407313086.537,"size":29622374},{"id":"20971a55c0dceb2d0e0c6da233d3aea8dd10ef00f32c9e0593449fb11ce225200eb332c44bd770063b58dd492f950347cb426a3f27e036e1dfb6342e2639480f","href":"https://static.observableusercontent.com/files/20971a55c0dceb2d0e0c6da233d3aea8dd10ef00f32c9e0593449fb11ce225200eb332c44bd770063b58dd492f950347cb426a3f27e036e1dfb6342e2639480f","name":"amen_break.wav","type":"audio/wav","lastModified":1778378150799,"size":1591912}] 48:{"id":"e18a4912c72ed17e","slug":"espectrograma","title":"Visualizaciones de audio","thumbnail":"c1abfa9892648f60e830ff34bb2f318eb57538b1883e0ca41f6d789248ef634c","access_level":"public","create_time":"$D2023-03-21T13:39:48.301Z","update_time":"$D2026-10-04T19:13:10.751Z","view_time":null,"first_public_time":"$D2023-03-21T13:39:48.301Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"305bf5080ae4580a","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez","avatar_url":"https://avatars-next.observableusercontent.com/6326606b0640f2597b352da73f7c073f29b44d4060f66cc47c575dd937903b31","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1360,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7d80462b6b41d223","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez","avatar_url":"https://avatars-next.observableusercontent.com/6326606b0640f2597b352da73f7c073f29b44d4060f66cc47c575dd937903b31","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7d80462b6b41d223","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez","avatar_url":"https://avatars-next.observableusercontent.com/6326606b0640f2597b352da73f7c073f29b44d4060f66cc47c575dd937903b31","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualizaciones de audio","cells":[{"id":0,"value":"# Visualizaciones de audio","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":662,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"## Waveform y espectrograma","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"drawWaveform(audioTrack.audio)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"viz = waveform2spectrogram(audioTrack.audio, {fftResolution: 256 * 16, processorBufferSize: 16384, smoothingTimeConstant: 0.5, margin: {}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"spectrogramPlayer(audioTrack.audio, viz)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"centroBogota = ({audio: await FileAttachment(\"CentroBogota.wav\").url(), id: \"Centro Bogotá\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"cuitlacoche = ({audio: await FileAttachment(\"CATH3@1.wav\").url(), id: \"Cuitlacoche\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"contrapunto = ({audio: await FileAttachment(\"Contrapunto.wav\").url(), id: \"Contrapunto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"loadWaveForm = async (waveformUrl) => {\n const audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n const resp = await fetch(waveformUrl)\n const waveDataBuffer = await resp.arrayBuffer()\n const audioBuffer = await audioCtx.decodeAudioData(waveDataBuffer)\n return audioBuffer\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"waveform2spectrogram = async (waveformUrl, userconfig) => {\n const config = { fftResolution: 32, smoothingTimeConstant: 0.6, processorBufferSize: 8192, ...userconfig }\n const audioBuffer = await loadWaveForm(waveformUrl);\n const data = await processWaveForm(audioBuffer, config);\n const svg = await spectrogram(data, userconfig.margin || {});\n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":645,"value":"d3_annotation = require(\"d3-svg-annotation\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"// annotateSpectrogram(audioTrack.id == \"Centro Bogotá\" ? anotaciones : audioTrack.id == \"Cuitlacoche\" ? anotaciones2 : audioTrack.id == \"Contrapunto\" ? anotaciones : anotaciones, viz)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"anotaciones = [\n {\n x: 750,\n y: 100,\n dx: 10,\n dy: 50,\n note: {\n label: \"Sonido de una campana de un vendedor de helados\"\n },\n color: \"white\"\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"anotaciones2 = [\n {\n x: 750,\n y: 100,\n dx: 150,\n dy: 50,\n note: {\n label: \"Otra anotación\"\n },\n color: \"white\"\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"annotateSpectrogram = (annotations, viz, annotationFormat) => {\n // 1. Apuntamos específicamente a la capa SVG dentro del contenedor híbrido\n const svg = d3.select(viz).select(\"svg\");\n\n // 2. Limpiamos anotaciones previas para no superponerlas\n svg.selectAll(\".annotation-group\").remove();\n\n const format = annotationFormat || d3_annotation.annotationCallout;\n let annotate = d3_annotation.annotation()\n .type(format)\n .annotations(annotations);\n\n // 3. Inyectamos el grupo de anotaciones dentro del SVG\n svg.append(\"g\")\n .attr(\"class\", \"annotation-group\")\n .call(annotate);\n\n return annotations;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"ondas = {\n const timeSeries = [];\n\n const tau = Math.PI * 2;\n const length = 4;\n const freq = f;\n const sampling = 1 / (2 * freq * tau * 8); // Nyquist sampling;\n\n const spectrum = [\n { nombre: \"onda 1\", freq: freq, amp: a * 1 },\n { nombre: \"onda 2\", freq: freq * 2, amp: a * 0.7 },\n { nombre: \"onda 3\", freq: freq * 3.5, amp: a * 0.5 },\n { nombre: \"onda 4\", freq: freq * 1.1, amp: a * 0.9 },\n { nombre: \"onda 5\", freq: freq * 1.3, amp: a * 0.3 },\n ];\n\n for (let i = 0; i < 3; i += sampling) {\n\n const os = [];\n for (let s of spectrum) {\n const o = Math.sin(i * tau * s.freq) * s.amp;\n timeSeries.push({v: o, i, tipo: s.nombre});\n os.push(o);\n }\n\n timeSeries.push({v: d3.sum(os), i, tipo: \"suma\"})\n }\n\n return {timeSeries, spectrum}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1043,"value":"viewof button = Inputs.button(\"Sonido (frecuencia x 20)\", {value: null, reduce: play})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"Frecuencia sonando: 20 x ${f} = ${20 * f}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1091,"value":"### Representación en el dominio del tiempo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1176,"value":"viewof selectorOndas = Inputs.checkbox([\"suma\",...d3.range(1, 6).map(d => \"onda \"+d)], {label: \"Selecciona ondas\", value: [\"suma\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"Plot.plot({\n color: {legend: true},\n y: {domain: [-1, 1]},\n width,\n marks: [\n Plot.ruleY([0]),\n Plot.ruleX(d3.range(3), {stroke: \"lightgray\"}),\n Plot.lineY(ondas.timeSeries.filter(d => selectorOndas.includes(d.tipo)), {x: \"i\", y: \"v\", z: \"tipo\", stroke: \"tipo\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"viewof a = Inputs.range([0, 1], {label: \"Amplitud\", step: 0.01})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"viewof f = Inputs.range([1, 20], {label: \"Frecuencia\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"### Representación en el dominio del espectro","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":878,"value":"Plot.plot({\n width,\n color: {legend: true, scheme: \"Inferno\", domain: [0, 1]},\n y: {domain: [0, 20], ticks: 20},\n marks: [\n Plot.rect([0],{x1: 0, y1: 0, x2: 3, y2: 100, fill: \"black\"}),\n Plot.rect(ondas.spectrum, {x1: 0, y1: d => d.freq - 0.25, x2: 3, y2: d => d.freq + 0.25, fill: \"amp\"}),\n // Plot.ruleY(ondas.spectrum, {strokeWidth: 10, stroke: \"amp\", y: \"freq\"}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1035,"value":"Tone = require('tone')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"Volume = new Tone.Volume((20 * Math.log10(a)) + 4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"synth = {\n //create a synth and connect it to the master output (your speakers)\n var synth = new Tone.PolySynth(Tone.Synth).chain(Volume, Tone.Master);\n synth.set({\n oscillator: {\n type: \"sine\"\n },\n envelope: {\n decay: 1,\n release: 1\n }\n });\n try {\n yield synth;\n yield invalidation;\n } finally {\n synth.dispose();\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"button","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"play = () => {\n synth.triggerAttackRelease(f * 20, '4n');\n return Math.random()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 24:null