使用带有HTML5的用户麦克风录制音频
我非常接近完成了我的一个小项目，但是，我遇到了一个我似乎无法自己解决的小问题。 我最终想要做的是从用户麦克风录制用户的语音，然后在完成后将录音上传到我的服务器。 我正在使用此项目的代码： https ： //github.com/cwilso/AudioRecorder
它工作得很好，但我需要添加一个不包含开箱即用的function。 记录完成后，我需要能够将文件上传到我的服务器。 使用默认代码，该文件可以本地下载到我的计算机，但不能上载。 所以我做了一些研究，我遇到了另一个具有上传function的类似项目。 然而，在我看来，项目的其余部分更加错误。 所以我尝试添加以下项目中的“上传代码”： https ： //github.com/nusofthq/Recordmp3js
Javascript代码：
function uploadAudio(mp3Data){ var reader = new FileReader(); reader.onload = function(event){ var fd = new FormData(); var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3'); console.log("mp3name = " + mp3Name); fd.append('fname', mp3Name); fd.append('data', event.target.result); $.ajax({ type: 'POST', url: 'upload.php', data: fd, processData: false, contentType: false }).done(function(data) { //console.log(data); log.innerHTML += "\n" + data; }); }; reader.readAsDataURL(mp3Data); } PHP代码：
我已经尝试将此代码组合到位于https://github.com/cwilso/AudioRecorder的项目，但无济于事。 我需要在上面的Javascript代码中进行哪些更改以及在何处需要进行更改？ 任何帮助是极大的赞赏！
PS：我知道这只适用于Chrome，FireFox和Opera。
我最近实现了一个类似的任务，你试图使用类似的资源实现。 您还没有表明您需要将音频上传为mp3，因此我将向您展示如何使用recorderjs上传wav，使用此处的源代码： https ： //github.com/cwilso/AudioRecorder
首先要注意的是，recorderjs将未压缩的wav存储在名为blob的var中。 这发生在记录器js的101行，更具体地说是在这个函数中：
worker.onmessage = function(e){ var blob = e.data; currCallback(blob); }
问题是blob是在该函数中本地声明的。 我们需要再次使用它，所以为了这个例子，让它很容易实现并使其全局化。 因此，在记录器js之外声明一个变量blob，如下所示：
var blob = null;
然后在recorderjs中修改上面的函数，将数据存储在全局声明的’blob’变量中，该函数应如下所示：
worker.onmessage = function(e){ blob = e.data; currCallback(blob); }
现在我们可以使用’blob’。 现在在某处声明以下函数，
function uploadAudio(){ var fd = new FormData(); var wavName = encodeURIComponent('audio_recording_' + new Date().getTime() + '.wav'); console.log("wavName = " + wavName); fd.append('fname', wavName); fd.append('data', blob); $.ajax({ type: 'POST', url: 'upload.php', data: fd, processData: false, contentType: false }).done(function(data) { //console.log(data); log.innerHTML += "\n" + data; }); }
您的服务器端代码应使用此：
注意：$ _FILES [“file”] [“tmp_name”]听起来像。 文件的临时位置。 这是通过ajax调用和表单数据完成的。
祝你好运，如果你遇到问题，请告诉我。
据我所知，AudioRecorder导出为Blob。 Blob是您可以使用XMLHttpRequest轻松上传的内容（XMLHttpRequest上传是您可以通过Google轻松找到的内容）。 简而言之，您不需要FileReader （甚至可能会跳过FormData ，因为您只上传了一个Blob）。
请记住，人们倾向于不回答表明OP没有事先分析的问题; 在这种情况下，您应该至少解释过a）您必须上传哪种数据，以及b）在您现有的实施中究竟什么不起作用。 在这里，你有效地要求人们跨越两个图书馆（我们大多数人从未使用过任何一个图书馆，更不用说两者了）。 事实是我对Blob可能是错的，但你实际上知道这比我更好而且没有通知。 （不要误解我的意思;我希望我是对的，你很快就会得到你的代码。）