上传记录在浏览器中使用HTML5音频(Upload audio recorded in browse

我是一个新手到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代码以使所记录的斑点在我的形式自动上传，无需下载该文件，并通过点击TYPE =“file”输入手动浏览到它的用户？

我的Web开发技能是非常有限的，所以我会任何帮助非常感谢。我的第一个猜测是对音频BLOB自动下载到我的选择的文件名，并修改类型=“文件”输入的形式指向那里，但显然这是不可能的（从我在如看到如何设置的值在HTML文件输入？）。

谢谢，

阿德里安

编辑：这里有一个类似的问题： RecorderJS上传记录BLOB通过AJAX 。一个解决我的问题是学习AJAX，并按照这一问题的答案。不过，我很想知道是否有任何方式使用老式的文件输入（或HTML形式更普遍）上传recorderjs音频。

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

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。