3e:null 3f:["$","title",null,{"children":"Audio in observable | rolyhudson | Observable"}] 45:Teca,audioData = { console.log("🔍 Starting audioData cell debug"); console.log("📁 fileInput:", fileInput); console.log("📂 fileInput.files:", fileInput.files); if (!fileInput) { console.log("❌ No fileInput found"); return "No fileInput found"; } if (!fileInput.files) { console.log("❌ fileInput.files is null/undefined"); return "fileInput.files is null/undefined"; } if (!fileInput.files[0]) { console.log("ℹ️ No file selected yet"); return "No file selected yet - please select a file"; } const file = fileInput.files[0]; console.log("📄 File selected:", file.name, file.type, file.size); try { console.log("🎵 Creating AudioContext..."); const audioContext = new (window.AudioContext || window.webkitAudioContext)(); console.log("✅ AudioContext created:", audioContext); console.log("🔊 AudioContext state:", audioContext.state); // Resume context if needed if (audioContext.state === 'suspended') { console.log("⏯️ Resuming suspended AudioContext..."); await audioContext.resume(); console.log("✅ AudioContext resumed, new state:", audioContext.state); } console.log("📖 Reading file as ArrayBuffer..."); const arrayBuffer = await file.arrayBuffer(); console.log("✅ ArrayBuffer created, size:", arrayBuffer.byteLength); console.log("🎼 Decoding audio data..."); const audioBuffer = await audioContext.decodeAudioData(arrayBuffer); console.log("✅ Audio decoded successfully!"); console.log("📊 Audio info:", { duration: audioBuffer.duration, sampleRate: audioBuffer.sampleRate, numberOfChannels: audioBuffer.numberOfChannels, length: audioBuffer.length }); console.log("🎯 Extracting channel data..."); const channelData = audioBuffer.getChannelData(0); console.log("✅ Channel data extracted, length:", channelData.length); console.log("📈 Sample data preview:", channelData.slice(0, 10)); const allChannels = []; for (let i = 0; i < audioBuffer.numberOfChannels; i++) { allChannels.push(audioBuffer.getChannelData(i)); } console.log("✅ All channels extracted:", allChannels.length); const result = { fileName: file.name, samples: channelData, allChannels: allChannels, sampleRate: audioBuffer.sampleRate, duration: audioBuffer.duration, length: channelData.length, numberOfChannels: audioBuffer.numberOfChannels, buffer: audioBuffer, context: audioContext, getRMS: (start = 0, end = channelData.length) => { let sum = 0; for (let i = start; i < end; i++) { sum += channelData[i] * channelData[i]; } return Math.sqrt(sum / (end - start)); }, getPeak: (start = 0, end = channelData.length) => { let peak = 0; for (let i = start; i < end; i++) { peak = Math.max(peak, Math.abs(channelData[i])); } return peak; } }; console.log("🎉 audioData object created successfully!"); console.log("🔧 Testing helper methods..."); console.log("📊 RMS:", result.getRMS()); console.log("📈 Peak:", result.getPeak()); return result; } catch (error) { console.error("💥 Error in audioData creation:", error); console.error("📋 Error details:", { name: error.name, message: error.message, stack: error.stack }); // Return error info for debugging return { error: true, errorType: error.name, errorMessage: error.message, fileInfo: { name: file.name, type: file.type, size: file.size } }; } }46:Td05,frequencyAnalyzer = { if (!audioData) { return html`

⚠️ Load an audio file first to use the frequency analyzer

`; } const canvas = html`

`; const ctx = canvas.getContext('2d'); // Create analyser node using the loaded audio context const analyser = audioData.context.createAnalyser(); analyser.fftSize = 2048; analyser.smoothingTimeConstant = 0.8; const bufferLength = analyser.frequencyBinCount; const dataArray = new Uint8Array(bufferLength); let source = null; let animationId = null; const controls = html`

FFT Size:

`; function draw() { analyser.getByteFrequencyData(dataArray); ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, canvas.width, canvas.height); const barWidth = (canvas.width / bufferLength) * 2.5; let x = 0; for (let i = 0; i < bufferLength; i++) { const barHeight = (dataArray[i] / 255) * canvas.height; // Create a nice gradient effect const hue = (i / bufferLength) * 240; // Blue to red spectrum const saturation = 70; const lightness = 30 + (dataArray[i] / 255) * 40; ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`; ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight); x += barWidth + 1; } animationId = requestAnimationFrame(draw); } controls.querySelector('#startAnalysis').onclick = () => { // Stop any existing source if (source) { source.disconnect(); source.stop(); } // Create new source and connect to analyser source = audioData.context.createBufferSource(); source.buffer = audioData.buffer; source.connect(analyser); analyser.connect(audioData.context.destination); // Start playback and visualization source.start(0); draw(); // Auto-stop when audio ends source.onended = () => { if (animationId) { cancelAnimationFrame(animationId); animationId = null; } }; }; controls.querySelector('#stopAnalysis').onclick = () => { if (source) { source.stop(); source = null; } if (animationId) { cancelAnimationFrame(animationId); animationId = null; } // Clear the canvas ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, canvas.width, canvas.height); }; controls.querySelector('#fftSelect').onchange = (e) => { analyser.fftSize = parseInt(e.target.value); }; const container = html`

${controls} ${canvas}

`; return container; }47:T1680,// Cell 1: Beat Detection Class class BeatDetector { constructor(audioData, options = {}) { this.audioData = audioData; this.sampleRate = audioData.sampleRate; this.samples = audioData.samples; // Configuration this.windowSize = options.windowSize || 1024; this.hopSize = options.hopSize || 512; this.threshold = options.threshold || 1.3; this.minInterval = options.minInterval || 0.1; // Minimum time between beats (seconds) this.beats = []; this.spectralFlux = []; this.onsets = []; } // Apply Hamming window hammingWindow(size) { const window = new Float32Array(size); for (let i = 0; i < size; i++) { window[i] = 0.54 - 0.46 * Math.cos(2 * Math.PI * i / (size - 1)); } return window; } // FFT implementation (simplified) fft(signal) { const N = signal.length; const X = new Array(N); // Initialize for (let k = 0; k < N; k++) { X[k] = { real: 0, imag: 0 }; } // DFT calculation for (let k = 0; k < N; k++) { for (let n = 0; n < N; n++) { const angle = -2 * Math.PI * k * n / N; X[k].real += signal[n] * Math.cos(angle); X[k].imag += signal[n] * Math.sin(angle); } } return X; } // Calculate magnitude spectrum getMagnitudeSpectrum(fftResult) { return fftResult.map(bin => Math.sqrt(bin.real * bin.real + bin.imag * bin.imag)); } // Calculate spectral flux (measure of spectral change) calculateSpectralFlux() { const window = this.hammingWindow(this.windowSize); let prevSpectrum = null; for (let i = 0; i < this.samples.length - this.windowSize; i += this.hopSize) { // Extract windowed frame const frame = new Float32Array(this.windowSize); for (let j = 0; j < this.windowSize; j++) { frame[j] = this.samples[i + j] * window[j]; } // Calculate FFT and magnitude spectrum const fftResult = this.fft(frame); const spectrum = this.getMagnitudeSpectrum(fftResult); // Calculate spectral flux if (prevSpectrum) { let flux = 0; // Focus on lower frequencies for beat detection (0-200 Hz range) const maxBin = Math.min(Math.floor(200 * this.windowSize / this.sampleRate), spectrum.length); for (let j = 0; j < maxBin; j++) { const diff = spectrum[j] - prevSpectrum[j]; if (diff > 0) { flux += diff; } } this.spectralFlux.push({ time: i / this.sampleRate, flux: flux }); } prevSpectrum = spectrum; } } // Peak picking to find onset candidates findOnsets() { if (this.spectralFlux.length === 0) return; // Calculate adaptive threshold const windowSize = Math.floor(this.sampleRate * 0.1 / this.hopSize); // 100ms window for (let i = windowSize; i < this.spectralFlux.length - windowSize; i++) { const current = this.spectralFlux[i].flux; // Calculate local mean and standard deviation let sum = 0; let sumSquares = 0; let count = 0; for (let j = i - windowSize; j <= i + windowSize; j++) { if (j >= 0 && j < this.spectralFlux.length) { const val = this.spectralFlux[j].flux; sum += val; sumSquares += val * val; count++; } } const mean = sum / count; const variance = (sumSquares / count) - (mean * mean); const stdDev = Math.sqrt(Math.max(0, variance)); const adaptiveThreshold = mean + this.threshold * stdDev; // Check if current value is a peak above threshold if (current > adaptiveThreshold) { let isPeak = true; // Check if it's a local maximum for (let j = Math.max(0, i - 3); j <= Math.min(this.spectralFlux.length - 1, i + 3); j++) { if (j !== i && this.spectralFlux[j].flux >= current) { isPeak = false; break; } } if (isPeak) { this.onsets.push({ time: this.spectralFlux[i].time, strength: current - mean }); } } } } // Filter onsets to get final beats filterBeats() { if (this.onsets.length === 0) return; // Sort by strength (descending) this.onsets.sort((a, b) => b.strength - a.strength); this.beats = []; for (const onset of this.onsets) { let tooClose = false; // Check if too close to existing beats for (const beat of this.beats) { if (Math.abs(onset.time - beat.time) < this.minInterval) { tooClose = true; break; } } if (!tooClose) { this.beats.push(onset); } } // Sort beats by time this.beats.sort((a, b) => a.time - b.time); } // Main detection method detectBeats() { console.log("Calculating spectral flux..."); this.calculateSpectralFlux(); console.log("Finding onsets..."); this.findOnsets(); console.log("Filtering beats..."); this.filterBeats(); console.log(`Detected ${this.beats.length} beats`); return this.beats; } // Get tempo estimation estimateTempo() { if (this.beats.length < 2) return null; const intervals = []; for (let i = 1; i < this.beats.length; i++) { intervals.push(this.beats[i].time - this.beats[i-1].time); } // Find most common interval (simple approach) intervals.sort((a, b) => a - b); const median = intervals[Math.floor(intervals.length / 2)]; const bpm = 60 / median; return Math.round(bpm); } } 48:T829,// Cell 5: Visualize Beat Detection Results beatVisualization = { const width = 800; const height = 400; const margin = { top: 20, right: 20, bottom: 40, left: 50 }; const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Create scales const xScale = d3.scaleLinear() .domain([0, audioData.duration]) .range([margin.left, width - margin.right]); const yScale = d3.scaleLinear() .domain(d3.extent(beatDetector.spectralFlux, d => d.flux)) .range([height - margin.bottom, margin.top]); // Draw spectral flux const line = d3.line() .x(d => xScale(d.time)) .y(d => yScale(d.flux)) .curve(d3.curveMonotoneX); svg.append("path") .datum(beatDetector.spectralFlux) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("d", line); // Draw detected beats svg.selectAll(".beat") .data(beats) .enter() .append("line") .attr("class", "beat") .attr("x1", d => xScale(d.time)) .attr("x2", d => xScale(d.time)) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .attr("stroke", "red") .attr("stroke-width", 2) .attr("opacity", 0.7); // Add axes svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale).tickFormat(d => `${d.toFixed(1)}s`)); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)); // Add labels svg.append("text") .attr("x", width / 2) .attr("y", height - 5) .attr("text-anchor", "middle") .text("Time (seconds)"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 15) .attr("text-anchor", "middle") .text("Spectral Flux"); svg.append("text") .attr("x", width / 2) .attr("y", 15) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .text(`Beat Detection Results - Estimated Tempo: ${tempo} BPM`); return svg.node(); }49:T9b6,waveformViz = { if (!audioData) { return html`

Load an audio file to see waveform visualization

`; } const width = 900; const height = 200; const margin = {top: 20, right: 30, bottom: 30, left: 40}; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("background", "#f9f9f9"); // Downsample for performance - take every nth sample const maxPoints = width * 2; // 2 points per pixel max const step = Math.max(1, Math.floor(audioData.length / maxPoints)); const waveformData = []; for (let i = 0; i < audioData.length; i += step) { waveformData.push({ x: i / step, y: audioData.samples[i], time: i / audioData.sampleRate }); } const xScale = d3.scaleLinear() .domain([0, waveformData.length - 1]) .range([margin.left, width - margin.right]); const yScale = d3.scaleLinear() .domain([-1, 1]) .range([height - margin.bottom, margin.top]); const line = d3.line() .x(d => xScale(d.x)) .y(d => yScale(d.y)) .curve(d3.curveLinear); // Draw waveform svg.append("path") .datum(waveformData) .attr("fill", "none") .attr("stroke", "#2563eb") .attr("stroke-width", 0.8) .attr("d", line); // Add zero line svg.append("line") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", yScale(0)) .attr("y2", yScale(0)) .attr("stroke", "#94a3b8") .attr("stroke-width", 1) .attr("stroke-dasharray", "3,3"); // Add time axis const timeScale = d3.scaleLinear() .domain([0, audioData.duration]) .range([margin.left, width - margin.right]); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(timeScale) .tickFormat(d => { const minutes = Math.floor(d / 60); const seconds = Math.floor(d % 60); return `${minutes}:${String(seconds).padStart(2, '0')}`; })); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)); // Add labels svg.append("text") .attr("x", width / 2) .attr("y", height - 5) .attr("text-anchor", "middle") .style("font-size", "12px") .text("Time"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 15) .attr("text-anchor", "middle") .style("font-size", "12px") .text("Amplitude"); return svg.node(); }4a:[] 43:{"id":"e3f02ae04ae9e459","slug":null,"title":"Audio in observable","thumbnail":"7bf1b7c6c33a0b13569e1b8fdf0239f1d184212819c661b21fbbe1d694ad07fa","access_level":"public","create_time":"$D2025-06-04T12:29:39.249Z","update_time":"$D2025-06-04T13:15:45.690Z","view_time":null,"first_public_time":"$D2025-06-04T12:43:56.447Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"39eb8dd4c906cd6c","login":"rolyhudson","name":"","avatar_url":"https://avatars-next.observableusercontent.com/11a061b4eb5bd17787fef60475aac7edb528a33327c9914e5ddcd149493e8cb7","tier":"starter_2024","bio":"","following":false},"version":72,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cd83edde98ad3724","login":"rolyhudson","name":"","avatar_url":"https://avatars-next.observableusercontent.com/11a061b4eb5bd17787fef60475aac7edb528a33327c9914e5ddcd149493e8cb7","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"39eb8dd4c906cd6c","login":"rolyhudson","name":"","avatar_url":"https://avatars-next.observableusercontent.com/11a061b4eb5bd17787fef60475aac7edb528a33327c9914e5ddcd149493e8cb7","tier":"starter_2024","role":"editor"},{"type":"individual","id":"cd83edde98ad3724","login":"rolyhudson","name":"","avatar_url":"https://avatars-next.observableusercontent.com/11a061b4eb5bd17787fef60475aac7edb528a33327c9914e5ddcd149493e8cb7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Audio in observable","cells":[{"id":0,"value":"# Audio in observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"fileInput = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"Manual trigger needed for next cell","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"audioInfo = {\n if (!audioData) {\n return html`

No audio file loaded

Please select an MP4 or audio file using the file input above.

`;\n }\n \n return html`

Audio File Info

File: ${audioData.fileName}

Duration: ${Math.floor(audioData.duration / 60)}:${String(Math.floor(audioData.duration % 60)).padStart(2, '0')}

Sample Rate: ${audioData.sampleRate} Hz

Channels: ${audioData.numberOfChannels}

Total Samples: ${audioData.length.toLocaleString()}

Peak Level: ${audioData.getPeak().toFixed(3)}

RMS Level: ${audioData.getRMS().toFixed(3)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"console.log(\"frequencyAnalyzer type:\", typeof audioData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"// Cell 2: Create Beat Detector Instance\nbeatDetector = new BeatDetector(audioData, {\n windowSize: 1024,\n hopSize: 512,\n threshold: 1.5,\n minInterval: 0.15\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"// Cell 3: Detect Beats\nbeats = {\n console.log(\"Starting beat detection...\");\n const detectedBeats = beatDetector.detectBeats();\n console.log(`Found ${detectedBeats.length} beats`);\n return detectedBeats;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"// Cell 4: Estimate Tempo\ntempo = {\n const bpm = beatDetector.estimateTempo();\n console.log(`Estimated tempo: ${bpm} BPM`);\n return bpm;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// await visibility(),\n// svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 44:"$43:body"