Javascript 使用HTML5的用户麦克风录制音频

我很快就要完成我的一个小项目了，但是，我遇到了一个我自己无法解决的小问题。我最终想要做的是从用户麦克风录制用户的声音，然后在录制完成后将其上传到我的服务器。我正在使用此项目中的代码：

它工作得很好，但我需要添加一个功能，它不包括开箱即用。我需要能够上传文件到我的服务器后，录制完成。使用默认代码，文件可以本地下载到我的计算机，但不能上载。所以我做了一些研究，发现另一个类似的项目有上传功能。然而，在我看来，项目的其余部分更容易出错。因此，我尝试添加以下项目中的“上传代码”：

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

PHP代码：

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

我曾尝试将此代码与位于的项目相结合，但没有效果。我需要在上面的Javascript代码中更改什么？我需要将其放置在哪里？非常感谢您的帮助

---

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

据我所知，录音机导出为Blob。BLOB可以通过XMLHttpRequest轻松上传（XMLHttpRequest上传可以通过Google轻松找到）。简而言之，您不需要

FileReader

（甚至可以跳过

FormData

，因为您只上传一个Blob）

---

请记住，人们往往不会回答事先未经OP分析的问题；在这种情况下，您应该至少说明a）您必须上载什么样的数据，以及b）在您现有的实现中哪些数据不起作用。在这里，您实际上是在要求人们跨越两个库（我们大多数人从未使用过其中一个库，更不用说两个库了）。事实上，我对斑点的看法可能是错误的，但实际上你比我更清楚这一点，只是没有告知而已。（不过，别误会我的意思；我希望我是对的，您的代码很快就会运行起来。）

我最近实现了一个类似的任务，您正试图使用类似的资源来实现它。您还没有表示需要将音频作为mp3上传，因此我将向您展示如何使用recorderjs上传wav，使用以下来源：

首先要注意的是，recorderjs将未压缩的wav存储在一个名为blob的变量中。这发生在recorder js的第101行，更具体地说是在该函数中：

worker.onmessage = function(e){
  var blob = e.data;
  currCallback(blob);
}

问题是blob是在该函数中本地声明的。我们需要再次使用它，因此为了这个例子，让我们让它真正易于实现，并使其全球化。因此，在recorder 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"]);
?>

注意：$\u FILES[“file”][“tmp\u name”]就是它听起来的样子。文件的临时位置。这是通过ajax调用和表单数据完成的

---

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

谢谢你的回答和意见。我真正需要知道的是，我应该在哪里（什么文件）添加XMLHttpRequest以在AudioRecorder项目中上载blob？我猜根本没有文件（blob不是文件）。由于我从未使用过录音机，我只能告诉您，我在源代码中看到了

exportWAV

方法（这似乎是在导出Blob，但您应该在相信我的话之前尝试一下）。如果是这样的话，这个Blob正是您想要传递到XHR以上传的内容。您提到的

exportWAV

方法，我在几个录音机文件中看到了它。当您谈到

exportWAV

方法时，您指的是哪个文件？在我知道这一点之后，我将尝试XMLHttpRequest。再次感谢！你知道我不知道地球上的每一个API，对吧？您所问的不再是JavaScript，而是您正在使用的特定库。我假设你已经知道如何从录音机中导出，否则你怎么能确定你的原始代码一开始就不起作用呢？