PHPackages                             blemli/filament-audiofeedback - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. blemli/filament-audiofeedback

ActiveLibrary

blemli/filament-audiofeedback
=============================

Delightful, unobtrusive audio feedback for Filament panels, powered by Cuelume.

v1.2.0(yesterday)00MITPHPPHP ^8.2CI passing

Since Jul 28Pushed yesterdayCompare

[ Source](https://github.com/blemli/filament-audiofeedback)[ Packagist](https://packagist.org/packages/blemli/filament-audiofeedback)[ Docs](https://github.com/blemli/filament-audiofeedback)[ GitHub Sponsors](https://github.com/blemli)[ RSS](/packages/blemli-filament-audiofeedback/feed)WikiDiscussions 5.x Synced today

READMEChangelog (3)Dependencies (15)Versions (4)Used By (0)

Filament AudioFeedback
======================

[](#filament-audiofeedback)

[![Latest Version on Packagist](https://camo.githubusercontent.com/9ed8a767dd4e14f31bb2e767b3864c0706a01688635bb14bad59257c2988dc46/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f626c656d6c692f66696c616d656e742d617564696f666565646261636b2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/blemli/filament-audiofeedback)[![GitHub Tests Action Status](https://camo.githubusercontent.com/761776c3388c844937239b2d04e8bc8f127395c4d7ef3de72f387a632bd3da48/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f626c656d6c692f66696c616d656e742d617564696f666565646261636b2f74657374732e796d6c3f6272616e63683d352e78266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/blemli/filament-audiofeedback/actions?query=workflow%3Atests+branch%3A5.x)[![Total Downloads](https://camo.githubusercontent.com/eb93a67ceb7c288928dd13531b208b4bc2e06acab9e7615ed8d23cd25b97ffb5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f626c656d6c692f66696c616d656e742d617564696f666565646261636b2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/blemli/filament-audiofeedback)

Delightful, unobtrusive audio feedback for Filament panels, powered by [Cuelume](https://cuelume-site.pages.dev) — 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 &amp; 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
------------

[](#installation)

```
composer require blemli/filament-audiofeedback
```

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

```
use Blemli\AudioFeedback\AudioFeedbackPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->plugin(AudioFeedbackPlugin::make());
}
```

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
---------------

[](#what-plays-when)

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

EventDefault soundCuelume's descriptionNotification (success)`success`Warm three-note confirmationNotification (danger)`error`Soft knock and descending refusalNotification (warning)`chime`Soft two-note ascending bellNotification (info / none)`whisper`Breathy quiet swellToggle switched`toggle`Mechanical click-clackToggle buttons changed`toggle-buttons` → `tick`Crisp instant tickSlider released / stepped`slider` → `tick`Crisp instant tickNavigation item hovered`nav.hover` → `whisper`The quietest option, made for dense listsForm submitted`loading`Brief unresolved rising shimmerLogin`ready`Focus tick with a harmonic bloomLogout`droplet`Single note gliding downDrag (grab a sortable item)`press`Dull muted knockDrop (release it)`release`Brighter springy tickRecord deleted`delete` → `droplet`Single note gliding downConfiguration
-------------

[](#configuration)

Publish the config file if you want to change anything:

```
php artisan vendor:publish --tag="audiofeedback-config"
```

```
// config/audiofeedback.php
return [
    'enabled' => env('AUDIOFEEDBACK_ENABLED', true),

    // Master volume, 0–100. Users can pick their own (see below).
    'volume' => 50,

    // The mute button is shown by default; opt out with false.
    'mute_toggle' => true,

    // 'topbar-start', 'topbar-end', 'user-menu-before' or 'user-menu'.
    'mute_toggle_position' => 'user-menu-before',

    // Opt in to a per-user "Sounds" section on Breezy's my-profile page.
    'breezy_profile_section' => false,

    // Any of: chime, sparkle, droplet, bloom, whisper, tick, press,
    // release, toggle, success, error, page, loading, ready — or false.
    'sounds' => [
        'notification.success' => 'success',
        'toggle' => 'toggle',
        'nav.hover' => false, // silence a single event
        // ...
    ],
];
```

The same options are available fluently on the plugin:

```
AudioFeedbackPlugin::make()
    ->volume(25)
    ->sound('toggle', 'tick')
    ->disable('form.submit', 'drag', 'drop')
    ->muteToggle(position: 'topbar-end');
```

Or globally from your `AppServiceProvider`:

```
use Blemli\AudioFeedback\AudioFeedbackPlugin;

public function boot(): void
{
    AudioFeedbackPlugin::configureUsing(
        fn (AudioFeedbackPlugin $plugin) => $plugin->sound('login', 'bloom'),
    );
}
```

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

Notifications
-------------

[](#notifications)

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

```
Notification::make()
    ->title('Saved')
    ->success()
    ->sound('sparkle') // override the status sound
    ->send();

Notification::make()
    ->title('Autosaved')
    ->silent() // no sound for this one
    ->send();

Notification::make()
    ->title('Gone')
    ->soundEvent('delete') // play a configured event's sound instead
    ->send();
```

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
-----------

[](#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:

```
use Blemli\AudioFeedback\MuteTogglePosition;

AudioFeedbackPlugin::make()->muteToggle(position: MuteTogglePosition::UserMenu);
```

PositionWhere`topbar-start`Start of the topbar, after the logo`topbar-end`End of the topbar, before the user menu area`user-menu-before`Next to the user avatar (default)`user-menu`An item inside the user dropdownPer-user settings (Filament Breezy)
-----------------------------------

[](#per-user-settings-filament-breezy)

If your panel uses [Filament Breezy](https://github.com/jeffgreco13/filament-breezy), opt in to a "Sounds" section on the my-profile page:

```
AudioFeedbackPlugin::make()->breezyProfileSection();
```

[![The Sounds section on Breezy's my-profile page](art/sound-settings.png)](art/sound-settings.png)

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:

```
AudioFeedbackPlugin::make()->breezyProfileSection(
    fn (?User $user) => $user?->can('tune-sounds') ?? false,
);
```

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
------------

[](#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:

```
php artisan vendor:publish --tag="audiofeedback-translations"
```

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

Extras
------

[](#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 (``), 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.

Testing
-------

[](#testing)

```
composer test
```

Credits
-------

[](#credits)

- [Cuelume](https://github.com/Danilaa1/cuelume) by Daniel Belyi — the sound palette (MIT)
- [grafst](https://github.com/grafst)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

40

—

FairBetter than 86% of packages

Maintenance100

Actively maintained with recent releases

Popularity0

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

4

Last Release

1d ago

Major Versions

v1.2.0 → 5.x-dev2026-07-28

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/116230743?v=4)[Problemli GmbH](/maintainers/blemli)[@blemli](https://github.com/blemli)

---

Top Contributors

[![grafst](https://avatars.githubusercontent.com/u/8471055?v=4)](https://github.com/grafst "grafst (17 commits)")

---

Tags

laravelfilamentfilament-pluginfilamentphpblemlifilament-audiofeedback

###  Code Quality

TestsPest

Static AnalysisPHPStan, Rector

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/blemli-filament-audiofeedback/health.svg)

```
[![Health](https://phpackages.com/badges/blemli-filament-audiofeedback/health.svg)](https://phpackages.com/packages/blemli-filament-audiofeedback)
```

###  Alternatives

[rawilk/profile-filament-plugin

Profile &amp; MFA starter kit for filament.

3914.8k](/packages/rawilk-profile-filament-plugin)[backstage/mails

View logged mails and events in a beautiful Filament UI.

16321.5k](/packages/backstage-mails)[croustibat/filament-jobs-monitor

Background Jobs monitoring like Horizon for all drivers for FilamentPHP

274333.4k9](/packages/croustibat-filament-jobs-monitor)[marcelweidum/filament-passkeys

Use passkeys in your filamentphp app

6649.5k2](/packages/marcelweidum-filament-passkeys)[biostate/filament-menu-builder

An Elegant Menu Builder for FilamentPHP

6528.1k2](/packages/biostate-filament-menu-builder)[schmeits/filament-character-counter

This is a Filament character counter TextField and Textarea form field for Filament v4 and v5

34226.4k14](/packages/schmeits-filament-character-counter)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
