在浏览器中录制音频并使用ASP.NET MVC上传 [英] Recording audio in the browser and uploading it with ASP.NET MVC
问题描述
大家好
i想要录制音频文件，需要使用MVC5上传
请给我灵魂关系...
我尝试过：
Hi all
i want to record audio file and need to upload by using MVC5
please give me soultions regarding this..
What I have tried:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Live input record and playback</title>
<style type='text/css'>
ul {
list-style: none;
}
#recordingslist audio {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
@*<h1>Recorder.js simple WAV export example</h1>
<p>Make sure you are using a recent version of Google Chrome.</p>
<p>Also before you enable microphone input either plug in headphones or turn the volume down if you want to avoid ear splitting feedback!</p>*@
<button onclick="startRecording(this);">record</button>
<button onclick="stopRecording(this);" disabled>stop</button>
<h2>Recordings</h2>
<ul id="recordingslist"></ul>
<h2>Log</h2>
<pre id="log">
function __log（e，数据）{
log.innerHTML + =\ n+ e ++（数据||''）;
}
var audio_context;
var recorder;
function startUserMedia（stream）{
var input = audio_context.createMediaStreamSource（stream）;
__log（'媒体流已创建。'）;
//如果您希望音频直接反馈，请取消注释
//input.connect(audio_context .destination）;
// __ log（'输入连接到音频上下文目的地。'）;
recorder = new Recorder（输入） ;
__log（'记录器已初始化。'）;
}
函数startRecording（按钮）{
记录器&安培;&安培; recorder.record（）;
button.disabled = true;
button.nextElementSibling.disabled = false;
__log（'记录.. 。'）;
}
函数stopRecording（按钮）{
录音机&& recorder.stop（）;
button.disabled = true;
button.previousElementSibling.disabled = false;
__log（'停止录制。 '）;
//使用音频数据blob创建WAV下载链接
createDownloadLink（）;
recorder.clear（）;
}
函数createDownloadLink（）{
recorder&& recorder.exportWAV（function（blob）{
var url = URL.createObjectURL（blob）;
var li = document.createElement（'li'）;
var au = document.createElement（'audio'）;
var hf = document.createElement（'a'）;
au.controls = true;
au.src = url;
hf.href = url;
hf.download = new Date（）。toISOString（）+'。wav';
hf.innerHTML = hf.download;
li.appendChild（au）;
li.appendChild（hf）;
recordingslist.appendChild（li）;
}）;
}
window.onload = function init（）{
try {
// webkit shim
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
window.URL = window.URL || window.webkitURL;
audio_context = new AudioContext;
__log（'Audio context set up。'）;
__log（'navigator.getUserMedia'+（navigator.getUserMedia？'available。'：'not present！'））;
} catch（e）{
alert（'此浏览器中没有网络音频支持！'）;
}
navigator.getUserMedia（{audio：true}，startUserMedia ，功能（e）{
__log（'没有现场音频输入：'+ e）;
}）;
};
function __log(e, data) {
log.innerHTML += "\n" + e + " " + (data || '');
}
var audio_context;
var recorder;
function startUserMedia(stream) {
var input = audio_context.createMediaStreamSource(stream);
__log('Media stream created.');
// Uncomment if you want the audio to feedback directly
//input.connect(audio_context.destination);
//__log('Input connected to audio context destination.');
recorder = new Recorder(input);
__log('Recorder initialised.');
}
function startRecording(button) {
recorder && recorder.record();
button.disabled = true;
button.nextElementSibling.disabled = false;
__log('Recording...');
}
function stopRecording(button) {
recorder && recorder.stop();
button.disabled = true;
button.previousElementSibling.disabled = false;
__log('Stopped recording.');
// create WAV download link using audio data blob
createDownloadLink();
recorder.clear();
}
function createDownloadLink() {
recorder && recorder.exportWAV(function(blob) {
var url = URL.createObjectURL(blob);
var li = document.createElement('li');
var au = document.createElement('audio');
var hf = document.createElement('a');
au.controls = true;
au.src = url;
hf.href = url;
hf.download = new Date().toISOString() + '.wav';
hf.innerHTML = hf.download;
li.appendChild(au);
li.appendChild(hf);
recordingslist.appendChild(li);
});
}
window.onload = function init() {
try {
// webkit shim
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
window.URL = window.URL || window.webkitURL;
audio_context = new AudioContext;
__log('Audio context set up.');
__log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
} catch (e) {
alert('No web audio support in this browser!');
}
navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
__log('No live audio input: ' + e);
});
};
推荐答案
那么？什么不起作用，似乎你已经提供了一个示例代码，尝试一下。
此外，您使用的是自定义第三方库，请阅读他们的文档以获取更多信息。此程序包的GitHub存储库包含了解此库如何工作所需的所有信息。另外，这是开源的，因此您也可以阅读内容。他还在GitHub上提供了一个示例： Recorderjs / example_simple_exportwav.html at master·mattdiamond / Recorderjs·GitHub [ ^ ] < br $>
GitHub - mattdiamond / Recorderjs：用于录制/导出Web Audio输出的插件API节点 [ ^ ]
另外，如果你想阅读如何通过JavaScript异步上传文件到服务器，请阅读我的文章，上传文件 - HTML5和jQuery方式！ [ ^ ]
So? What is not working, seems like you were already provided a sample code, try it.
Also, you are using a custom third-party library, read their documentation for more on this. The GitHub repository for this package contains all the information one might require to understand how this library works. Plus, this is open sourced so that you can read the content as well. He also provided a sample on GitHub: Recorderjs/example_simple_exportwav.html at master · mattdiamond/Recorderjs · GitHub[^]
GitHub - mattdiamond/Recorderjs: A plugin for recording/exporting the output of Web Audio API nodes[^]
Also, if you want to read how to upload the files to server, asynchronously through JavaScript, read this article of mine for that, Uploading the Files – HTML5 and jQuery Way![^]
这篇关于在浏览器中录制音频并使用ASP.NET MVC上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
