Releases: gfazioli/mantine-audio
1.0.4
⚡ Improvements
Mantine 9.3.1 → 9.4.0
@mantine/core and @mantine/hooks are aligned to 9.4.0 (latest 9.x minor) in the docs site. The package continues to satisfy its existing >=9.0.0 peer range — Mantine 9.4 is an additive minor (new ComboboxPopover, DataList, EmptyState and Menubar components), with no API or behavior changes for consumers of this package.
🛠️ Other
- Dependency refresh (within existing semver ranges, no major upgrades):
@mantine/core,@mantine/hooks9.3.1 → 9.4.0 (root);@mantine/code-highlight,@mantine/core,@mantine/hooks9.3.1 → 9.4.0 (docs)@storybook/*+storybook10.4.5 → 10.4.6oxfmt^0.55.0 → ^0.56.0oxlint^1.70.0 → ^1.71.0rollup^4.62.0 → ^4.62.2yargs^17.7.2 → ^17.7.3@types/node^22.19.21 → ^22.20.0
📝 Summary
Maintenance patch — no API or behavior changes for @gfazioli/mantine-audio. Aligns the docs site to Mantine 9.4.0 and refreshes dev tooling (Storybook 10.4.6, oxfmt 0.56, oxlint 1.71, Rollup 4.62.2) plus a minor @types/node bump.
What's Changed
Full Changelog: 1.0.3...1.0.4
1.0.3
⚡ Improvements
Mantine 9.3.0 → 9.3.1
@mantine/core and @mantine/hooks are aligned to 9.3.1 (latest 9.x patch) in the docs site. The package continues to satisfy its existing >=9.0.0 peer range — no API or behavior changes for consumers.
🛠️ Other
- Dependency refresh (within existing semver ranges, no major upgrades):
@mantine/code-highlight,@mantine/core,@mantine/hooks9.3.0 → 9.3.1 (docs)@storybook/*10.4.2 → 10.4.5oxlint^1.68.0 → ^1.70.0rollup^4.61.0 → ^4.62.0esbuild^0.28.0 → ^0.28.1next,@next/mdx16.2.7 → 16.2.9 (docs)@types/node^22.19.19 → ^22.19.21,@types/react^19.2.16 → ^19.2.17
📝 Summary
Maintenance patch — no API or behavior changes for @gfazioli/mantine-audio. Aligns the docs site to Mantine 9.3.1 and refreshes dev tooling (Storybook 10.4.5, oxlint 1.70, Rollup 4.62) plus minor Next/type bumps.
What's Changed
Full Changelog: 1.0.2...1.0.3
1.0.2
⚡ Improvements
Mantine 9.2.2 → 9.3.0
@mantine/core and @mantine/hooks are aligned to 9.3.0 (latest 9.x minor) in the docs site. The package continues to satisfy its existing >=9.0.0 peer range — no API or behavior changes for consumers.
🛠️ Other
- Dependency refresh (within existing semver ranges, no major upgrades):
@mantine/code-highlight,@mantine/core,@mantine/hooks9.2.2 → 9.3.0 (docs)@storybook/*10.4.1 → 10.4.2oxlint^1.67.0 → ^1.68.0rollup^4.60.4 → ^4.61.0react,react-dom19.2.6 → 19.2.7next16.2.6 → 16.2.7 (docs)tsx^4.22.3 → ^4.22.4vite^6.4.2 → ^6.4.3@types/react^19.2.15 → ^19.2.16
- Yarn 4.15.0 → 4.16.0
📝 Summary
Maintenance patch — no API or behavior changes for @gfazioli/mantine-audio. Aligns the docs site to Mantine 9.3.0 and refreshes dev tooling (Storybook 10.4.2, oxlint 1.68, Rollup 4.61) plus minor React/Next/type bumps.
What's Changed
Full Changelog: 1.0.1...1.0.2
1.0.1
⚡ Improvements
Mantine 9.2.1 → 9.2.2
@mantine/hooks is bumped to 9.2.2 (latest 9.2 patch). The package continues to satisfy its existing @mantine/core / @mantine/hooks >=9.0.0 peer range — no API changes, no behavior changes for consumers.
The docs site is aligned to Mantine 9.2.2 as well (@mantine/core, @mantine/hooks, @mantine/code-highlight).
🛠️ Other
- Dependency refresh (within existing semver ranges, no major upgrades):
@storybook/addon-themes,@storybook/react,@storybook/react-vite,storybook10.4.0 → 10.4.1oxfmt^0.50.0 → ^0.52.0oxlint^1.65.0 → ^1.67.0postcss^8.5.14 → ^8.5.15tsx^4.22.1 → ^4.22.3@types/react^19.2.14 → ^19.2.15
- Yarn 4.14.1 → 4.15.0
- Apply oxfmt 0.52 formatting
📝 Summary
Maintenance patch — no API or behavior changes for @gfazioli/mantine-audio. Aligns the package to Mantine 9.2.2 and refreshes dev tooling (oxfmt 0.52, oxlint 1.67, Storybook 10.4.1) plus minor type/PostCSS/tsx bumps.
What's Changed
New Contributors
Full Changelog: 1.0.0...1.0.1
1.0.0
v1.0.0
2026-05-19 — First public release 🎉
Mantine-native audio player for React with waveform visualisation and a live spectrum analyser, built on the Web Audio API. Three layers in one package: a polished default <Audio />, a composable compound API, and a fully headless useAudio hook for 100% custom UIs.
✨ Features
- Drop-in player —
<Audio src="…" />renders a polished, accessible audio player wired to the native<audio>element. - Compound API — ten reorderable sub-components:
Audio.Controls,Audio.PlayButton,Audio.SkipButton,Audio.Timeline,Audio.TimeDisplay,Audio.MuteButton,Audio.VolumeSlider,Audio.SpeedControl,Audio.Waveform,Audio.Spectrum. - Headless
useAudiohook — 16 state values + 12 actions + the decodedpeaks, theAnalyserNode, andcurrentSrcfor building 100% custom UIs. - Waveform visualisation (
Audio.Waveform) — peaks decoded viafetch + decodeAudioData, downsampled towaveformSamples(default 512). Click / drag to seek. Mirror with configurablemirrorGap(continuous Audacity-style by default),barWidth/barGap/barRadiuscontrols, customcolorper-component. 60fps playhead tracking viarequestAnimationFrame(not the slowertimeupdatecadence). - Live spectrum analyser (
Audio.Spectrum) —AnalyserNode-driven FFT visualiser,solidorgradientcolor modes, optionalmirror, configurablebarCount/barGap/barRadius/smoothing/color. Proportional bin distribution so no high-frequency bins are dropped. - Multiple
<source>support —sources?: AudioSource[]prop renders one<source>child per entry for codec / format / media-query fallbacks.currentSrcexposed on the hook to know which one the browser actually picked. fallbackSrc— runtime fallback if every entry insrc/sourcesfails to load (MantineImagepattern).scrubSound— keep the audio playing during a seek-drag and hear snippets (Audacity / Adobe Audition style). Works even from a paused state — the player starts onmousedownand pauses again on release. Propagated via context to bothAudio.TimelineandAudio.Waveform.asBackgroundpreset — turn the same player into an absolute-positioned ambient hero / section background in one prop, with a floating mute toggle.- 4 variants × 5 sizes —
overlay(default) /minimal/floating/bordered×xs/sm/md/lg/xl. Fully CSS-driven via[data-variant]/[data-size]attributes — every dimension (padding, icon, play button, timeline thumb, font, time display width, volume slider width) is a size-scoped CSS variable. - Keyboard shortcuts — Space/K (play/pause), J/L (seek backward/forward 10s), ←/→ (5s), ↑/↓ (volume ±5%), M (toggle mute), > / . (speed +0.25×), < / , (speed −0.25×).
- Full Styles API —
classNames,styles,vars,unstyledon every part (18 selectors), plus 9 CSS variables and 5 data attribute modifiers.
🛠️ Internals
- Targets Mantine 9 and React 19 (peer ranges:
@mantine/core >=7,@mantine/hooks >=7, React 18 or 19). - Web Audio: lazy
AudioContext+MediaElementSource+AnalyserNodeon first play (autoplay-policy compliant); peaks decoded in a one-shotAudioContextthat is closed immediately after use. - Canvas colors resolved once per build of the renderer (cheap), with a helper that converts
var(--x)/ theme color names into rgb strings the Canvas API can parse. - Cancellation-aware peaks decoder (no setState after unmount) + RAF cleanup in every effect.
- ESM + CJS dual build via Rollup,
'use client'banner, dual.d.ts(mjs + cjs), CSS modules hashed withhash-css-selector(prefixme),styles.css+styles.layer.css(layered version).
🚀 Get started
npm install @gfazioli/mantine-audioimport { Audio } from '@gfazioli/mantine-audio';
import '@gfazioli/mantine-audio/styles.css';
<Audio src="/track.mp3" />Full docs and demos: https://gfazioli.github.io/mantine-audio
Full Changelog: https://github.com/gfazioli/mantine-audio/commits/1.0.0