使用HTML5/Flash录制并上传音频到服务器

Question

我知道getUserMedia()在一些浏览器中不支持，所以我必须使用基于Flash的音频录制器。对我来说非常重要的是能够通过POST将捕获的音频上传到服务器，即使我可以访问客户端捕获的音频也很棒。那么，您是否知道一个库/插件/扩展程序可以实现这一点？

我还找到了一些脚本，如：
https://github.com/mattdiamond/Recorderjs
https://github.com/jwagener/recorder.js/

但上传不起作用。我不知道该怎么继续。

- spyfx

---

既然您正在使用Flash，为什么不使用Actionscript编写Flash应用程序来上传它呢？ - Patrick Evans

不值得，我需要在客户端完成它，因为我还需要显示进度条。不能开始开发完整的Flash应用程序来完成这个... - spyfx

好的，Flash是客户端的，但是你说你使用了列出的两个库，上传时遇到了什么错误？ - Patrick Evans

我之前的解释有误，是的，Flash 是客户端的，但我更倾向于使用 JavaScript/HTML5。 - spyfx

我仍然遇到未捕获的异常：Actionscript中的错误。使用try/catch块查找错误。这有点奇怪，在家里可以工作，但在大学里就不能工作。 - spyfx

Answer 1

您可以将录制的数据保存为Blob，然后使用FileReader通过POST和AJAX上传数据。类似以下示例：

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

这段代码直接从gitHub项目Recordmp3js中获取，链接在此处： https://github.com/nusofthq/Recordmp3js

它使用HTML5和JS录制音频并将数据以MP3格式保存，然后上传到Web服务器。

但它只在Chrome和Firefox上运行。

- Remus Negrota