File Upload MVC

Question

hello,

I am using file upload in my mvc project.

I can upload image, video and other files from Gallery.

But I want to first record the voice and then upload that recording using file upload

so how to enable voice/audio record property of file upload

thank you

Sachin Singh · Answer

// appends an audio element to playback and download recording function createAudioElement(blobUrl) { const downloadEl = document.createElement( 'a' ); downloadEl.style = 'display: block' ; downloadEl.innerHTML = 'download' ; downloadEl.download = 'audio.webm' ; downloadEl.href = blobUrl; const audioEl = document.createElement( 'audio' ); audioEl.controls = true ; const sourceEl = document.createElement( 'source' ); sourceEl.src = blobUrl; sourceEl.type = 'audio/webm' ; audioEl.appendChild(sourceEl); document.body.appendChild(audioEl); document.body.appendChild(downloadEl); } // request permission to access audio stream navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => { // store streaming data chunks in array const chunks = []; // create media recorder instance to initialize recording const recorder = new MediaRecorder(stream); // function to be called when data is received recorder.ondataavailable = e => { // add stream data to chunks chunks.push(e.data); // if recorder is 'inactive' then recording has finished if (recorder.state == 'inactive' ) { // convert stream data chunks to a 'webm' audio format as a blob const blob = new Blob(chunks, { type: 'audio/webm' }); // convert blob to URL so it can be assigned to a audio src attribute createAudioElement(URL.createObjectURL(blob)); } }; // start recording with 1 second time between receiving 'ondataavailable' events recorder.start(1000); // setTimeout to stop recording after 15 minutes setTimeout(() => { // this will trigger one final 'ondataavailable' event and set recorder state to 'inactive' recorder.stop(); }, 150000); }). catch (console.error);

Arnab Mukherjee · Answer

Hi, You can use WebRTC to record Audio/Video file. 1. https://www.c-sharpcorner.com/article/capture-video-from-asp-net-core-3-1-mvc-using-webrtc/ 2. http://www.gotosee.ca/live/RecordRTC/RecordRTC-to-ASPNETMVC/

Guest User · Answer

Thank you, everyone, for your reply I think I am not able to put my view in my question. I am uploading file from MOBILE. when we upload file from mobile, it gives a camera option to capture photo and upload, same like it should give option of voice recorder , so that i can record voice and upload that