VoiceNoteRecorderField

Summary

In-browser voice recorder featuring a real-time frequency visualizer, inline playback (waveform + play/pause), and seamless Filament FileUpload storage integration. Records audio from the microphone, previews locally, and handles the entire upload/persistence pipeline.


Class	`Bjanczak\FilamentFlexFields\Filament\Forms\Components\VoiceNoteRecorderField`
State type	`string\|null` — stored path on disk after save
FieldType	(use the class directly)
Extends	`FlexFileUpload` → `Filament\Forms\Components\FileUpload`
Playground	`voice-note-recorder-field` slug in Flex Fields playground

Basic usage

Default — Upload on Form Submit

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\VoiceNoteRecorderField;

VoiceNoteRecorderField::make('voice_note')
    ->label('Voice message')
    ->disk('public')
    ->directory('voice-notes')
    ->maxDuration(120); // 2 minutes

Immediate Upload after Recording

VoiceNoteRecorderField::make('feedback_audio')
    ->uploadImmediately()
    ->disk('s3')
    ->directory('feedback');

State & validation

Stored value

State is a relative path string to the stored audio file on your configured disk.

$record->voice_note; // 'voice-notes/01H….webm'

Validation rules

Inherits all FileUpload validation rules (maxSize(), required(), etc.). Default accepted MIME types include audio/*, audio/mpeg, audio/wav, audio/webm, audio/aac.

Media Ingress metadata

Integrates with Media Ingress for transcription and waveform sidecars.

// Disk (path state)
VoiceNoteRecorderField::make('voice_note')
    ->disk()
    ->directory('voice-notes')
    ->storeMetadataIn('voice_note_meta')
    ->storeWaveformIn('voice_note_meta');

// Spatie (UUID state)
VoiceNoteRecorderField::spatie('voice_note')
    ->collection('voice-notes')
    ->storeMetadataIn('voice_note_meta');

Sidecar key	When populated
`transcript`	After upload when `FLEX_FIELDS_MEDIA_TRANSCRIPTION` or `registerTranscriptionInterface()` is bound
`waveform`	After recording finalize — `{ peaks, sample_count, duration }`

Retention: configure media_capture.retention.voice_notes and schedule flex-fields:prune-capture-media.

Configuration API

All methods accept Closure unless noted.

Method	Type	Default	Description
`maxDuration(int $seconds)`	Setup	`120`	Max recording length
`uploadImmediately(bool $cond)`	Setup	`false`	Upload to temp storage right after recording
`uploadOnSubmit(bool $cond)`	Setup	`true`	Defer upload until form submit
`microphoneIcon(string $icon)`	Setup	config	Custom microphone icon
`stopIcon(string $icon)`	Setup	config	Custom stop icon
`trashIcon(string $icon)`	Setup	config	Custom delete icon
`playIcon(string $icon)`	Setup	config	Custom play icon
`pauseIcon(string $icon)`	Setup	config	Custom pause icon
`size(string $size)`	Setup	`'md'`	`sm`, `md`, `lg`
`focusOutline(bool $cond)`	Setup	`false`	Enable shared focus ring

Inherited FileUpload API

Commonly used methods from the standard Filament FileUpload:

disk(string $name)
directory(string $directory)
visibility(string $visibility)
maxSize(int $size)
deleteFileOnRemove() (Enabled by default)

Real-world examples

Support Ticket Voice Note

VoiceNoteRecorderField::make('issue_description')
    ->label('Describe the issue')
    ->disk('public')
    ->directory('tickets/voice-notes')
    ->maxDuration(60)
    ->required()
    ->helperText('Record up to 1 minute.');

Private S3 Recording

VoiceNoteRecorderField::make('private_note')
    ->disk('s3')
    ->directory('internal/voice')
    ->visibility('private')
    ->uploadImmediately();

Playground

Slug: voice-note-recorder-field /admin/flex-fields-playground/voice-note-recorder-field See Playground for setup.

Component	When to use instead
AudioField	Playback-only audio pill
FlexFileUpload	Standard file picker for existing audio files
VideoField	Video playback and recording (if supported)

CSS classes (reference)

Class	Role
`fff-voice-recorder`	Root wrapper
`fff-voice-recorder--{sm\|md\|lg}`	Size variant
`fff-voice-recorder__record-btn`	Microphone button
`fff-voice-recorder__recording`	Active recording UI
`fff-voice-recorder__visualizer`	Real-time frequency canvas
`fff-voice-recorder__playback-pill`	Playback bar wrapper
`fff-voice-recorder__waveform`	Scrubbable waveform
`is-submitting`	Deferred upload in progress

Getting Started

Guides & Resources

Text & Input

Number & Range

Choice & Selection

Date & Time

Media, Color & Location

Rating & Tables

Actions & Enterprise

Layout & Display (Schemas)

Summary

Basic usage

Default — Upload on Form Submit

Immediate Upload after Recording

State & validation

Stored value

Validation rules

Media Ingress metadata

Configuration API

Inherited FileUpload API

Real-world examples

Support Ticket Voice Note

Private S3 Recording

Playground

CSS classes (reference)

​Summary

​Basic usage

​Default — Upload on Form Submit

​Immediate Upload after Recording

​State & validation

​Stored value

​Validation rules

​Media Ingress metadata

​Configuration API

​Inherited FileUpload API

​Real-world examples

​Support Ticket Voice Note

​Private S3 Recording

​Playground

​Related components

​CSS classes (reference)

Summary

Basic usage

Default — Upload on Form Submit

Immediate Upload after Recording

State & validation

Stored value

Validation rules

Media Ingress metadata

Configuration API

Inherited FileUpload API

Real-world examples

Support Ticket Voice Note

Private S3 Recording

Playground

Related components

CSS classes (reference)