BarVisualizer doesn't display anything

[frmsaul]

Select which package(s) are affected

@livekit/components-react

Describe the bug

This is how i display it:

function SimpleVoiceAssistant(props) {
  const { state, audioTrack } = useVoiceAssistant();
  useEffect(() => {
    props.onStateChange(state);
  }, [props, state]);

  return (
    <div className="h-[300px] w-[90vw] mx-auto bg-red-200">
      <BarVisualizer
        state={state}
        barCount={5}
        trackRef={audioTrack}
        className="agent-visualizer"
        options={{ minHeight: 24 }} />
    </div>
  );
}

this is what i see:

I can hear the voice and agent states are correctly tracked, but i could never see the BarVisualizer. Are there alternatives for displaying audio?

Reproduction

This is how i display it:

function SimpleVoiceAssistant(props) {
  const { state, audioTrack } = useVoiceAssistant();
  useEffect(() => {
    props.onStateChange(state);
  }, [props, state]);

  return (
    <div className="h-[300px] w-[90vw] mx-auto bg-red-200">
      <BarVisualizer
        state={state}
        barCount={5}
        trackRef={audioTrack}
        className="agent-visualizer"
        options={{ minHeight: 24 }} />
    </div>
  );
}

I get the same issue with just: <BarVisualizer state={state} trackRef={audioTrack} />

audioTrack looks like this:

{
    "participant": {
        "_events": {
            "trackSubscriptionFailed": [
                null,
                null
            ]
        },
        "_eventsCount": 14,
        "_maxListeners": 100,
        "audioLevel": 0,
        "isSpeaking": false,
        "_connectionQuality": "excellent",
        "log": {
            "name": "livekit-participant",
            "levels": {
                "TRACE": 0,
                "DEBUG": 1,
                "INFO": 2,
                "WARN": 3,
                "ERROR": 4,
                "SILENT": 5
            }
        },
        "loggerOptions": {},
        "sid": "PA_gzNbpLNRdsqn",
        "identity": "agent-AJ_jqYsPneyaUJK",
        "name": "",
        "metadata": "",
        "audioTrackPublications": {},
        "videoTrackPublications": {},
        "trackPublications": {},
        "_kind": 4,
        "_attributes": {
            "lk.agent.state": "listening"
        },
        "signalClient": {
            "rtt": 44,
            "state": 4,
            "log": {
                "name": "livekit-signal",
                "levels": {
                    "TRACE": 0,
                    "DEBUG": 1,
                    "INFO": 2,
                    "WARN": 3,
                    "ERROR": 4,
                    "SILENT": 5
                }
            },
            "_requestId": 0,
            "useJSON": false,
            "requestQueue": {
                "pendingTasks": {},
                "taskMutex": {
                    "_locking": {},
                    "_locks": 0
                },
                "nextTaskIndex": 17
            },
            "queuedRequests": [],
            "closingLock": {
                "_locking": {},
                "_locks": 0
            },
            "connectionLock": {
                "_locking": {},
                "_locks": 0
            },
            "options": {
                "autoSubscribe": true,
                "adaptiveStream": false,
                "maxRetries": 1,
                "e2eeEnabled": false,
                "websocketTimeout": 15000
            },
            "connectOptions": {
                "autoSubscribe": true,
                "adaptiveStream": false,
                "maxRetries": 1,
                "e2eeEnabled": false,
                "websocketTimeout": 15000
            },
            "pingTimeoutDuration": 15,
            "pingIntervalDuration": 5,
            "pingTimeout": 532,
            "pingInterval": 188
        },
        "volumeMap": {},
        "permissions": {
            "canSubscribe": true,
            "canPublish": true,
            "canPublishData": true,
            "hidden": false,
            "recorder": false,
            "canPublishSources": [],
            "canUpdateMetadata": true,
            "agent": true,
            "canSubscribeMetrics": false
        },
        "participantInfo": {
            "sid": "PA_gzNbpLNRdsqn",
            "identity": "agent-AJ_jqYsPneyaUJK",
            "state": "ACTIVE",
            "tracks": [
                {
                    "sid": "TR_AMP9fVKdkJaQff",
                    "type": "AUDIO",
                    "name": "assistant_voice",
                    "muted": false,
                    "width": 0,
                    "height": 0,
                    "simulcast": false,
                    "disableDtx": true,
                    "source": "MICROPHONE",
                    "layers": [],
                    "mimeType": "audio/opus",
                    "mid": "0",
                    "codecs": [],
                    "stereo": false,
                    "disableRed": true,
                    "encryption": "NONE",
                    "stream": "camera",
                    "version": {
                        "unixMicro": "1728240596515855",
                        "ticks": 0
                    },
                    "audioFeatures": [
                        "TF_NO_DTX"
                    ]
                }
            ],
            "metadata": "",
            "joinedAt": "1728240595",
            "name": "",
            "version": 7,
            "permission": {
                "canSubscribe": true,
                "canPublish": true,
                "canPublishData": true,
                "hidden": false,
                "recorder": false,
                "canPublishSources": [],
                "canUpdateMetadata": true,
                "agent": true,
                "canSubscribeMetrics": false
            },
            "region": "ophoenix1a",
            "isPublisher": true,
            "kind": "AGENT",
            "attributes": {
                "lk.agent.state": "listening"
            },
            "disconnectReason": "UNKNOWN_REASON"
        },
        "lastSpokeAt": "2024-10-06T18:50:00.386Z"
    },
    "publication": {
        "_events": {},
        "_eventsCount": 9,
        "_maxListeners": 100,
        "metadataMuted": false,
        "encryption": 0,
        "log": {
            "name": "livekit-track-publication",
            "levels": {
                "TRACE": 0,
                "DEBUG": 1,
                "INFO": 2,
                "WARN": 3,
                "ERROR": 4,
                "SILENT": 5
            }
        },
        "kind": "audio",
        "trackSid": "TR_AMP9fVKdkJaQff",
        "trackName": "assistant_voice",
        "source": "microphone",
        "allowed": true,
        "disabled": false,
        "currentVideoQuality": 2,
        "subscribed": true,
        "mimeType": "audio/opus",
        "trackInfo": {
            "sid": "TR_AMP9fVKdkJaQff",
            "type": "AUDIO",
            "name": "assistant_voice",
            "muted": false,
            "width": 0,
            "height": 0,
            "simulcast": false,
            "disableDtx": true,
            "source": "MICROPHONE",
            "layers": [],
            "mimeType": "audio/opus",
            "mid": "0",
            "codecs": [],
            "stereo": false,
            "disableRed": true,
            "encryption": "NONE",
            "stream": "camera",
            "version": {
                "unixMicro": "1728240596515855",
                "ticks": 0
            },
            "audioFeatures": [
                "TF_NO_DTX"
            ]
        }
    },
    "source": "microphone"
}

when i print it.

Logs

No response

System Info

System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M2
    Memory: 160.84 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 129.0.6668.90
    Safari: 15.6
  npmPackages:
    livekit-client: ^2.5.6 => 2.5.6 

This is consistent across browsers.

### Severity

blocking all usage of LiveKit

### Additional Information

_No response_