@fjandin/react-shader 0.0.15 → 0.0.16

package/dist/ReactShader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactShader.d.ts","sourceRoot":"","sources":["../src/ReactShader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAgC/C,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,MAAuB,EACvB,QAAQ,EACR,UAAkB,EAClB,SAAa,EACb,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,SAAS,EACT,YAAY,GACb,EAAE,gBAAgB,2CA0DlB"}
+{"version":3,"file":"ReactShader.d.ts","sourceRoot":"","sources":["../src/ReactShader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAiC/C,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,MAAuB,EACvB,QAAQ,EACR,UAAkB,EAClB,SAAa,EACb,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,SAAS,EACT,YAAY,GACb,EAAE,gBAAgB,2CA0DlB"}

package/dist/example/frontend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frontend.d.ts","sourceRoot":"","sources":["../../src/example/frontend.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,aAAa,CAAA;AAiHpB,wBAAgB,GAAG,4CAwGlB"}
+{"version":3,"file":"frontend.d.ts","sourceRoot":"","sources":["../../src/example/frontend.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,aAAa,CAAA;AAkHpB,wBAAgB,GAAG,4CAiJlB"}

package/dist/hooks/useAudio.d.ts

@@ -0,0 +1,3 @@
+import type { UseAudioOptions, UseAudioReturn } from "../types";
+export declare function useAudio(options?: UseAudioOptions): UseAudioReturn;
+//# sourceMappingURL=useAudio.d.ts.map

package/dist/hooks/useAudio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAudio.d.ts","sourceRoot":"","sources":["../../src/hooks/useAudio.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAqC,eAAe,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AA6DlG,wBAAgB,QAAQ,CAAC,OAAO,GAAE,eAAoB,GAAG,cAAc,CAsMtE"}

package/dist/index.cjs

@@ -29,6 +29,7 @@ var __export = (target, all) => {
 // src/index.ts
 var exports_src = {};
 __export(exports_src, {
+  useAudio: () => useAudio,
   generateUtilsFunction: () => generateUtilsFunction,
   generateSimplexNoiseFunction: () => generateSimplexNoiseFunction,
   generateSceneCirclesFunction: () => generateSceneCirclesFunction,
@@ -38,11 +39,219 @@ __export(exports_src, {
 });
 module.exports = __toCommonJS(exports_src);
 
+// src/hooks/useAudio.ts
+var import_react = require("react");
+var DEFAULT_FFT_SIZE = 2048;
+var DEFAULT_SMOOTHING_TIME_CONSTANT = 0.8;
+var DEFAULT_SMOOTHING = 0.9;
+var NUM_BANDS = 16;
+var MIN_FREQ = 20;
+var MAX_FREQ = 20000;
+var DEFAULT_BANDS = {
+  low: [20, 250],
+  mid: [250, 4000],
+  high: [4000, 20000]
+};
+var EMPTY_BANDS = Array(NUM_BANDS).fill(0);
+function hzToBin(hz, sampleRate, fftSize) {
+  const binFrequency = sampleRate / fftSize;
+  return Math.round(hz / binFrequency);
+}
+function calculateBandLevel(data, startBin, endBin) {
+  if (startBin >= endBin || startBin >= data.length)
+    return 0;
+  const clampedStart = Math.max(0, startBin);
+  const clampedEnd = Math.min(data.length, endBin);
+  let sum = 0;
+  for (let i = clampedStart;i < clampedEnd; i++) {
+    sum += data[i];
+  }
+  const count = clampedEnd - clampedStart;
+  return count > 0 ? sum / count / 255 : 0;
+}
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function getLogFrequencyBands() {
+  const logMin = Math.log10(MIN_FREQ);
+  const logMax = Math.log10(MAX_FREQ);
+  const step = (logMax - logMin) / NUM_BANDS;
+  const frequencies = [];
+  for (let i = 0;i <= NUM_BANDS; i++) {
+    frequencies.push(10 ** (logMin + step * i));
+  }
+  return frequencies;
+}
+var LOG_FREQ_BANDS = getLogFrequencyBands();
+function useAudio(options = {}) {
+  const {
+    source = "microphone",
+    mediaElement = null,
+    fftSize = DEFAULT_FFT_SIZE,
+    smoothingTimeConstant = DEFAULT_SMOOTHING_TIME_CONSTANT,
+    smoothing = DEFAULT_SMOOTHING,
+    frequencyBands = {}
+  } = options;
+  const bands = {
+    low: frequencyBands.low ?? DEFAULT_BANDS.low,
+    mid: frequencyBands.mid ?? DEFAULT_BANDS.mid,
+    high: frequencyBands.high ?? DEFAULT_BANDS.high
+  };
+  const [state, setState] = import_react.useState("disconnected");
+  const [error, setError] = import_react.useState(null);
+  const [isRunning, setIsRunning] = import_react.useState(false);
+  const [levels, setLevels] = import_react.useState({ low: 0, mid: 0, high: 0, bands: [...EMPTY_BANDS] });
+  const [frequencyData, setFrequencyData] = import_react.useState(null);
+  const audioStateRef = import_react.useRef(null);
+  const animationFrameRef = import_react.useRef(0);
+  const dataArrayRef = import_react.useRef(null);
+  const smoothedLevelsRef = import_react.useRef({ low: 0, mid: 0, high: 0, bands: [...EMPTY_BANDS] });
+  const analyze = import_react.useCallback(() => {
+    const audioState = audioStateRef.current;
+    if (!audioState)
+      return;
+    const { analyser } = audioState;
+    const dataArray = dataArrayRef.current;
+    if (!dataArray)
+      return;
+    analyser.getByteFrequencyData(dataArray);
+    const sampleRate = audioState.context.sampleRate;
+    const fftBins = analyser.fftSize;
+    const lowBins = [
+      hzToBin(bands.low[0], sampleRate, fftBins),
+      hzToBin(bands.low[1], sampleRate, fftBins)
+    ];
+    const midBins = [
+      hzToBin(bands.mid[0], sampleRate, fftBins),
+      hzToBin(bands.mid[1], sampleRate, fftBins)
+    ];
+    const highBins = [
+      hzToBin(bands.high[0], sampleRate, fftBins),
+      hzToBin(bands.high[1], sampleRate, fftBins)
+    ];
+    const rawBands = [];
+    for (let i = 0;i < NUM_BANDS; i++) {
+      const startBin = hzToBin(LOG_FREQ_BANDS[i], sampleRate, fftBins);
+      const endBin = hzToBin(LOG_FREQ_BANDS[i + 1], sampleRate, fftBins);
+      rawBands.push(calculateBandLevel(dataArray, startBin, endBin));
+    }
+    const rawLevels = {
+      low: calculateBandLevel(dataArray, lowBins[0], lowBins[1]),
+      mid: calculateBandLevel(dataArray, midBins[0], midBins[1]),
+      high: calculateBandLevel(dataArray, highBins[0], highBins[1]),
+      bands: rawBands
+    };
+    const t = 1 - smoothing;
+    const prev = smoothedLevelsRef.current;
+    const smoothedBands = rawBands.map((raw, i) => lerp(prev.bands[i] ?? 0, raw, t));
+    const smoothedLevels = {
+      low: lerp(prev.low, rawLevels.low, t),
+      mid: lerp(prev.mid, rawLevels.mid, t),
+      high: lerp(prev.high, rawLevels.high, t),
+      bands: smoothedBands
+    };
+    smoothedLevelsRef.current = smoothedLevels;
+    setLevels(smoothedLevels);
+    const dataCopy = new Uint8Array(dataArray.length);
+    dataCopy.set(dataArray);
+    setFrequencyData(dataCopy);
+    animationFrameRef.current = requestAnimationFrame(analyze);
+  }, [bands.low, bands.mid, bands.high, smoothing]);
+  const start = import_react.useCallback(async () => {
+    if (audioStateRef.current)
+      return;
+    setState("connecting");
+    setError(null);
+    try {
+      const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+      if (!AudioContextClass) {
+        throw new Error("AudioContext not supported");
+      }
+      const context = new AudioContextClass;
+      if (context.state === "suspended") {
+        await context.resume();
+      }
+      const analyser = context.createAnalyser();
+      analyser.fftSize = fftSize;
+      analyser.smoothingTimeConstant = smoothingTimeConstant;
+      let audioSource;
+      let stream;
+      if (source === "microphone") {
+        stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        audioSource = context.createMediaStreamSource(stream);
+      } else if (source === "display") {
+        stream = await navigator.mediaDevices.getDisplayMedia({
+          video: true,
+          audio: true
+        });
+        const audioTracks = stream.getAudioTracks();
+        if (audioTracks.length === 0) {
+          for (const track of stream.getTracks()) {
+            track.stop();
+          }
+          throw new Error("No audio track available. Make sure to share a tab with audio enabled.");
+        }
+        audioSource = context.createMediaStreamSource(stream);
+      } else if (source === "element" && mediaElement) {
+        audioSource = context.createMediaElementSource(mediaElement);
+        audioSource.connect(context.destination);
+      } else {
+        throw new Error("Invalid audio source configuration");
+      }
+      audioSource.connect(analyser);
+      audioStateRef.current = {
+        context,
+        analyser,
+        source: audioSource,
+        stream
+      };
+      dataArrayRef.current = new Uint8Array(analyser.frequencyBinCount);
+      setState("connected");
+      setIsRunning(true);
+      animationFrameRef.current = requestAnimationFrame(analyze);
+    } catch (err) {
+      const audioError = err instanceof Error ? err : new Error(String(err));
+      setError(audioError);
+      setState("error");
+      setIsRunning(false);
+    }
+  }, [source, mediaElement, fftSize, smoothingTimeConstant, analyze]);
+  const stop = import_react.useCallback(() => {
+    cancelAnimationFrame(animationFrameRef.current);
+    const audioState = audioStateRef.current;
+    if (audioState) {
+      audioState.source.disconnect();
+      if (audioState.stream) {
+        for (const track of audioState.stream.getTracks()) {
+          track.stop();
+        }
+      }
+      audioState.analyser.disconnect();
+      audioState.context.close();
+      audioStateRef.current = null;
+    }
+    dataArrayRef.current = null;
+    smoothedLevelsRef.current = { low: 0, mid: 0, high: 0, bands: [...EMPTY_BANDS] };
+    setState("disconnected");
+    setIsRunning(false);
+    setLevels({ low: 0, mid: 0, high: 0, bands: [...EMPTY_BANDS] });
+    setFrequencyData(null);
+  }, []);
+  return {
+    levels,
+    frequencyData,
+    state,
+    error,
+    start,
+    stop,
+    isRunning
+  };
+}
 // src/ReactShader.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/hooks/useWebGL.ts
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/utils/shader.ts
 function compileShader(gl, type, source) {
@@ -407,29 +616,29 @@ function cleanupWebGL(gl, state) {
   gl.deleteProgram(state.program);
 }
 function useWebGL(options) {
-  const canvasRef = import_react.useRef(null);
-  const stateRef = import_react.useRef(null);
-  const animationFrameRef = import_react.useRef(0);
-  const elapsedTimeRef = import_react.useRef(0);
-  const lastFrameTimeRef = import_react.useRef(0);
-  const mouseRef = import_react.useRef([0, 0]);
-  const mouseNormalizedRef = import_react.useRef([0, 0]);
-  const mouseLeftDownRef = import_react.useRef(false);
-  const canvasRectRef = import_react.useRef(null);
-  const contextLostRef = import_react.useRef(false);
-  const uniformsRef = import_react.useRef(options.uniforms);
-  const onErrorRef = import_react.useRef(options.onError);
-  const onFrameRef = import_react.useRef(options.onFrame);
-  const onClickRef = import_react.useRef(options.onClick);
-  const onMouseDownRef = import_react.useRef(options.onMouseDown);
-  const onMouseUpRef = import_react.useRef(options.onMouseUp);
-  const onMouseMoveRef = import_react.useRef(options.onMouseMove);
-  const onMouseWheelRef = import_react.useRef(options.onMouseWheel);
-  const timeScaleRef = import_react.useRef(options.timeScale ?? 1);
-  const vertexRef = import_react.useRef(options.vertex);
-  const fragmentRef = import_react.useRef(options.fragment);
-  const dprRef = import_react.useRef(window.devicePixelRatio || 1);
-  const defaultUniformsRef = import_react.useRef({
+  const canvasRef = import_react2.useRef(null);
+  const stateRef = import_react2.useRef(null);
+  const animationFrameRef = import_react2.useRef(0);
+  const elapsedTimeRef = import_react2.useRef(0);
+  const lastFrameTimeRef = import_react2.useRef(0);
+  const mouseRef = import_react2.useRef([0, 0]);
+  const mouseNormalizedRef = import_react2.useRef([0, 0]);
+  const mouseLeftDownRef = import_react2.useRef(false);
+  const canvasRectRef = import_react2.useRef(null);
+  const contextLostRef = import_react2.useRef(false);
+  const uniformsRef = import_react2.useRef(options.uniforms);
+  const onErrorRef = import_react2.useRef(options.onError);
+  const onFrameRef = import_react2.useRef(options.onFrame);
+  const onClickRef = import_react2.useRef(options.onClick);
+  const onMouseDownRef = import_react2.useRef(options.onMouseDown);
+  const onMouseUpRef = import_react2.useRef(options.onMouseUp);
+  const onMouseMoveRef = import_react2.useRef(options.onMouseMove);
+  const onMouseWheelRef = import_react2.useRef(options.onMouseWheel);
+  const timeScaleRef = import_react2.useRef(options.timeScale ?? 1);
+  const vertexRef = import_react2.useRef(options.vertex);
+  const fragmentRef = import_react2.useRef(options.fragment);
+  const dprRef = import_react2.useRef(window.devicePixelRatio || 1);
+  const defaultUniformsRef = import_react2.useRef({
     iTime: 0,
     iMouse: [0, 0],
     iMouseNormalized: [0, 0],
@@ -447,7 +656,7 @@ function useWebGL(options) {
   timeScaleRef.current = options.timeScale ?? 1;
   vertexRef.current = options.vertex;
   fragmentRef.current = options.fragment;
-  const render = import_react.useCallback((time) => {
+  const render = import_react2.useCallback((time) => {
     if (contextLostRef.current)
       return;
     const state = stateRef.current;
@@ -499,7 +708,7 @@ function useWebGL(options) {
     }
     animationFrameRef.current = requestAnimationFrame(render);
   }, []);
-  import_react.useEffect(() => {
+  import_react2.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas)
       return;
@@ -547,7 +756,7 @@ function useWebGL(options) {
       }
     };
   }, [render]);
-  import_react.useEffect(() => {
+  import_react2.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas)
       return;
@@ -649,6 +858,7 @@ function useWebGL(options) {
 // src/ReactShader.tsx
 var jsx_dev_runtime = require("react/jsx-dev-runtime");
 var DEFAULT_VERTEX = `#version 300 es
+precision highp float;
 in vec2 a_position;
 
 void main() {
@@ -687,12 +897,12 @@ function ReactShader({
   onMouseUp,
   onMouseWheel
 }) {
-  const [error, setError] = import_react2.useState(null);
-  const handleError = import_react2.useCallback((err) => {
+  const [error, setError] = import_react3.useState(null);
+  const handleError = import_react3.useCallback((err) => {
     setError(err.message);
     console.error("ReactShader error:", err);
   }, []);
-  import_react2.useEffect(() => {
+  import_react3.useEffect(() => {
     setError(null);
   }, [fragment, vertex]);
   const { canvasRef } = useWebGL({
@@ -708,7 +918,7 @@ function ReactShader({
     onMouseWheel,
     timeScale
   });
-  const containerStyle = import_react2.useMemo(() => fullscreen ? FULLSCREEN_CONTAINER_STYLE : DEFAULT_CONTAINER_STYLE, [fullscreen]);
+  const containerStyle = import_react3.useMemo(() => fullscreen ? FULLSCREEN_CONTAINER_STYLE : DEFAULT_CONTAINER_STYLE, [fullscreen]);
   if (error) {
     return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
       className,

package/dist/index.d.ts

@@ -1,8 +1,9 @@
+export { useAudio } from "./hooks/useAudio";
 export { ReactShader } from "./ReactShader";
 export { generateColorPaletteFunction } from "./shaders/color-palette";
 export { generateDistortionRippleFunction } from "./shaders/distortion-ripple";
 export { generateSceneCirclesFunction } from "./shaders/scene-circles";
 export { generateSimplexNoiseFunction } from "./shaders/simplex-noise";
 export { generateUtilsFunction } from "./shaders/utils";
-export type { DefaultUniforms, FloatArray, FrameInfo, ReactShaderProps, TextureMagFilter, TextureMinFilter, TextureOptions, TextureSource, TextureWrap, UniformValue, Vec2, Vec2Array, Vec3, Vec3Array, Vec4, Vec4Array, } from "./types";
+export type { AudioConnectionState, AudioLevels, AudioSourceType, DefaultUniforms, FloatArray, FrameInfo, ReactShaderProps, TextureMagFilter, TextureMinFilter, TextureOptions, TextureSource, TextureWrap, UniformValue, UseAudioOptions, UseAudioReturn, Vec2, Vec2Array, Vec3, Vec3Array, Vec4, Vec4Array, } from "./types";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,gCAAgC,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,YAAY,EACV,eAAe,EACf,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,WAAW,EACX,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,gCAAgC,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,YAAY,EACV,oBAAoB,EACpB,WAAW,EACX,eAAe,EACf,eAAe,EACf,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,WAAW,EACX,YAAY,EACZ,eAAe,EACf,cAAc,EACd,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,MAAM,SAAS,CAAA"}

package/dist/index.js

@@ -1,8 +1,216 @@
+// src/hooks/useAudio.ts
+import { useCallback, useRef, useState } from "react";
+var DEFAULT_FFT_SIZE = 2048;
+var DEFAULT_SMOOTHING_TIME_CONSTANT = 0.8;
+var DEFAULT_SMOOTHING = 0.9;
+var NUM_BANDS = 16;
+var MIN_FREQ = 20;
+var MAX_FREQ = 20000;
+var DEFAULT_BANDS = {
+  low: [20, 250],
+  mid: [250, 4000],
+  high: [4000, 20000]
+};
+var EMPTY_BANDS = Array(NUM_BANDS).fill(0);
+function hzToBin(hz, sampleRate, fftSize) {
+  const binFrequency = sampleRate / fftSize;
+  return Math.round(hz / binFrequency);
+}
+function calculateBandLevel(data, startBin, endBin) {
+  if (startBin >= endBin || startBin >= data.length)
+    return 0;
+  const clampedStart = Math.max(0, startBin);
+  const clampedEnd = Math.min(data.length, endBin);
+  let sum = 0;
+  for (let i = clampedStart;i < clampedEnd; i++) {
+    sum += data[i];
+  }
+  const count = clampedEnd - clampedStart;
+  return count > 0 ? sum / count / 255 : 0;
+}
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function getLogFrequencyBands() {
+  const logMin = Math.log10(MIN_FREQ);
+  const logMax = Math.log10(MAX_FREQ);
+  const step = (logMax - logMin) / NUM_BANDS;
+  const frequencies = [];
+  for (let i = 0;i <= NUM_BANDS; i++) {
+    frequencies.push(10 ** (logMin + step * i));
+  }
+  return frequencies;
+}
+var LOG_FREQ_BANDS = getLogFrequencyBands();
+function useAudio(options = {}) {
+  const {
+    source = "microphone",
+    mediaElement = null,
+    fftSize = DEFAULT_FFT_SIZE,
+    smoothingTimeConstant = DEFAULT_SMOOTHING_TIME_CONSTANT,
+    smoothing = DEFAULT_SMOOTHING,
+    frequencyBands = {}
+  } = options;
+  const bands = {
+    low: frequencyBands.low ?? DEFAULT_BANDS.low,
+    mid: frequencyBands.mid ?? DEFAULT_BANDS.mid,
+    high: frequencyBands.high ?? DEFAULT_BANDS.high
+  };
+  const [state, setState] = useState("disconnected");
+  const [error, setError] = useState(null);
+  const [isRunning, setIsRunning] = useState(false);
+  const [levels, setLevels] = useState({ low: 0, mid: 0, high: 0, bands: [...EMPTY_BANDS] });
+  const [frequencyData, setFrequencyData] = useState(null);
+  const audioStateRef = useRef(null);
+  const animationFrameRef = useRef(0);
+  const dataArrayRef = useRef(null);
+  const smoothedLevelsRef = useRef({ low: 0, mid: 0, high: 0, bands: [...EMPTY_BANDS] });
+  const analyze = useCallback(() => {
+    const audioState = audioStateRef.current;
+    if (!audioState)
+      return;
+    const { analyser } = audioState;
+    const dataArray = dataArrayRef.current;
+    if (!dataArray)
+      return;
+    analyser.getByteFrequencyData(dataArray);
+    const sampleRate = audioState.context.sampleRate;
+    const fftBins = analyser.fftSize;
+    const lowBins = [
+      hzToBin(bands.low[0], sampleRate, fftBins),
+      hzToBin(bands.low[1], sampleRate, fftBins)
+    ];
+    const midBins = [
+      hzToBin(bands.mid[0], sampleRate, fftBins),
+      hzToBin(bands.mid[1], sampleRate, fftBins)
+    ];
+    const highBins = [
+      hzToBin(bands.high[0], sampleRate, fftBins),
+      hzToBin(bands.high[1], sampleRate, fftBins)
+    ];
+    const rawBands = [];
+    for (let i = 0;i < NUM_BANDS; i++) {
+      const startBin = hzToBin(LOG_FREQ_BANDS[i], sampleRate, fftBins);
+      const endBin = hzToBin(LOG_FREQ_BANDS[i + 1], sampleRate, fftBins);
+      rawBands.push(calculateBandLevel(dataArray, startBin, endBin));
+    }
+    const rawLevels = {
+      low: calculateBandLevel(dataArray, lowBins[0], lowBins[1]),
+      mid: calculateBandLevel(dataArray, midBins[0], midBins[1]),
+      high: calculateBandLevel(dataArray, highBins[0], highBins[1]),
+      bands: rawBands
+    };
+    const t = 1 - smoothing;
+    const prev = smoothedLevelsRef.current;
+    const smoothedBands = rawBands.map((raw, i) => lerp(prev.bands[i] ?? 0, raw, t));
+    const smoothedLevels = {
+      low: lerp(prev.low, rawLevels.low, t),
+      mid: lerp(prev.mid, rawLevels.mid, t),
+      high: lerp(prev.high, rawLevels.high, t),
+      bands: smoothedBands
+    };
+    smoothedLevelsRef.current = smoothedLevels;
+    setLevels(smoothedLevels);
+    const dataCopy = new Uint8Array(dataArray.length);
+    dataCopy.set(dataArray);
+    setFrequencyData(dataCopy);
+    animationFrameRef.current = requestAnimationFrame(analyze);
+  }, [bands.low, bands.mid, bands.high, smoothing]);
+  const start = useCallback(async () => {
+    if (audioStateRef.current)
+      return;
+    setState("connecting");
+    setError(null);
+    try {
+      const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+      if (!AudioContextClass) {
+        throw new Error("AudioContext not supported");
+      }
+      const context = new AudioContextClass;
+      if (context.state === "suspended") {
+        await context.resume();
+      }
+      const analyser = context.createAnalyser();
+      analyser.fftSize = fftSize;
+      analyser.smoothingTimeConstant = smoothingTimeConstant;
+      let audioSource;
+      let stream;
+      if (source === "microphone") {
+        stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        audioSource = context.createMediaStreamSource(stream);
+      } else if (source === "display") {
+        stream = await navigator.mediaDevices.getDisplayMedia({
+          video: true,
+          audio: true
+        });
+        const audioTracks = stream.getAudioTracks();
+        if (audioTracks.length === 0) {
+          for (const track of stream.getTracks()) {
+            track.stop();
+          }
+          throw new Error("No audio track available. Make sure to share a tab with audio enabled.");
+        }
+        audioSource = context.createMediaStreamSource(stream);
+      } else if (source === "element" && mediaElement) {
+        audioSource = context.createMediaElementSource(mediaElement);
+        audioSource.connect(context.destination);
+      } else {
+        throw new Error("Invalid audio source configuration");
+      }
+      audioSource.connect(analyser);
+      audioStateRef.current = {
+        context,
+        analyser,
+        source: audioSource,
+        stream
+      };
+      dataArrayRef.current = new Uint8Array(analyser.frequencyBinCount);
+      setState("connected");
+      setIsRunning(true);
+      animationFrameRef.current = requestAnimationFrame(analyze);
+    } catch (err) {
+      const audioError = err instanceof Error ? err : new Error(String(err));
+      setError(audioError);
+      setState("error");
+      setIsRunning(false);
+    }
+  }, [source, mediaElement, fftSize, smoothingTimeConstant, analyze]);
+  const stop = useCallback(() => {
+    cancelAnimationFrame(animationFrameRef.current);
+    const audioState = audioStateRef.current;
+    if (audioState) {
+      audioState.source.disconnect();
+      if (audioState.stream) {
+        for (const track of audioState.stream.getTracks()) {
+          track.stop();
+        }
+      }
+      audioState.analyser.disconnect();
+      audioState.context.close();
+      audioStateRef.current = null;
+    }
+    dataArrayRef.current = null;
+    smoothedLevelsRef.current = { low: 0, mid: 0, high: 0, bands: [...EMPTY_BANDS] };
+    setState("disconnected");
+    setIsRunning(false);
+    setLevels({ low: 0, mid: 0, high: 0, bands: [...EMPTY_BANDS] });
+    setFrequencyData(null);
+  }, []);
+  return {
+    levels,
+    frequencyData,
+    state,
+    error,
+    start,
+    stop,
+    isRunning
+  };
+}
 // src/ReactShader.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useState } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
 
 // src/hooks/useWebGL.ts
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback as useCallback2, useEffect, useRef as useRef2 } from "react";
 
 // src/utils/shader.ts
 function compileShader(gl, type, source) {
@@ -367,29 +575,29 @@ function cleanupWebGL(gl, state) {
   gl.deleteProgram(state.program);
 }
 function useWebGL(options) {
-  const canvasRef = useRef(null);
-  const stateRef = useRef(null);
-  const animationFrameRef = useRef(0);
-  const elapsedTimeRef = useRef(0);
-  const lastFrameTimeRef = useRef(0);
-  const mouseRef = useRef([0, 0]);
-  const mouseNormalizedRef = useRef([0, 0]);
-  const mouseLeftDownRef = useRef(false);
-  const canvasRectRef = useRef(null);
-  const contextLostRef = useRef(false);
-  const uniformsRef = useRef(options.uniforms);
-  const onErrorRef = useRef(options.onError);
-  const onFrameRef = useRef(options.onFrame);
-  const onClickRef = useRef(options.onClick);
-  const onMouseDownRef = useRef(options.onMouseDown);
-  const onMouseUpRef = useRef(options.onMouseUp);
-  const onMouseMoveRef = useRef(options.onMouseMove);
-  const onMouseWheelRef = useRef(options.onMouseWheel);
-  const timeScaleRef = useRef(options.timeScale ?? 1);
-  const vertexRef = useRef(options.vertex);
-  const fragmentRef = useRef(options.fragment);
-  const dprRef = useRef(window.devicePixelRatio || 1);
-  const defaultUniformsRef = useRef({
+  const canvasRef = useRef2(null);
+  const stateRef = useRef2(null);
+  const animationFrameRef = useRef2(0);
+  const elapsedTimeRef = useRef2(0);
+  const lastFrameTimeRef = useRef2(0);
+  const mouseRef = useRef2([0, 0]);
+  const mouseNormalizedRef = useRef2([0, 0]);
+  const mouseLeftDownRef = useRef2(false);
+  const canvasRectRef = useRef2(null);
+  const contextLostRef = useRef2(false);
+  const uniformsRef = useRef2(options.uniforms);
+  const onErrorRef = useRef2(options.onError);
+  const onFrameRef = useRef2(options.onFrame);
+  const onClickRef = useRef2(options.onClick);
+  const onMouseDownRef = useRef2(options.onMouseDown);
+  const onMouseUpRef = useRef2(options.onMouseUp);
+  const onMouseMoveRef = useRef2(options.onMouseMove);
+  const onMouseWheelRef = useRef2(options.onMouseWheel);
+  const timeScaleRef = useRef2(options.timeScale ?? 1);
+  const vertexRef = useRef2(options.vertex);
+  const fragmentRef = useRef2(options.fragment);
+  const dprRef = useRef2(window.devicePixelRatio || 1);
+  const defaultUniformsRef = useRef2({
     iTime: 0,
     iMouse: [0, 0],
     iMouseNormalized: [0, 0],
@@ -407,7 +615,7 @@ function useWebGL(options) {
   timeScaleRef.current = options.timeScale ?? 1;
   vertexRef.current = options.vertex;
   fragmentRef.current = options.fragment;
-  const render = useCallback((time) => {
+  const render = useCallback2((time) => {
     if (contextLostRef.current)
       return;
     const state = stateRef.current;
@@ -609,6 +817,7 @@ function useWebGL(options) {
 // src/ReactShader.tsx
 import { jsxDEV } from "react/jsx-dev-runtime";
 var DEFAULT_VERTEX = `#version 300 es
+precision highp float;
 in vec2 a_position;
 
 void main() {
@@ -647,8 +856,8 @@ function ReactShader({
   onMouseUp,
   onMouseWheel
 }) {
-  const [error, setError] = useState(null);
-  const handleError = useCallback2((err) => {
+  const [error, setError] = useState2(null);
+  const handleError = useCallback3((err) => {
     setError(err.message);
     console.error("ReactShader error:", err);
   }, []);
@@ -966,6 +1175,7 @@ function generateUtilsFunction() {
   `;
 }
 export {
+  useAudio,
   generateUtilsFunction,
   generateSimplexNoiseFunction,
   generateSceneCirclesFunction,

package/dist/types.d.ts

@@ -47,4 +47,33 @@ export interface DefaultUniforms {
     iMouseLeftDown: number;
     iResolution: Vec2;
 }
+export interface AudioLevels {
+    low: number;
+    mid: number;
+    high: number;
+    bands: number[];
+}
+export type AudioSourceType = "microphone" | "element" | "display";
+export type AudioConnectionState = "disconnected" | "connecting" | "connected" | "error";
+export interface UseAudioOptions {
+    source?: AudioSourceType;
+    mediaElement?: HTMLAudioElement | HTMLVideoElement | null;
+    fftSize?: number;
+    smoothingTimeConstant?: number;
+    smoothing?: number;
+    frequencyBands?: Partial<{
+        low: [number, number];
+        mid: [number, number];
+        high: [number, number];
+    }>;
+}
+export interface UseAudioReturn {
+    levels: AudioLevels;
+    frequencyData: Uint8Array<ArrayBuffer> | null;
+    state: AudioConnectionState;
+    error: Error | null;
+    start: () => Promise<void>;
+    stop: () => void;
+    isRunning: boolean;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AACnC,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAC3C,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAEnD,MAAM,MAAM,UAAU,GAAG,MAAM,EAAE,CAAA;AACjC,MAAM,MAAM,SAAS,GAAG,IAAI,EAAE,CAAA;AAC9B,MAAM,MAAM,SAAS,GAAG,IAAI,EAAE,CAAA;AAC9B,MAAM,MAAM,SAAS,GAAG,IAAI,EAAE,CAAA;AAE9B,MAAM,MAAM,aAAa,GACrB,gBAAgB,GAChB,iBAAiB,GACjB,gBAAgB,GAChB,WAAW,GACX,SAAS,GACT,eAAe,CAAA;AAEnB,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;AACvD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAC9D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEnD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,aAAa,CAAA;IACrB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,UAAU,GACV,SAAS,GACT,SAAS,GACT,SAAS,GACT,aAAa,GACb,cAAc,CAAA;AAElB,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACvB,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACjC,aAAa,EAAE,OAAO,CAAA;CACvB;AACD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7D;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,IAAI,CAAA;IACZ,gBAAgB,EAAE,IAAI,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,EAAE,IAAI,CAAA;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AACnC,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAC3C,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAEnD,MAAM,MAAM,UAAU,GAAG,MAAM,EAAE,CAAA;AACjC,MAAM,MAAM,SAAS,GAAG,IAAI,EAAE,CAAA;AAC9B,MAAM,MAAM,SAAS,GAAG,IAAI,EAAE,CAAA;AAC9B,MAAM,MAAM,SAAS,GAAG,IAAI,EAAE,CAAA;AAE9B,MAAM,MAAM,aAAa,GACrB,gBAAgB,GAChB,iBAAiB,GACjB,gBAAgB,GAChB,WAAW,GACX,SAAS,GACT,eAAe,CAAA;AAEnB,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;AACvD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAC9D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEnD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,aAAa,CAAA;IACrB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,UAAU,GACV,SAAS,GACT,SAAS,GACT,SAAS,GACT,aAAa,GACb,cAAc,CAAA;AAElB,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACvB,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACjC,aAAa,EAAE,OAAO,CAAA;CACvB;AACD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7D;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,IAAI,CAAA;IACZ,gBAAgB,EAAE,IAAI,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,EAAE,IAAI,CAAA;CAClB;AAGD,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,EAAE,CAAA;CAChB;AAED,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,CAAA;AAClE,MAAM,MAAM,oBAAoB,GAAG,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,CAAA;AAExF,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,eAAe,CAAA;IACxB,YAAY,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,GAAG,IAAI,CAAA;IACzD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;QACvB,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QACrB,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QACrB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KACvB,CAAC,CAAA;CACH;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,WAAW,CAAA;IACnB,aAAa,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA;IAC7C,KAAK,EAAE,oBAAoB,CAAA;IAC3B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC1B,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,SAAS,EAAE,OAAO,CAAA;CACnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fjandin/react-shader",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "React component for rendering WebGL shaders",
   "type": "module",
   "main": "./dist/index.cjs",