How to convert blob to wav file

user_16434231 0
Viewed 1190

I have created a blob object of type .wav using the media recorder. I am trying to send the data as .wav to flask to get processed but I can't seem to change the blob type to a .wav type, or is there a way to save as wav file using the blob in python? I'm new to blob so my question might be stupid.

Here is the code :

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');
      }
    })

}); }

and the flask part :

 @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  })

The get audio sentiment function is a function that accept filetype wav type, so I need to convert that blob to a real wav file. I tried decoding it again sending the data before putting it to blob sending it using formdata but I got no expertise there.

flask ajax javascript
2 Answers
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  })
user_13530110

@Musa answer is right. I discovered this solution as well:

  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("")


    }
   
  }

I used XMLHttpRequest and it solved my issue

user_164342310
Related