Skip to content

Releases: gfazioli/mantine-audio

1.0.4

23 Jun 05:38

Choose a tag to compare

⚡ 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/hooks 9.3.1 → 9.4.0 (root); @mantine/code-highlight, @mantine/core, @mantine/hooks 9.3.1 → 9.4.0 (docs)
    • @storybook/* + storybook 10.4.5 → 10.4.6
    • oxfmt ^0.55.0 → ^0.56.0
    • oxlint ^1.70.0 → ^1.71.0
    • rollup ^4.62.0 → ^4.62.2
    • yargs ^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

  • chore(deps): update dependencies to latest minor (Mantine 9.4.0) by @gfazioli in #4

Full Changelog: 1.0.3...1.0.4

1.0.3

16 Jun 10:40

Choose a tag to compare

⚡ 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/hooks 9.3.0 → 9.3.1 (docs)
    • @storybook/* 10.4.2 → 10.4.5
    • oxlint ^1.68.0 → ^1.70.0
    • rollup ^4.61.0 → ^4.62.0
    • esbuild ^0.28.0 → ^0.28.1
    • next, @next/mdx 16.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

  • chore(deps): update dependencies to latest minor (Mantine 9.3.1) by @gfazioli in #3

Full Changelog: 1.0.2...1.0.3

1.0.2

03 Jun 08:36

Choose a tag to compare

⚡ 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/hooks 9.2.2 → 9.3.0 (docs)
    • @storybook/* 10.4.1 → 10.4.2
    • oxlint ^1.67.0 → ^1.68.0
    • rollup ^4.60.4 → ^4.61.0
    • react, react-dom 19.2.6 → 19.2.7
    • next 16.2.6 → 16.2.7 (docs)
    • tsx ^4.22.3 → ^4.22.4
    • vite ^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

  • chore(deps): update dependencies to latest minor (Mantine 9.3.0) by @gfazioli in #2

Full Changelog: 1.0.1...1.0.2

1.0.1

28 May 09:48

Choose a tag to compare

⚡ 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, storybook 10.4.0 → 10.4.1
    • oxfmt ^0.50.0 → ^0.52.0
    • oxlint ^1.65.0 → ^1.67.0
    • postcss ^8.5.14 → ^8.5.15
    • tsx ^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

  • chore(deps): update dependencies to latest minor (Mantine 9.2.2) by @gfazioli in #1

New Contributors

Full Changelog: 1.0.0...1.0.1

1.0.0

19 May 16:35

Choose a tag to compare

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 useAudio hook — 16 state values + 12 actions + the decoded peaks, the AnalyserNode, and currentSrc for building 100% custom UIs.
  • Waveform visualisation (Audio.Waveform) — peaks decoded via fetch + decodeAudioData, downsampled to waveformSamples (default 512). Click / drag to seek. Mirror with configurable mirrorGap (continuous Audacity-style by default), barWidth / barGap / barRadius controls, custom color per-component. 60fps playhead tracking via requestAnimationFrame (not the slower timeupdate cadence).
  • Live spectrum analyser (Audio.Spectrum) — AnalyserNode-driven FFT visualiser, solid or gradient color modes, optional mirror, configurable barCount / barGap / barRadius / smoothing / color. Proportional bin distribution so no high-frequency bins are dropped.
  • Multiple <source> supportsources?: AudioSource[] prop renders one <source> child per entry for codec / format / media-query fallbacks. currentSrc exposed on the hook to know which one the browser actually picked.
  • fallbackSrc — runtime fallback if every entry in src / sources fails to load (Mantine Image pattern).
  • 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 on mousedown and pauses again on release. Propagated via context to both Audio.Timeline and Audio.Waveform.
  • asBackground preset — turn the same player into an absolute-positioned ambient hero / section background in one prop, with a floating mute toggle.
  • 4 variants × 5 sizesoverlay (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 APIclassNames, styles, vars, unstyled on 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 + AnalyserNode on first play (autoplay-policy compliant); peaks decoded in a one-shot AudioContext that 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 with hash-css-selector (prefix me), styles.css + styles.layer.css (layered version).

🚀 Get started

npm install @gfazioli/mantine-audio
import { 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