语音记录器，将Blob文件保存到服务器 - C#，Mvc

Question

我正在开发一个项目，需要一个录音器，并且录制的声音必须可以在以后听取。该项目由C＃和ASP.NET MVC开发。

http://demos.subinsb.com/jquery/voice/

我在上面链接中使用了一个录音系统。当您单击“下载”时，它会给您一个.wav格式的文件。它被下载到您的计算机，但我想把它保存到服务器上。

该项目的源代码可在链接下方找到。

http://demos.subinsb.com/down.php?id=s/rvx90xq1xtpak3xc647n&class=31

我调查了jquery代码： 当你点击下载按钮

 $(document).on("click", "#download:not(.disabled)", function () {
            $.voice.export(function (url) {
                $("<a href='" + url + "'download='MyRecording.wav'></a>")[0].click();
            }, "URL");
            restore(); });

这个函数正在工作。函数中的URL参数将会回应您该链接。

blob:http%3A//localhost%3A1875/146432b2-8b1b-4eef-8d77-1fdbc8fc74c9

当您访问该地址时，播放器中的WAV文件可以正常工作，但播放器中的SRC仍具有以下代码。

blob:http%3A//localhost%3A1875/146432b2-8b1b-4eef-8d77-1fdbc8fc74c9

问题：

我该如何将声音文件保存到服务器上。我在这个网站和互联网上没有找到任何解决方案:)

1 - 我需要使用Jquery Ajax向控制器发送哪些参数？

2 - 如何在控制器端将该参数转换为wav或mp3格式？

非常感谢您的帮助 :)

- Ramazan Görgün

Answer 1

我选择使用Recorder.js进行翻译，因为我想要自定义功能——只需要回调来配合我的用户界面。

首先，这是相关的JavaScript代码：

Recorder.js上传函数

doUpload: function(title, filename) {
    Recorder.upload({
        method: "POST",
        url: "@Url.Action("Upload", "Recordings")",
        audioParam: "Recording", // Name for the audio data parameter
        params: {
            // Additional parameters need to be an object
            "Title": title,
            "FileName": filename
        },
        success: function(response) {
            console.log(response);
        }
    });
}

在服务器端，处理起来相当简单。你可以使用一个带有HttpPostedFileBase参数的普通控制器操作来处理文件输入。另一种方法是使用Request.Files。但在我的情况下，我使用了一个数据模型来接收输入。

VoicePassage类

public class VoicePassage
{
    public string Title { get; set; }
    public string FileName { get; set; }
    public HttpPostedFileBase Recording { get; set; }
}

保存文件的简化版说明。这个版本真的很简化。您应该使用数据模型上的标准或自定义ValidateAttribute/s验证输入。数据模型中还应该有一个自定义[MimeType("audio/wav")]属性。

public JsonResult Upload(VoicePassage passage)
{
    // Validate the input
    // ...
    // ...

    // Save the file
    string path = Server.MapPath(string.Format("~/Recordings/{0}.wav", passage.FileName));
    passage.Recording.SaveAs(path);

    return Json(new { Success: true });
}

Recorder.upload()函数向服务器发出AJAX请求，因此返回JsonResult而不是ActionResult是有意义的。在客户端，您可以简单地处理结果并采取行动，例如将其附加到列表中或显示错误。

- Bhavik Soni