Download the PHP package blemli/filament-audiofeedback without Composer

Filament AudioFeedback

Delightful, unobtrusive audio feedback for Filament panels, powered by Cuelume — fourteen tiny interaction sounds synthesized live with the Web Audio API. No audio files, no npm install, nothing to configure unless you want to.

Deliberately not annoying: sounds play for toggles, notifications, form submits, sliders, login/logout, drag & drop, and a barely-there whisper on navigation hover. Users get a mute button, a master volume, and (optionally) their own per-sound settings on Filament Breezy's my-profile page — persisted to the database.

Installation

Add the plugin to your panel — that's it:

The Cuelume engine (~10 kB, MIT) is bundled with the plugin and registered through Filament's asset system. No Filament views are overridden — everything hooks into Livewire events, DOM roles and render hooks.

What plays when

Each event maps to the Cuelume sound designed for that exact moment:

Configuration

Publish the config file if you want to change anything:

The same options are available fluently on the plugin:

Or globally from your AppServiceProvider:

Precedence: config file → configureUsing() → fluent calls in the panel provider.

Notifications

Notifications automatically play the sound matching their status. Override or silence a single notification:

Delete and force-delete actions (including bulk) automatically use the delete event's sound for their success notification instead of the generic success chime.

Mute button

A small speaker icon lets every user opt out. It is shown by default (opt out with ->muteToggle(false)) and can live in four places, matching Filament's render hooks:

Per-user settings (Filament Breezy)

If your panel uses Filament Breezy, opt in to a "Sounds" section on the my-profile page:

The section is a native Filament form: a Toggle to mute everything, a Slider for the volume (with a pip marking the panel default and a Reset hint action), and a Select per event — every sound can be re-mapped to any of the fourteen cues, muted, or left at the panel default, with an instant preview on selection. When two events resolve to the same tune, the affected selects show a warning hint. The section only appears when the BreezyCore plugin is registered on the same panel; hide it per-panel with Breezy's ->withoutMyProfileComponents(['audiofeedback']).

To guard the section per user, pass a closure — it receives the authenticated user:

Choices are saved to the audiofeedback_settings table (the migration ships with the package — just run php artisan migrate) and hydrated on every page, so they follow the user across browsers. The topbar mute button persists through a small authenticated endpoint; guests and apps without the table gracefully fall back to localStorage.

Translations

Ships in English, German, French, Italian and Spanish (en, de, fr, it, es) — the mute button and the profile section follow your app's locale automatically. To adjust strings or add a locale, publish the language files:

The Cuelume sound names themselves (chime, sparkle, …) stay untranslated on purpose — they're identifiers, not copy.

Extras

• Reduced motion — users with the OS-level "reduce motion" accessibility preference start muted; an explicit unmute (or saved per-user setting) still wins. Opt out of the hint with ->ignoreReducedMotion() or 'ignore_reduced_motion' => true.
• Your own sounds — the script also honors plain Cuelume attributes in your views (<button data-cuelume-press>), and exposes window.audiofeedback.cue('toggle') / window.audiofeedback.play('sparkle') for custom JS.
• Autoplay policy — browsers block audio before the first user interaction on a page. Cues that arrive earlier (e.g. right after the login redirect) are held and played on the first click or keypress.

Uninstalling

Changed your mind? One command cleans up every published trace — config, views, translations, compiled assets, the migration and the audiofeedback_settings table (each deletion asks first, or pass --force):

It finishes with a checklist of the things only you can do: unregister AudioFeedbackPlugin::make() from your panel provider(s), drop any configureUsing() calls and notification macros, remove AUDIOFEEDBACK_ENABLED from .env, then composer remove blemli/filament-audiofeedback and php artisan optimize:clear. It even points out which of your files still mention audiofeedback.

Testing

Credits

• Cuelume by Daniel Belyi — the sound palette (MIT)
• grafst

License

The MIT License (MIT). Please see License File for more information.