react-audio-wavekit 0.2.1 → 0.2.6

package/README.md

@@ -38,6 +38,8 @@ Static waveform visualization with playhead and drag-to-seek.
 
 ```tsx
 <AudioWaveform
+  // Also accepts classnames, compatible with tailwind.
+  className=""
   blob={audioBlob}
   currentTime={currentTime}
   duration={duration}
@@ -47,6 +49,11 @@ Static waveform visualization with playhead and drag-to-seek.
     audio.currentTime = time;
     audio.play();
   }}
+  style={{
+    // Or use classNames with Tailwind
+    width: '400px',
+    height: '100px',
+  }}
 />
 ```
 
@@ -63,6 +70,8 @@ Static waveform visualization with playhead and drag-to-seek.
 | `suspense` | `boolean` | `false` | Enable React Suspense mode |
 | `appearance` | `AudioWaveformAppearance` | - | See [Appearance Options](#appearance-options) |
 
+**SSR note:** When `suspense` is `true`, decoding only starts on the client after mount. On the server (and during the first client render), the waveform renders without peaks, so wrap the component in a Suspense boundary to show a fallback during hydration.
+
 ---
 
 ## Recorder
@@ -101,6 +110,8 @@ Headless hook to manage recording state. Use with recorder components below.
 
 ![LiveStreamingRecorder](https://react-audio-wavekit.netlify.app/live-stream.png)
 
+_This is an example image. The component includes only the waveform._
+
 Scrolling timeline waveform (Voice Memos style). Canvas grows horizontally as recording continues.
 
 [▶ Demo](https://react-audio-wavekit.netlify.app/?path=/story/recorder-livestreamingrecorder--default)
@@ -136,6 +147,8 @@ Scrolling timeline waveform (Voice Memos style). Canvas grows horizontally as re
 
 ![LiveStreamingStackRecorder](https://react-audio-wavekit.netlify.app/live-stream-stack.png)
 
+_This is an example image. The component includes only the waveform._
+
 Fixed-width waveform where bars compress as recording grows.
 
 [▶ Demo](https://react-audio-wavekit.netlify.app/?path=/story/recorder-livestreamingstackrecorder--default)
@@ -161,6 +174,8 @@ Fixed-width waveform where bars compress as recording grows.
 
 ![LiveRecorder](https://react-audio-wavekit.netlify.app/live-recorder.png)
 
+_This is an example image. The component includes only the waveform._
+
 Real-time frequency bars visualization.
 
 [▶ Demo](https://react-audio-wavekit.netlify.app/?path=/story/recorder-liverecorder--default)
@@ -222,6 +237,11 @@ Components accept `className`, `style`, and all standard canvas HTML attributes.
 <AudioWaveform
   blob={blob}
   className="h-32 w-full rounded-lg bg-slate-900 p-4"
+  // or style prop
+  style={{
+    width: "100%",
+    height: "100%",
+  }}
   appearance={{
     barColor: "#3b82f6",
     barWidth: 2,

package/dist/waveform/index.cjs

@@ -24,9 +24,13 @@ const AudioWaveform = react.forwardRef(function AudioWaveform2({
 }, ref) {
   const [decodedPeaks, setDecodedPeaks] = react.useState(null);
   const [error, setError] = react.useState(null);
+  const [isMounted, setIsMounted] = react.useState(false);
   const blobRef = react.useRef(null);
   const rendererRef = react.useRef(null);
   const sampleCount = react.useMemo(() => getInitialSampleCount(), []);
+  react.useEffect(() => {
+    setIsMounted(true);
+  }, []);
   react.useEffect(() => {
     if (ref && typeof ref === "function") {
       ref({ canvas: rendererRef.current?.canvas || null });
@@ -35,7 +39,7 @@ const AudioWaveform = react.forwardRef(function AudioWaveform2({
     }
   }, [ref]);
   const shouldDecode = !precomputedPeaks && blob;
-  const suspensePeaks = shouldDecode && suspense ? utilSuspense.unwrapPromise(utilAudioDecoder.getAudioData(blob, sampleCount)) : null;
+  const suspensePeaks = shouldDecode && suspense && isMounted ? utilSuspense.unwrapPromise(utilAudioDecoder.getAudioData(blob, sampleCount)) : null;
   react.useEffect(() => {
     if (!shouldDecode || suspense) {
       if (!shouldDecode) {

package/dist/waveform/index.js

@@ -22,9 +22,13 @@ const AudioWaveform = forwardRef(function AudioWaveform2({
 }, ref) {
   const [decodedPeaks, setDecodedPeaks] = useState(null);
   const [error, setError] = useState(null);
+  const [isMounted, setIsMounted] = useState(false);
   const blobRef = useRef(null);
   const rendererRef = useRef(null);
   const sampleCount = useMemo(() => getInitialSampleCount(), []);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
   useEffect(() => {
     if (ref && typeof ref === "function") {
       ref({ canvas: rendererRef.current?.canvas || null });
@@ -33,7 +37,7 @@ const AudioWaveform = forwardRef(function AudioWaveform2({
     }
   }, [ref]);
   const shouldDecode = !precomputedPeaks && blob;
-  const suspensePeaks = shouldDecode && suspense ? unwrapPromise(getAudioData(blob, sampleCount)) : null;
+  const suspensePeaks = shouldDecode && suspense && isMounted ? unwrapPromise(getAudioData(blob, sampleCount)) : null;
   useEffect(() => {
     if (!shouldDecode || suspense) {
       if (!shouldDecode) {

package/dist/waveform/util-audio-decoder.cjs

@@ -44,7 +44,7 @@ async function decodeAudioBlob(blob, sampleCount) {
     return extractPeaksFromChannelData(channelData, sampleCount);
   } catch {
     throw new Error(
-      `Unable to decode audio data (type: ${blob.type}, size: ${blob.size} bytes). Both native Web Audio API and WASM decoder failed. This may be due to an unsupported audio format or corrupted data.`
+      `Unable to decode audio data (type: ${blob.type}, size: ${blob.size} bytes). Both native Web Audio API and WASM decoder failed. Consider providing pre-decoded 'peaks' to the AudioWaveform component to bypass decoding.`
     );
   }
 }

package/dist/waveform/util-audio-decoder.js

@@ -42,7 +42,7 @@ async function decodeAudioBlob(blob, sampleCount) {
     return extractPeaksFromChannelData(channelData, sampleCount);
   } catch {
     throw new Error(
-      `Unable to decode audio data (type: ${blob.type}, size: ${blob.size} bytes). Both native Web Audio API and WASM decoder failed. This may be due to an unsupported audio format or corrupted data.`
+      `Unable to decode audio data (type: ${blob.type}, size: ${blob.size} bytes). Both native Web Audio API and WASM decoder failed. Consider providing pre-decoded 'peaks' to the AudioWaveform component to bypass decoding.`
     );
   }
 }

package/package.json

@@ -1,14 +1,34 @@
 {
   "name": "react-audio-wavekit",
-  "version": "0.2.1",
+  "version": "0.2.6",
+  "description": "React component library for audio waveform visualization and live recording",
   "license": "CC0-1.0",
+  "author": "semanticist21",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/semanticist21/react-audio-waveform.git"
+  },
+  "homepage": "https://react-audio-wavekit.netlify.app",
+  "bugs": {
+    "url": "https://github.com/semanticist21/react-audio-waveform/issues"
+  },
+  "keywords": [
+    "react",
+    "audio",
+    "waveform",
+    "visualization",
+    "recorder",
+    "recording",
+    "canvas",
+    "audio-player",
+    "audio-recorder",
+    "web-audio"
+  ],
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": [
-    "**/*.css"
-  ],
+  "sideEffects": false,
   "exports": {
     ".": {
       "import": {
@@ -43,8 +63,8 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "overlayscrollbars": "^2.0.0",
-    "overlayscrollbars-react": "^0.5.0"
+    "overlayscrollbars": "^2.13.0",
+    "overlayscrollbars-react": "^0.5.6"
   },
   "devDependencies": {
     "@biomejs/biome": "2.3.8",
@@ -52,13 +72,13 @@
     "@storybook/react": "10.1.4",
     "@storybook/react-vite": "10.1.4",
     "@tailwindcss/vite": "4.1.17",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.1",
     "@types/node": "24.10.1",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
     "@typescript/native-preview": "7.0.0-dev.20251205.1",
     "@vitejs/plugin-react": "5.1.1",
-    "jsdom": "^27.2.0",
+    "jsdom": "^27.3.0",
     "lucide-react": "0.555.0",
     "react": "19.2.1",
     "react-dom": "19.2.1",
@@ -67,7 +87,7 @@
     "typescript": "5.9.3",
     "vite": "7.2.6",
     "vite-plugin-dts": "4.5.4",
-    "vitest": "^4.0.15"
+    "vitest": "^4.0.16"
   },
   "dependencies": {
     "mpg123-decoder": "^1.0.3"