title: Get audio from a Flask server and showing audio in a playable format on React
body: <p><strong>Backstory</strong></p>
  <p>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.</p>
  <hr />
  <p><strong>What i need</strong></p>
  <p>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 <strong>show it in a playable format in React or at least save locally</strong> in a audio format. thank you for any help.
  <a href="https://i.stack.imgur.com/9k55T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9k55T.png" alt="current output" /></a></p>
  <p>axios config</p>
  <pre><code>import axios from &quot;axios&quot;;
  
  export default axios.create({
    baseURL: &quot;http://localhost:5000&quot;
  });
  
  </code></pre>
  <p>code on react side</p>
  <pre><code>try {
       const res = await api.get(&quot;/download&quot;);
       console.log(res);
     } catch (error) {
       console.log(error);
     }
  </code></pre>
  <p>code on the Flask api</p>
  <pre><code>@app.route('/download')
    @cross_origin()
     def download():
         
         instrument = 'piano'
     
         stem_path = f&quot;backend/audio/{instrument}.wav&quot;
         if os.path.isfile(stem_path):
             return send_file(stem_path, mimetype=&quot;audio/wav&quot;, as_attachment=True)
         else:
            return {&quot;message&quot;: &quot;cannot download stem&quot;}, 401
  </code></pre>