voice_recorder

A powerful and user-friendly voice recording module for Drupal, enabling audio recording directly in the browser with MP3 encoding.

By using this module, you can select a field widget for your file field, record audio through a microphone, and store it as an MP3 file. The recording process is managed via a floating widget that appears upon clicking the "Record" button. The recorder creates an MP3 file and sets it to the upload element.

This module utilizes the Recorderjs and lamejs libraries for in-browser recording and encoding.

Features

• Provides an element and a field widget for file fields.
• Supports both single and multiple file fields.
• Supports usage in custom forms, altering via hooks, templates overrides of recording button and floating widget.
• Enables browser-based audio recording with fallback to default file upload.
• Configurable widget displaying: show/hide upload, elements to show on file preview (file link with size, audio player, both).
• Full recording controls: pause, resume, and restart.
• Configurable countdown timer before recording starts.
• Supports maximum duration limits (automatically stops recording when the limit is reached.
• Visual feedback: a recording duration display, statuses, indication of encoding progress.
• Warns users before reloading the page during recording.
• MP3 encoding directly on the client side.
• Checks for browser compatibility.
• Graceful error handling with error messages displayed in the floating widget.
• Mobile-friendly interface.

Requirements

• A modern browser with audio recording support (Chrome, Firefox, Safari, Edge, etc.).
• JavaScript must be enabled.

Installation

1. Install the module using Composer.
2. Activate the module via the /admin/modules page or using Drush.

Usage

As a Field Widget:

1. Add a file field to your entity, ensuring it allows MP3 file extensions (more extensions can be set if you want them to be uploaded).
2. Select the "Voice Recorder File" field widget for your file field.
3. Configure the widget settings, including:
   • Maximum recording duration (highly recommended)
   • Countdown timer duration
   • ... Additional settings available in the widget configuration form
   • ... Custom settings adjustments via a hook (if specific customization needed)

In Custom Forms:

$form['recording'] = [
  '#type' => 'voice_recorder_file',
  '#upload_validators' => [
    'FileExtension' => ['extensions' => 'mp3'],
  ],
  '#voice_recorder_settings' => [
    'initiator_field_label' => 'The label to display inside widget',
    // Max recording 1 minute, use 0 for unlimited recording.
    'max_recording_time' => 60,
    // 3 seconds countdown, use 0 for no countdown.
    'countdown_time_before_recording' => 3,
    'start_recording_label' => t('Start recording'),
    'upload_element_displaying' => 'show',
    'file_information_displaying' => 'filename_link_and_audio',
    // Other settings: VoiceFileRecorder::getVoiceRecorderDefaultSettings
  ],
  // Other properties same as in '#type' => 'managed_file'.
];

How can you get involved?

• Report any bugs, feature requests, etc. in the issue tracker.
• Contribute code back to the module.

Similar modules

Audio Recorder Widget

Authors

• Volodymyr Knyshuk
• Justin Phelan

🇺🇦

This module is maintained by Ukrainian developers.
Please consider supporting Ukraine in a fight for their freedom and safety of Europe.