我允许用户通过拖放和其他方法将图像加载到页面中.删除图像时,我正在使用URL.createObjectURL转换为对象URL来显示图像.我没有撤销网址,因为我重复使用它.
所以,当谈到时间来创建一个FormData对象,所以我可以让他们上传的形式,在它的形象之一,是有一些方法,然后我可以扭转这一目标URL回一个Blob或File因此我可以将其添加到FormData宾语？
我正在尝试从网站用户录制音频并将音频保存到我的服务器.到目前为止,我研究过的很多帖子都引用了Matt Diamond的录音机.我尝试通过浏览器打开源代码,在http://webaudiodemos.appspot.com/AudioRecorder/index.html上重新创建演示.我复制了html,"audiodisplay.js","recorder.js"和"main.js"并将它们放在我的服务器上.我还在他的GitHub网站上添加了"recorderWorker.js"文件.在recorder.js文件中,我将var WORKER_PATH ='js/recorderjs/recorderWorker.js'更改为var WORKER_PATH ='recorderWorker.js';
当我运行我设置的演示时,我得到"你想分享你的麦克风......"警告,我可以通过按右侧的麦克风图标开始录音.但是,当我停止录制时,音频波形不会像Matt的演示中那样显示在下面,并且保存图标不会被激活.
如果我可以启动并运行该演示,我的下一个问题是将wav文件保存到服务器而不是像演示中那样在本地.我发现有几篇帖子说要使用XMLHttpRequest(),但是我无法弄清楚如何将这些例子连接到recorderjs.将Chrome中记录的WAV文件保存到服务器 HTML5和getUserMedia - 在某些时间 记录器之后记录音频并保存到Web服务器JS通过AJAX上传记录的blob
我是HTML,Javascript和公司的新手,所以请原谅我提出一个可能很明显的问题.
我想建立一个webapp,用户可以上传音频和一些自己的信息.我有一个看起来像这样的表单:
<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"输入指向那里,但显然这是不可能的(从我在例如如何设置值中看到的以HTML格式输入文件？).
谢谢,
阿德里安
编辑:这里有一个类似的问题:RecorderJS通过AJAX上传记录的blob.我的问题的一个解决方案是学习AJAX并按照该问题的答案.不过,我有兴趣知道是否有任何方法可以使用老式文件输入(或更普遍的html格式)上传recorderjs音频.