Laravel Filament v3数据库通知声音提醒实现方案咨询

步骤1：准备通知音频文件 #

• 将你的通知音频文件（比如notification.mp3）放到项目的public/sounds目录下，若目录不存在则手动创建。

步骤2：通过Livewire事件监听实现声音播放（推荐） #

Filament v3的通知通过Livewire事件filament-notifications:send触发，我们可以在后台布局中添加监听逻辑：

1. 若未发布Filament视图文件，先执行发布命令：

php artisan vendor:publish --tag=filament-views

2. 打开resources/views/vendor/filament/layouts/app.blade.php，在</body>标签前添加以下脚本：

<script>
    document.addEventListener('livewire:initialized', () => {
        // 监听Filament通知发送事件
        Livewire.on('filament-notifications:send', (notification) => {
            // 创建音频实例并播放
            const notificationSound = new Audio('/sounds/notification.mp3');
            notificationSound.play().catch(error => {
                console.error('通知声音播放失败:', error);
            });
        });
    });
</script>

步骤3：可选 - 仅为特定通知播放声音 #

如果需要控制只有部分通知触发声音，可在发送通知时附加自定义标识：

use Filament\Notifications\Notification;

// 发送带声音标识的通知
Notification::make()
    ->title('新消息提醒')
    ->body('您收到一条新的系统消息')
    ->data(['play_sound' => true]) // 自定义标识
    ->sendToDatabase(auth()->user());

然后修改监听脚本，增加判断逻辑：

Livewire.on('filament-notifications:send', (notification) => {
    // 仅当通知包含play_sound标识时播放声音
    if (notification.data?.play_sound) {
        const notificationSound = new Audio('/sounds/notification.mp3');
        notificationSound.play().catch(error => {
            console.error('通知声音播放失败:', error);
        });
    }
});

步骤4：处理浏览器自动播放限制 #

现代浏览器要求用户与页面有交互后才能播放音频，可添加初始化逻辑规避：
在布局文件的脚本中补充：

<script>
    let audioIsInitialized = false;

    // 用户首次交互时预加载音频
    document.addEventListener('click', () => {
        if (!audioIsInitialized) {
            new Audio('/sounds/notification.mp3').load();
            audioIsInitialized = true;
        }
    });
</script>

内容的提问来源于stack exchange，提问作者Hardik Kanajariya