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

Posted 2023-02-25

【中文标题】使用html5上传在浏览器中录制的音频

【英文标题】：Upload audio recorded in browser using html5

【发布时间】：2013-04-03 18:55:11

【问题描述】：

我是 html、javascript 和公司的新手，所以请原谅我提出了一个可能很明显的问题。

我想构建一个网络应用程序，用户可以在其中上传音频以及一些关于他们自己的信息。我有一个看起来像这样的表格：

<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，它们看起来很酷（暂时忽略它们仅适用于最新版本的 chrome 的事实，据我所知）。

我的问题是：如何修改 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 音频。

【参考方案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。

【讨论】：

在recorderjs代码中需要修改什么来设置audioBlob