Implementation:FlowiseAI Flowise AudioWaveform

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Audio Playback
Last Updated	2026-02-12 07:00 GMT

Overview

AudioWaveform is a visual audio player component that renders a waveform visualization on an HTML canvas with play/pause controls and click-to-seek functionality.

Description

This React component decodes audio data using the Web Audio API to generate waveform visualization data, then renders thin vertical bars on an HTML canvas element. The bars are colored based on playback progress: played bars use the theme's primary color, while unplayed bars use a neutral gray. The component supports both internal and external audio references, handles high-DPI displays for crisp rendering, and generates a realistic placeholder waveform pattern when no audio source is available or while audio is being generated.

Usage

Use this component wherever audio playback with a visual waveform indicator is needed, such as in text-to-speech output display or audio message rendering in the chat interface.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/extended/AudioWaveform.jsx
• Lines: 1-311

Signature

const AudioWaveform = ({
    audioSrc,
    onPlay,
    onPause,
    onEnded,
    isPlaying = false,
    duration: _duration = 0,
    isGenerating = false,
    disabled = false,
    externalAudioRef = null,
    resetProgress = false
}) => {
    // Renders waveform on canvas, handles play/pause, seeking, and progress tracking
}

Import

import AudioWaveform from '@/ui-component/extended/AudioWaveform'

I/O Contract

Inputs

Name	Type	Required	Description
audioSrc	string	No	URL or blob URL of the audio source
onPlay	func	No	Callback invoked when the play button is clicked
onPause	func	No	Callback invoked when the pause button is clicked
onEnded	func	No	Callback invoked when audio playback ends
isPlaying	bool	No	Whether audio is currently playing (default: false)
duration	number	No	Audio duration hint (default: 0)
isGenerating	bool	No	Whether audio is being generated, shows spinner (default: false)
disabled	bool	No	Whether the player controls are disabled (default: false)
externalAudioRef	object	No	External HTMLAudioElement ref for shared audio control (default: null)
resetProgress	bool	No	When true, resets progress to 0 (default: false)

Outputs

Name	Type	Description
Rendered Component	JSX.Element	A Box containing a play/pause IconButton and a canvas waveform visualization

Key Internal Functions

generateWaveform(buffer)

Processes an AudioBuffer into 200 amplitude samples by averaging channel data in blocks, then normalizes to 0-100 range.

generatePlaceholderWaveform()

Creates a realistic-looking placeholder waveform with 200 samples using sine waves and random variation for display when no audio is loaded.

drawWaveform()

Renders the waveform data as thin vertical bars on the canvas, with played bars colored in the primary theme color and unplayed bars in gray. Handles high-DPI scaling via window.devicePixelRatio.

handleCanvasClick(event)

Calculates click position relative to canvas width and seeks the audio to the corresponding time position.

Usage Examples

Basic Usage

import AudioWaveform from '@/ui-component/extended/AudioWaveform'

const AudioPlayer = ({ audioUrl }) => {
    const [playing, setPlaying] = useState(false)
    const audioRef = useRef(new Audio(audioUrl))

    return (
        <AudioWaveform
            audioSrc={audioUrl}
            isPlaying={playing}
            onPlay={() => { audioRef.current.play(); setPlaying(true) }}
            onPause={() => { audioRef.current.pause(); setPlaying(false) }}
            onEnded={() => setPlaying(false)}
            externalAudioRef={audioRef.current}
        />
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Audio_Visualization