Implementation:FlowiseAI Flowise AudioRecording

Knowledge Sources	FlowiseAI Flowise
Domains	Audio Processing, Chat Messages
Last Updated	2026-02-12 07:00 GMT

Overview

audio-recording.js is a JavaScript utility module that provides an API for capturing, stopping, and cancelling audio recordings via the browser's MediaRecorder interface, with elapsed time tracking and Safari compatibility handling.

Description

This module exposes three main functions (startAudioRecording, stopAudioRecording, cancelAudioRecording) and an audioRecorder object that encapsulates the low-level MediaRecorder lifecycle. It handles microphone permission requests via navigator.mediaDevices.getUserMedia, accumulates audio data blobs, manages stream cleanup, and provides comprehensive error handling for various MediaDevices API failures. The module also tracks elapsed recording time displayed in an HTML element and enforces a configurable maximum recording duration (default 1 hour). Safari-specific behavior is handled by passing a timeslice parameter to MediaRecorder.start() to work around known Whisper API compatibility issues.

Usage

Use this module within the chat message input area to enable voice-based message input. The exported functions are called by UI components that manage recording buttons and elapsed time display.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/chatmessage/audio-recording.js
• Lines: 1-344

Signature

export function startAudioRecording(onRecordingStart, onUnsupportedBrowser) { /* ... */ }

export function stopAudioRecording(addRecordingToPreviews) { /* ... */ }

export function cancelAudioRecording() { /* ... */ }

export const audioRecorder = {
    audioBlobs: [],
    mediaRecorder: null,
    streamBeingCaptured: null,
    start: function () { /* ... */ },
    stop: function () { /* ... */ },
    cancel: function () { /* ... */ },
    stopStream: function () { /* ... */ },
    resetRecordingProperties: function () { /* ... */ }
}

Import

import { startAudioRecording, stopAudioRecording, cancelAudioRecording, audioRecorder } from '@/views/chatmessage/audio-recording'

I/O Contract

Inputs

Name	Type	Required	Description
onRecordingStart	function	No	Callback invoked with true when recording starts successfully
onUnsupportedBrowser	function	No	Callback invoked with true if the browser does not support MediaDevices
addRecordingToPreviews	function	No	Callback invoked with the audio Blob when recording is stopped

Outputs

Name	Type	Description
audioBlob	Blob	The recorded audio data as a Blob object (returned via stopAudioRecording callback)
audioRecorder	object	Singleton object managing the MediaRecorder state and stream lifecycle

Usage Examples

Basic Usage

import { startAudioRecording, stopAudioRecording, cancelAudioRecording } from '@/views/chatmessage/audio-recording'

// Start recording
startAudioRecording(
    (isRecording) => console.log('Recording started:', isRecording),
    (isUnsupported) => console.log('Browser unsupported:', isUnsupported)
)

// Stop recording and get the audio blob
stopAudioRecording((audioBlob) => {
    const audioUrl = URL.createObjectURL(audioBlob)
    console.log('Recording URL:', audioUrl)
})

// Cancel recording without saving
cancelAudioRecording()

Related Pages

• Principle:FlowiseAI_Flowise_Speech_Processing