Question

我试图让我的用户记录音频文件并将其发布到我的服务器。我使用Recorder.js作为录制部分，我可以将用户（webrtc）录制的元素填充为javascript库生成的blob。我可以录制和下载录音，就像这个演示一样：http://webaudiodemos.appspot.com/AudioRecorder/index.html

问题是，如何将此录音包含在jQuery ajax帖子中，而不是下载文件？目标是将记录与a上的一些数据一起发布，接收服务器将数据保存到数据库中，并将记录文件保存到其磁盘上。

audioRecorder && audioRecorder.exportWAV(function (blob) {
        //Here we get the blob object url, which can be set as audio element source
        var url = URL.createObjectURL(blob);
        //Here we download the recording file
        audioRecorder.forceDownload(blob, 'output.wav');

        //I can set the audio element for pre-listening before user POSTs the form
        var au = $('#myaudioelement').attr("src",url);
    });

因此，当用户发送ajax POST时，我需要添加＆＃39; myaudioelement＆＃39;到$ .ajax调用中的数据字段，以及类似值，我该如何实现？

Answer 1

使用jQuery的内置data功能。

$.ajax({
    type: "POST",
    url: "/audio/save.php",
    data: audioRecorder.forceDownload(blob, 'output.wav')
});

或直接使用POST：

$.post("/audio/save.php", {
    audio: audioRecorder.forceDownload(blob, 'output.wav')
});

请注意：鉴于音频文件是二进制数据，您可能希望在发送之前对其进行base64编码，以便它能够更容易处理。

Answer 2

感谢您的建议，它确实帮助我走上正轨，但这就是我最终按照我需要的方式运作的方式：

var recordingblob = null;

audioRecorder && audioRecorder.exportWAV(function (blob) {
    recordingblob = blob;
});

$("#myform").submit(function () {
    event.preventDefault();

    var formData = new FormData($(this)[0]);

    if (recordingblob) {
        var recording = new Blob([recordingblob], { type: "audio/wav" });
        formData.append("recording", recording);
    }
    $.ajax({
        url: myurl,
        type: 'POST',
        data: formData,
        //etc
    });
}

必须有其他方法来处理这个问题，但有了这个，我在服务器端以最小的努力获得了存储在我服务器上的wav文件，并且没有添加js库。

将HTML5音频元素内容发送到ajax POST

2 个答案: