用HTML5用用户话筒录制音频

Question

我几乎要完成我的一个小项目了，然而，我遇到了一个小问题，我似乎无法自己弄清楚。我最终想要做的是从用户麦克风中记录用户的声音，然后将录音上传到我的服务器。我正在使用这个项目的代码：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。

Answer 1

我最近实现了一个类似的任务，您正在尝试使用类似的资源来完成。您没有表示需要将音频上传为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“就是它听起来的样子。文件的临时位置。这是通过ajax调用和表单数据完成的。

祝你好运，如果你遇到麻烦就告诉我。

Answer 2

就我所能看到的AudioRecorder出口来说，它是一个很好的产品。Blobs是一种你可以很容易地用XMLHttpRequest上传的东西(而XMLHttpRequest上传是你可以很容易理解的)。简而言之，您不需要FileReader (甚至可能跳过FormData，因为您只上传一个简单的Blob)。

请记住，人们倾向于不回答那些表明不通过高级操作进行更好的事先分析的问题；在这种情况下，您至少应该解释一下，您必须上载哪种更高级的数据；以及( b)在您现有的实现中，什么是不起作用的。在这里，您实际上是要求人们跨两个库(我们中的大多数人从未使用过这两个库，更别提这两个库)。基本事实是，我可能会错的，但你实际上比我更清楚，只是没有通知。(不过，别误会我的意思，我希望我是对的，你很快就能让你的代码正常工作了。)