背景故事
我正在做一個音樂專案，它接收一個音頻檔案并將鋼琴莖與該音頻分開。分離音頻后，它將檔案本地保存在 api 檔案夾中。然后我從我的 React 應用程式向我的燒瓶 api 發送一個回傳音頻檔案的 GET 請求。
我需要的
問題是燒瓶以二進制格式回傳音頻（我不確定看下圖），我想知道如何在 React 中以可播放格式顯示它，或者至少以音頻格式在本地保存。感謝您的任何幫助。
axios 配置
import axios from "axios";
export default axios.create({
baseURL: "http://localhost:5000"
});
反應端的代碼
try {
const res = await api.get("/download");
console.log(res);
} catch (error) {
console.log(error);
}
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
uj5u.com熱心網友回復：
正確，這是一個二進制 RIFF/WAV 標頭。您的客戶端可以將二進制回應決議為一個ArrayBuffer并創建一個Blob來播放或保存：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/412536.html
標籤：
上一篇：如何在保持不變性的同時更新狀態？