Click here to Skip to main content
15,886,873 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
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, 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);
});
};
Posted
Updated 30-Oct-17 3:48am
v2

1 solution

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![^]
 
Share this answer
 
v2
Comments
VenkataSeshu B 24-Jul-17 1:26am    
Thanq Afzaal Ahmad Zeeshan
it is working fine.
but i need more one clarification. i.e, after stopping record it should upload to the server
Afzaal Ahmad Zeeshan 24-Jul-17 4:49am    
Handle that "stopping" event, and upload the blob to server. Please see the article that I provided, it talks about uploading the content to server, content such as files. That one shows — I believe — images.
Karthik_Mahalingam 26-Jul-17 0:55am    
5
Afzaal Ahmad Zeeshan 26-Jul-17 4:53am    
Thank you, Karthik!
Member 13493741 30-Oct-17 9:52am    
Any source code after ajax call . I mean to save that blob as .wav in my server using C# web API

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900