javascript Supabase上传的音频blob未播放

2ul0zpep  于 2023-04-19  发布在  Java
关注(0)|答案(1)|浏览(114)

我正在使用Supabase存储来存储音频blob。blob是从API调用返回的,一旦返回,它就被上传了。我可以在我的存储桶中看到文件,文件类型为audio/mpeg,大小相关联,但是当我按下播放时,什么也没有发生,音频的长度是0:00。当我手动上传mp3文件时,我看到长度为1:29,文件播放。下面是实现它的代码。我知道API工作,因为我在客户端调用它,音频播放。我试图将blob保存到数据库,以防止不必要的API调用。

const getAudio = async (message) => {
console.log("called");
const data = {
  text: "hi",
  voice_settings: {
    stability: 0,
    similarity_boost: 0,
  },
};

const config = {
  headers: {
    "xi-api-key": process.env.API_KEY,
  },
  responseType: "blob",
};
try {
  const voiceResponse = await axios.post(
    "https://api.elevenlabs.io/v1/text-to-speech/XXXXXXXXXXX",
    data,
    config
  );

  console.log(voiceResponse.data);

  blob = new Blob([voiceResponse.data], { type: "audio/mpeg" });
  console.log("=========================================");
  console.log(blob);

  const response = await supabase.storage
    .from("audio_blobs")
    .upload(email + "/" + "audio.mp3", blob, {
      contentType: "audio/mpeg",
    });

  if (response.error) {
    console.log(response.error);
  } else {
    console.log("success");
  }

} catch (err) {
  console.log(err);
}

}; getName()

h7appiyu

h7appiyu1#

关于official documentation
对于React Native,使用Blob,File或FormData都无法正常工作。使用ArrayBuffer从base64文件数据上传文件,请参见下面的示例。
因此,您需要以mp3格式获取文件,然后使用数组缓冲区:

import { decode } from 'base64-arraybuffer'
// (...)
const { data, error } = await supabase
  .storage
  .from('avatars')
  .upload('email'+ "/" + "audio.mp3", decode('mp3_file'), {
    contentType: 'audio/mpeg'
  })

相关问题