使用带有 HTML5 的用户麦克风录制音频答案

【问题标题】：Record Audio Using the Users Microphone with HTML5使用带有 HTML5 的用户麦克风录制音频
【发布时间】：2014-09-25 21:14:57
【问题描述】：

我非常接近完成我的一个小项目，但是，我遇到了一个我自己似乎无法解决的小问题。我最终想要做的是从用户的麦克风录制用户的声音，然后在他们完成后将录音上传到我的服务器。我正在使用这个项目的代码：https://github.com/cwilso/AudioRecorder

效果很好，但我需要添加一个开箱即用不包含的功能。录制完成后，我需要能够将文件上传到我的服务器。使用默认代码，文件可以本地下载到我的电脑，但不能上传。所以我做了一些研究，发现了另一个具有上传功能的类似项目。但是，在我看来，该项目的其余部分更加错误。所以我尝试从以下项目中添加“上传代码”：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 代码：

<?php
if(!is_dir("recordings")){
    $res = mkdir("recordings",0777); 
}

// pull the raw binary data from the POST array
$data = substr($_POST['data'], strpos($_POST['data'], ",") + 1);
$filename = urldecode($_POST['fname']);

// write the data out to the file
$fp = fopen('recordings/'.$filename, 'wb');
fwrite($fp, $decodedData);
fclose($fp);
?>

我尝试将此代码与位于https://github.com/cwilso/AudioRecorder 的项目结合起来，但无济于事。我需要在上面的 Javascript 代码中更改什么以及我需要将它放在哪里？非常感谢任何帮助！

PS：我知道这只适用于 Chrome、FireFox 和 Opera。

【问题讨论】：

标签： javascript jquery html html5-audio audio-recording

【解决方案1】：

据我所知，AudioRecorder 导出为 Blob。 Blob 是您可以使用 XMLHttpRequest 轻松上传的东西（而 XMLHttpRequest 上传是您可以通过 Google 轻松找出的东西）。简而言之，您不需要 FileReader（甚至可以跳过 FormData，因为您只上传一个 Blob）。

请记住，人们往往不会回答表明 OP 没有事先分析的问题；在这种情况下，您至少应该说明 a) 您必须上传什么样的数据，以及 b) 在您现有的实施中究竟有什么不适用。在这里，您实际上是在要求人们跨两个库（我们大多数人从未使用过任何一个，更不用说两者都使用了）。事实上，我对 Blob 的看法可能是错误的，但你实际上比我更清楚这一点，只是没有告知。（不过，不要误会我的意思；我希望我是对的，而且你很快就会让你的代码工作。）

【讨论】：

感谢您的回答和意见。那么我真正需要知道的是，我将在哪里（什么文件）添加 XMLHttpRequest 以在 AudioRecorder 项目中上传 blob？
我的猜测是根本没有文件（Blob 不是文件）。由于我从未使用过 AudioRecorder，我只能告诉你我在源代码中看到了 exportWAV 方法（它似乎正在导出 Blob，但你应该在相信我的话之前尝试一下）。如果是这样，那么该 Blob 正是您想要传递到 XHR 以上传的内容。
您提到的exportWAV 方法，我在几个AudioRecorder 文件中看到了它。当您谈到exportWAV 方法时，您指的是哪个文件？在我知道这一点之后，我将给 XMLHttpRequest 一个机会。再次感谢！
你知道我不知道这个星球上的每一个 API，对吧？您要问的不再是 JavaScript，而是您正在使用的特定库。我假设你已经知道如何从 AudioRecorder 导出，否则你怎么能确定你的原始代码一开始就不起作用？

【解决方案2】：

我最近执行了一项您尝试使用类似资源来完成的类似任务。您还没有表明您需要将音频上传为 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;
        });
}

你的服务器端代码应该使用这个：

<?php
if(!is_dir("recordings")){
    $res = mkdir("recordings",0777); 
}
move_uploaded_file($_FILES["file"]["tmp_name"],
  $res . $_FILES["file"]["fname"]);
?>

注意：$_FILES["file"]["tmp_name"] 就是它听起来的样子。文件的临时位置。这是通过 ajax 调用和表单数据为您完成的。

祝你好运，如果遇到问题，请告诉我。

【讨论】：