使用html5上传在浏览器中记录的音频

Question

我是HTML，Javascript和公司的新手，所以请原谅我提出一个或许明显的问题。

我想建立一个web应用程序，用户可以上传音频和一些关于他们自己的信息。我有一个看起来大多是这样的形式：

<form method="post" action="/add_recording" enctype="multipart/form-data"> 
    <label>Name: </label> 
    <input type="text" name="user_name" maxlength="20" size="20" value="Joe"> 
    <br> 
    <label>Audio File: </label> 
    <input type="file" name="user_audio"/> 
    <br> 
    <input value="Upload" type="submit"> 
</form> 

这工作，但它不是很人性化：人们必须弄清楚如何创建自己的音频文件，即使他们知道怎么的，这很烦人。我想允许用户在浏览器中录制。我发现https://github.com/mattdiamond/Recorderjs和http://webaudiodemos.appspot.com/AudioRecorder/index.html，看起来非常酷（暂时忽略了他们只在最近的铬版上工作的事实，据我所知）。

我的问题是：如何修改recorderjs代码，以便记录的blob自动上载到我的表单中，而用户不必下载文件并通过单击type =“file”输入手动浏览它？

我的网站开发技能非常有限，所以我非常感谢任何帮助。我的第一个猜测是自动将音频blob下载到我选择的文件名，并修改表单中的type =“file”输入以指向那里，但显然这是不可能的（从我在例如How to set a value to a file input in HTML?中看到的内容）。

谢谢

阿德里安

编辑：这里有一个类似的问题：RecorderJS uploading recorded blob via AJAX。我的问题的一个解决方案是学习AJAX并按照该问题的答案。不过，我很想知道是否有任何方法使用旧式文件输入（或更一般的HTML格式）上传recorderjs音频。

Answer 1

以下是我最后做它，如果这有助于其他人：

function uploadForm() { 
    var form = new FormData(document.getElementById("my_form")); 
    form.append("user_audio_blob", audioBlob); 
    var request = new XMLHttpRequest(); 
    var async = true; 
    request.open("POST", "/my_form_handler", async); 
    if (async) { 
     request.onreadystatechange = function() { 
      if(request.readyState == 4 && request.status == 200) { 
       var response = null; 
       try { 
        response = JSON.parse(request.responseText); 
       } catch (e) { 
        response = request.responseText; 
       } 
       uploadFormCallback(response); 
      } 
     } 
    } 
    request.send(form); 
} 

这和少许修改的recorderjs代码设置audioBlob。当我最初发布我不知道FormData和form.append的问题时。