README

A Filament plugin that provides a VoiceTextarea field component, allowing users to fill textarea fields using their microphone (voice-to-text) via the browser's built-in speech recognition API.

🚀 Quick Start

Install the package:

composer require ruelluna/filament-voice-textarea

Use in your forms:

use Ruelluna\FilamentVoiceTextarea\Forms\Components\VoiceTextarea;

VoiceTextarea::make('description')
    ->label('Description')
    ->enableVoice()
    ->required();

That's it! The microphone button will automatically appear in the lower right corner of your textarea.

Features

🎤 Voice Recognition: Use your microphone to dictate text into textarea fields
🔄 Real-time Transcription: See your speech converted to text in real-time
🎯 Filament Integration: Seamlessly integrates with Filament Forms
🌐 Browser Support: Works with Chrome, Edge, and other Web Speech API compatible browsers
🎨 Customizable UI: Clean, accessible interface with visual feedback

Browser Support

This plugin uses the Web Speech API, which is currently supported in:

✅ Chrome (version 25+)
✅ Edge (version 79+)
✅ Safari (version 14.1+)
❌ Firefox (not supported)

Installation

You can install the package via composer:

composer require ruelluna/filament-voice-textarea

Automatic Asset Loading

The package automatically loads all required assets (JavaScript, CSS, and views) when installed. No manual asset publishing is required!

What happens automatically:

✅ JavaScript and CSS assets are registered with Filament
✅ Views are automatically available via the filament-voice-textarea namespace
✅ Assets are loaded on-demand for optimal performance
✅ Service provider is auto-discovered by Laravel

For package developers: If you're developing the package locally, you can build the assets:

npm install
npm run build

Quick Installation

Run the installation command to set up everything automatically:

php artisan filament-voice-textarea:install

This command will:

Publish the configuration file
Run any migrations (if applicable)
Ask if you want to star the repository on GitHub

Manual Installation (Optional)

If you prefer to install components manually:

Publish the config file (optional):

php artisan vendor:publish --tag="filament-voice-textarea-config"

Publish the views (optional):

php artisan vendor:publish --tag="filament-voice-textarea-views"

Note: Assets are automatically loaded and do not need to be published manually.

Usage

Basic Usage

Use the VoiceTextarea component in your Filament forms:

use Ruelluna\FilamentVoiceTextarea\Forms\Components\VoiceTextarea;

// In your Filament form
public function form(Form $form): Form
{
    return $form
        ->schema([
            VoiceTextarea::make('description')
                ->label('Description')
                ->enableVoice()
                ->helperText('Click the microphone icon to start voice recognition')
                ->required(),
        ]);
}

Advanced Usage

VoiceTextarea::make('content')
    ->label('Article Content')
    ->enableVoice()
    ->rows(10)
    ->placeholder('Start typing or click the microphone to dictate...')
    ->helperText('Use voice recognition for faster content creation')
    ->required()
    ->columnSpanFull();

In Filament Resources

use Ruelluna\FilamentVoiceTextarea\Forms\Components\VoiceTextarea;

class PostResource extends Resource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('title')
                    ->required(),

                VoiceTextarea::make('content')
                    ->enableVoice()
                    ->required(),

                // ... other fields
            ]);
    }
}

How It Works

Enable Voice: Call the enableVoice() method on your VoiceTextarea field
Microphone Button: A microphone icon appears next to the textarea
Click to Start: Click the microphone button to begin voice recognition
Speak: Your speech is converted to text in real-time
Auto-append: Recognized text is automatically added to the textarea
Form Integration: Changes are automatically detected by Filament/Livewire

Configuration

The plugin publishes a configuration file at config/voice-textarea.php:

return [
    // Default language for speech recognition
    'default_language' => 'en-US',

    // Whether to enable continuous recognition by default
    'continuous_recognition' => true,

    // Whether to show interim results
    'interim_results' => true,
];

Troubleshooting

Microphone Access Denied

If you see a "Please allow microphone access" error:

Check your browser's microphone permissions
Click the microphone icon in the address bar
Allow microphone access for your site

Speech Recognition Not Working

Ensure you're using a supported browser (Chrome, Edge, Safari)
Check that your microphone is working and properly connected
Try refreshing the page and granting microphone permissions again

No Speech Detected

Speak clearly and at a normal volume
Ensure your microphone is not muted
Try moving closer to your microphone

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

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

ruelluna / filament-voice-textarea

Maintainers

Details