使用带有 HTML5 的用户麦克风录制音频 [英] Record Audio Using the Users Microphone with HTML5

问题描述

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

I am very close to having a little project of mine done, however, I have run into a slight problem I cannot seem to figure out on my own. What I ultimately want to do is record a user's voice from the users microphone, and then upload the recording to my server when they are done. I am using the code from this project: https://github.com/cwilso/AudioRecorder

效果很好，但我需要添加一个开箱即用的功能.录制完成后，我需要能够将文件上传到我的服务器.使用默认代码，文件可以本地下载到我的电脑，但不能上传.所以我做了一些研究，我遇到了另一个具有上传功能的类似项目.但是，在我看来，项目的其余部分有更多问题.所以我尝试从以下项目中添加上传代码":https://github.com/nusofthq/Recordmp3js

It works great, but I am needing to add a feature that it does not include out of the box. I need to be able to upload the file to my server after the recording has finished. With the default code, the file can be downloaded locally to my computer, but not uploaded. So I did some research and I came across another similar project that has the uploading feature. However, the rest of the project is more buggy in my opinion. So I tried adding the "uploading code" from the following project: 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 += "
" + 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 代码中更改什么以及我需要将它放在哪里?非常感谢任何帮助！

I have tried combining this code to the project located at https://github.com/cwilso/AudioRecorder, but to no avail. What do I need to change in the Javascript code above and where do I need to place it? Any help is greatly appreciated!

PS:我知道这只适用于 Chrome、FireFox 和 Opera.

PS: I know this only works in Chrome, FireFox, and Opera.

推荐答案

我最近实施了一项类似的任务，您正试图使用​​类似的资源来实现.您还没有表示您需要将音频上传为 mp3，所以我将只向您展示如何使用 recorderjs 上传 wav，使用此处找到的源:https://github.com/cwilso/AudioRecorder

I have recently implemented a similar task you are trying to achieve using similar resources. You havent indicated that you need the audio uploaded as an mp3, so I am going to just show you how to upload a wav using recorderjs, using the source found here: https://github.com/cwilso/AudioRecorder

首先要注意的是，recorderjs 将未压缩的 wav 存储在一个名为 blob 的 var 中.这发生在记录器js的第101行，更具体地说是在这个函数中:

First things to note, recorderjs stores the uncompressed wav in a var called blob. This happens on line 101 of recorder js, more specifically in this function:

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

问题是 blob 是在该函数中本地声明的.我们需要再次使用它，所以为了这个例子，让我们让它真的很容易到达并使它成为全球性的.所以在记录器 js 之外声明一个变量 blob，如下所示:

The problem is that blob is locally declared in that function. We need to use it again, so for the sake of this example lets make it really easy to reach and make it global. So declare a variable blob outside of recorder js like so:

var blob = null;

然后在recorderjs中修改上面的函数，将数据存储在全局声明的'blob'变量中，函数应该是这样的:

Then modify the above function in recorderjs to store the data inside the globally declared 'blob' variable, the function should look like so:

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

现在我们可以使用'blob'.现在在某处声明以下函数，

Now we can use 'blob'. Now declare the following function somewhere,

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 += "
" + data;
        });
}

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

Your server side code should use this:

<?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 调用和表单数据为您完成的.

Note: $_FILES["file"]["tmp_name"] is what it sounds like. A temporary location of the file. This is done for you with the ajax call and form data.

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

Good luck, let me know if you run into problems.

这篇关于使用带有 HTML5 的用户麦克风录制音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！