使用html5上传在浏览器中录制的音频 [英] Upload audio recorded in browser using html5

问题描述

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

我想创建一个web应用程序用户可以上传音频以及有关自己的一些信息。

 < form method =postaction =/ add_recordingenctype = 多部分/格式数据> 
< label>名称：< / label> 
< input type =textname =user_namemaxlength =20size =20value =Joe> 
< br> 
< label>音频文件：< / label> 
< input type =filename =user_audio/> 
< br> 
< input value =上传type =submit> 
< / form> 
  

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

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

我的web开发技能非常有限，所以我会非常感谢任何帮助。我的第一个猜测是自动将音频blob下载到我选择的文件名，并修改表单中的type =file输入以指向那里，但显然这是不可能的（从我看到的例如如何设置一个值到HTML中的文件输入？ b
$ b

阿德里安

编辑：这里有一个类似的问题： RecorderJS通过AJAX上传记录的blob 。我的问题的一个解决方案是学习AJAX并按照该问题的答案。不过，我仍然有兴趣知道是否有任何方法可以使用旧式文件输入（或更通用的html格式）上传recorderjs音频。

解决方案

这是我最终做到的，以防别人帮助其他人：
$ b $

  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; 
尝试{
 response = JSON.parse（request.responseText）; 
} catch（e）{
 response = request.responseText; 
} 
 uploadFormCallback（response）; 
} 
} 
} 
 request.send（form）; 
} 
  

以及对recorderjs代码稍作修改以设置audioBlob。当我最初发布的问题我不知道FormData和form.append。

I'm a newbie to HTML, Javascript and company, so please forgive me for asking a perhaps obvious question.

I'd like to build a webapp where users can upload audio plus some information about themselves. I have a form that looks mostly like this:

<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>

This works, but it's not very user-friendly: people have to figure out how to create their own audio files, and even if they know how, it's annoying. I'd like to allow users to record in-browser. I found https://github.com/mattdiamond/Recorderjs and http://webaudiodemos.appspot.com/AudioRecorder/index.html, which look very cool (ignoring for the moment the fact that they only work on very recent builds of chrome, as far as I can tell).

My question is: how can I modify the recorderjs code so that the recorded blob is automatically uploaded in my form, without the user having to download the file and manually browse to it by clicking on the type="file" input?

My web development skills are extremely limited, so I'd be very thankful for any help. My first guess was to automatically download the audio blob to a filename of my choosing, and modify the type="file" input in the form to point there, but apparently this is impossible (from what I see in e.g. How to set a value to a file input in HTML?).

Thank you,

Adrian

Edit: There's a similar question here: RecorderJS uploading recorded blob via AJAX. One solution to my problem would be to learn AJAX and follow the answer in that question. Still, I'd be interested to know whether there's any way to upload the recorderjs audio using an old-fashioned file input (or an html form more generally).

解决方案

Here's how I ended up doing it, in case this helps anyone else:

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

That and a slight modification to the recorderjs code to set audioBlob. When I originally posted the question I did not know about FormData and form.append.

这篇关于使用html5上传在浏览器中录制的音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！