How to only use the audio player

[dHarshMakwana]

Hello so I dont want to use the audio recorder just the player I have a link to the audio and I want to play it in a audio player with visualizer

[stubinubin]

For anyone wanting to now this, use setPreloadedAudioBlob hook to load in a blob. See below.

import React, { useEffect } from "react";
import { useVoiceVisualizer, VoiceVisualizer } from "react-voice-visualizer";

export default function AudioPlayerFromURL() {
  const recorderControls = useVoiceVisualizer();
  const {recordedBlob, setPreloadedAudioBlob} = recorderControls

  useEffect(() => {
    async function loadAudio() {
      try {
        const response = await fetch("/path/to/audio/file.mp3"); // or .wav
        const arrayBuffer = await response.arrayBuffer();
        const blob = new Blob([arrayBuffer], { type: "audio/mpeg" });  // or audio/wav
        setPreloadedAudioBlob(blob);
      } catch (error) {
        console.error("Error loading audio:", error);
      }
    }
    
    if (!recordedBlob) {
      loadAudio();
    }
  }, [recordedBlob, setPreloadedAudioBlob]);

  return (
    <VoiceVisualizer
        width={500}
        height={150}
        controls={recorderControls}
      />
  );
}