blob URL doesn't work

[Grinnbob]

I've tried all possible variants of getting file and play it on frontend without saving it to local path but I can't understand how to do this if I receive blob (or arrayBuffer) from backend

const response = await fetch('../../../assets/sounds/audio.wav');
const fileBlob = await response.blob();
const url = URL.createObjectURL(fileBlob);

// child component
const [play, {pause, duration, sound}] = useSound(url);

also I've tried

      const blob = await axios.get<Blob>(/my/audio/path/to/backend, {
    responseType: 'blob',
    headers: {
      'Content-Type': 'audio/wav',
    },
});
      const url = URL.createObjectURL(blob);

it doesn't work but if I provide pure path like '../../../assets/sounds/audio.wav' or response.url it works fine

[TheFabi8A]

Using base64 works for me

const [fileUrlPreview, setFileUrlPreview] = useState<string | undefined>();

const onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
  if (e.target.files) {
    const file = e.target.files[0];

    if (!file) return;

    const { type, size } = file;

    const fileReader = new FileReader();

    setFile(file);

    fileReader.readAsArrayBuffer(file);

    fileReader.addEventListener("load", (e) => {
      if (e && e.target && e.target.result) {
        const arrayBuffer = e.target.result as Buffer;
        const base64Str = Buffer.from(arrayBuffer).toString("base64");

        setFileUrlPreview(`data:audio/mpeg;base64,${base64Str}`);
      }
    });
  }
};