Voice Recorder, Saving Blob file to server - C# , Mvc

Question

I need a voice recorder in a project which I am working on and also the recorded voices must be listened later. That Project developed by c# and asp.net mvc.

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

I am using a recorder system in that link above. When you click Download it gives you a file .wav format. It is downloaded to your computer but I want to save it to server.

This project’s source codes is available below the link.

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

I investigate jquery codes: When you click Download

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

It is working in this function. Url parametre in function respond you that link as

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

When you go that adres in player wav file is working but src in player stil has this code below

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

Question:

How I can save sound file to server. I can not reach any solution from the questions in this web site and generally in internet :)

1 – Which parametre I have to send to controller with Jquery Ajax?

2 – How to convert that parametre to wav or mp3 format in controller side?

Thank yo so much from now :)

Answer 1

I went with recorder.js because I wanted the customization — I only needed callbacks I can use with my own UI.

To start with the post, here is the relevant JavaScript code:

Recorder.js upload function

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

On the server side, it’s pretty simple. You take a normal controller action with an HttpPostedFileBase parameter to go with the file input. Another way is to use Request.Files. However, in my case, I used a data model to receive the input.

VoicePassage class

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

The dumbed-down version of how to save the file. This one is really dumbed down. You should be validating input using standard or custom ValidateAttribute/s on your data models. There should be a custom [MimeType("audio/wav")] attribute in the data model somewhere, too.

Dumbed-down version of how to save the file

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

The Recorder.upload() function issues an AJAX request to the server, so it makes sense to return a JsonResult rather than an ActionResult. Back on the client-side, you can simply process the result and take action, like append it to a list or display an error.