使用带有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"] ["tmp_name"]听起来像.文件的临时位置.这是通过ajax调用和表单数据为您完成的.

祝你好运,如果你遇到问题,请告诉我.