如何将 blob 转换为 wav 文件答案

【问题标题】：How to convert blob to wav file如何将 blob 转换为 wav 文件
【发布时间】：2021-07-12 19:16:44
【问题描述】：

我使用媒体记录器创建了一个 .wav 类型的 blob 对象。我正在尝试将数据作为 .wav 发送到烧瓶进行处理，但我似乎无法将 blob 类型更改为 .wav 类型，或者有没有办法使用 python 中的 blob 保存为 wav 文件？我是 blob 新手，所以我的问题可能很愚蠢。

代码如下：

function makeLink(){
  let blob = new Blob(chunks, {type: media.type })
    , Url = URL.createObjectURL(blob)
    , li = document.createElement('li')
    , mt = document.createElement(media.tag)
    , hf = document.createElement('a');
  
  mt.controls = true;
  mt.src = Url;
  hf.href = Url;
  hf.download = `${counter++}${media.ext}`;
  hf.innerHTML = `donwload ${hf.download}`;

  //processing data
  jQuery(document).ready(function(){

    let x='test'
    $.ajax({
     type:'GET',
     url:'/answer/voice',
     data:{
        audio:  window.btoa(blob)
     },
     success:function(result) {
            $("#chatbox").append('<p class ="userText"><audio style="background-color:white;" controls> <source src="' + Url+ '" type="audio/wav"></audio></p>');
            $("#chatbox").append('<p class ="botText"><span>' + result.emotion+ '</span></p>');
            $("#textInput").val("")
            },
      error:function(result){
         alert('sorry an error occured');
      }
    })

}); }

和烧瓶部分：

 @app.route('/answer/voice', methods=['GET'])
    def answer_voice():

    blob=request.args.get("audio")
    print(blob)
    blob =base64.b64decode(blob)
    print(" decoded : ")
    print(blob)
    
    result=get_audio_sentiments(blob)
    return jsonify({'emotion':result  })

获取音频情感函数是一个接受文件类型 wav 类型的函数，因此我需要将该 blob 转换为真正的 wav 文件。我尝试在将数据放入blob之前再次对其进行解码使用 formdata 发送它，但我在那里没有专业知识。

【问题讨论】：

在 GET 请求中发送音频文件听起来不是一个好主意，您应该通过 FormData 对象将其作为 multipart/form-data 发送。此外，您不需要将 ajax 请求包装在 document.ready 块中。
我尝试了formdata，但没有processData：false，contentType：false，它不起作用，但是当我这样做时，返回值变为none
@Musa 你能给我看一个服务器和js的例子吗？

标签： javascript ajax flask

【解决方案1】：

function makeLink(){
  let blob = new Blob(chunks, {type: media.type })
    , Url = URL.createObjectURL(blob)
    , li = document.createElement('li')
    , mt = document.createElement(media.tag)
    , hf = document.createElement('a');
  
  mt.controls = true;
  mt.src = Url;
  hf.href = Url;
  hf.download = `${counter++}${media.ext}`;
  hf.innerHTML = `donwload ${hf.download}`;

  let formData = new FormData();
  formData.append(audio, blob, 'audio.wav');
  let x='test'
  $.ajax({
    type:'GET',
    url:'/answer/voice',
    data: formData,
    contentType: false,
    processData: false,
    success:function(result) {
      $("#chatbox").append('<p class ="userText"><audio style="background-color:white;" controls> <source src="' + Url+ '" type="audio/wav"></audio></p>');
      $("#chatbox").append('<p class ="botText"><span>' + result.emotion+ '</span></p>');
      $("#textInput").val("")
    },
    error:function(result){
      alert('sorry an error occured');
    }
  });
}

@app.route('/answer/voice', methods=['POST'])
    def answer_voice():

    blob=request.files["audio"]
    print(blob)
    with open(blob, 'r') as f: 
        result=get_audio_sentiments(f.read())
    return jsonify({'emotion':result  })

【讨论】：

【解决方案2】：

@Musa 的回答是对的。我也发现了这个解决方案：

  var xhr=new XMLHttpRequest();
         
          var fd=new FormData();
          fd.append("audio_data",blob, "output.wav");
          xhr.open("POST","/answer/voice",true);
          xhr.send(fd);
  //processing data
  // jQuery(document).ready(function(){
    xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      resultats = this.responseText
      var results=JSON.parse(resultats);
      console.log(typeof results);
      $("#chatbox").append('<p class ="userText"><audio style="background-color:white;" controls> <source src="' + Url+ '" type="audio/wav"></audio></p>');
   
      let userHtml = '<p class="userText"><span>' +results.question + '</span></p>';
      $("#chatbox").append(userHtml);
            $("#chatbox").append('<p class ="botText"><span>'  +results.answerered+ ' '+ results.emotion+ '</span></p>');
           $("#textInput").val("")


    }
   
  }

我使用了XMLHttpRequest，它解决了我的问题

【讨论】：