我选择了 recorder.js,因为我想要定制——我只需要可以与我自己的 UI 一起使用的回调。
首先,下面是相关的 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。但是,就我而言,我使用数据模型来接收输入。
语音通道类
public class VoicePassage
{
public string Title { get; set; }
public string FileName { get; set; }
public HttpPostedFileBase Recording { get; set; }
}
如何保存文件的简化版本。这人实在是太贱了。您应该在数据模型上使用标准或自定义 ValidateAttribute 来验证输入。数据模型中的某个地方也应该有一个自定义的 [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 是有意义的。回到客户端,您可以简单地处理结果并采取操作,例如将其附加到列表或显示错误。