Angular音频显示

Posted by zhangxx on April 20, 2024

在开发中遇到了在前端将后端传来的音频展示的需求。

这个问题需要从两方面出发,一是后端如何将音频文件传出,二是前端调了接口后怎么处理。

后端

1
2
3
  cur_path = audio.transfer(path)
  file = open(cur_path, 'rb')
  return send_file(file, mimetype='audio/wav') 在这个过程中有一点需要注意,因为需要前后端都操作,可以利用postman先确保后端正确传输,再调整前端。

前端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  fetch(url,{
  method: 'POST',
  body: JSON.stringify(data),
  headers: new Headers({
    'Content-Type': 'application/json'
  })
})
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    console.log(url)
    const audio_element = new Audio(url);
    const  div = document.getElementById('div1');
    audio_element.controls=true;
    div!.appendChild(audio_element)
    audio_element.play();
  });

还有一种可行方案是后端用send_from_directory来传输文件,这样可能需要在前端对’Content-Type’进行修改。