Skip to main content
AudioField ← Back to Table of Contents

​
Summary

Compact audio player featuring a modern “iMessage-style” voice note pill. Includes waveform visualization, play/pause controls, and optional looping. State is typically stored as a URL string to the audio file.
ClassBjanczak\FilamentFlexFields\Filament\Forms\Components\AudioField
State typestring|null — audio URL (when not using static src())
FieldTypeaudio
Playgroundaudio-field slug in Flex Fields playground

​
Basic usage

​
Dynamic Audio (from State)

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

AudioField::make('preview_url')
    ->label('Voice message')
    ->fullWidth()
    ->loop();

​
Static Audio (Fixed Source)

AudioField::make('jingle')
    ->src('/audio/notification.mp3')
    ->waveform([20, 45, 80, 60, 35, 90, 50, 30])
    ->size('lg');

​
State & validation

​
Stored value

State is a string representing the audio URL. 
$record->preview_url; // 'https://example.com/audio.mp3'

​
Validation rules (built-in)

Ensures the state is a valid media URL string.

​
Configuration API

All methods accept Closure unless noted.
MethodTypeDefaultDescription
src(string $src)SetupnullFixed audio URL (overrides state)
fullWidth(bool $condition)SetupfalseStretch player to container width
loop(bool $condition)SetupfalseLoop playback
waveform(array $waveform)SetupdefaultCustom peak heights 8–100
playIcon(string $icon)SetupconfigCustom play icon
pauseIcon(string $icon)SetupconfigCustom pause icon
size(string $size)Setup'md'sm, md, lg
readOnly(bool $condition)SetupfalseDisable interaction
rounding(string $rounding)SetupconfigBorder radius token

​
Real-world examples

​
Post-Recording Preview

AudioField::make('recorded_audio')
    ->label('Listen to your recording')
    ->live()
    ->visible(fn ($state) => filled($state));

​
Fixed Demo Track

AudioField::make('demo')
    ->src('https://cdn.example.com/demo.mp3')
    ->readOnly()
    ->waveform(fn () => [30, 70, 45, 90, 55, 40, 75, 50]);

​
Playground

/admin/flex-fields-playground/audio-field See Playground for setup.
ComponentWhen to use instead
VoiceNoteRecorderFieldRecord audio from the microphone
VideoFieldFull video player with controls
FlexFileUploadStandard file upload for audio files

​
CSS classes (reference)

ClassRole
fff-audio-field-fieldRoot wrapper
fff-audio-field-field--{sm|md|lg}Size variant
fff-audio-field__waveformWaveform bars container
fff-audio-field__barIndividual waveform bar
fff-audio-field__playPlay/pause button
fff-audio-field__durationTime display