Search code examples
javascriptreactjsflaskaudiohtml5-audio

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
Solution

  • 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>