Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

258
Vistas
Get audio from a Flask server and showing audio in a playable format on React

Backstory

I'm working on a music project that receives an audio file and separates piano stem from that audio. after separating the audio it will save the file locally on the api folder. then i'm sending a GET request from my React app to my flask api that return the audio file.


What i need

the problem is flask returns audio in a binary format(i'm not sure see the image below) and i want to know how to show it in a playable format in React or at least save locally in a audio format. thank you for any help. current output

axios config

import axios from "axios";

export default axios.create({
  baseURL: "http://localhost:5000"
});

code on react side

try {
     const res = await api.get("/download");
     console.log(res);
   } catch (error) {
     console.log(error);
   }

code on the Flask api

@app.route('/download')
  @cross_origin()
   def download():
       
       instrument = 'piano'
   
       stem_path = f"backend/audio/{instrument}.wav"
       if os.path.isfile(stem_path):
           return send_file(stem_path, mimetype="audio/wav", as_attachment=True)
       else:
          return {"message": "cannot download stem"}, 401
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Correct, that's a binary RIFF/WAV header. Your client could could parse the binary response into an ArrayBuffer and create a Blob to play or save:

setAudio(
  document.querySelector('audio'),
  'https://opus-bitrates.anthum.com/audio/music-96.opus',
)

async function setAudio(audio, url) {
  audio.src = URL.createObjectURL(
    new Blob([ await (await fetch(url)).arrayBuffer() ])
  )
}
<audio controls></audio>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda