使用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的問題時。