File Upload MVC

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

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

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Guest User5y ago
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
+1
Sachin Singh5y ago
1. // appends an audio element to playback and download recording
2. function createAudioElement(blobUrl) {
3. const downloadEl = document.createElement('a');
4. downloadEl.style = 'display: block';
5. downloadEl.innerHTML = 'download';
6. downloadEl.download = 'audio.webm';
7. downloadEl.href = blobUrl;
8. const audioEl = document.createElement('audio');
9. audioEl.controls = true;
10. const sourceEl = document.createElement('source');
11. sourceEl.src = blobUrl;
12. sourceEl.type = 'audio/webm';
13. audioEl.appendChild(sourceEl);
14. document.body.appendChild(audioEl);
15. document.body.appendChild(downloadEl);
16. }
18. // request permission to access audio stream
19. navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
20. // store streaming data chunks in array
21. const chunks = [];
22. // create media recorder instance to initialize recording
23. const recorder = new MediaRecorder(stream);
24. // function to be called when data is received
25. recorder.ondataavailable = e => {
26. // add stream data to chunks
27. chunks.push(e.data);
28. // if recorder is 'inactive' then recording has finished
29. if (recorder.state == 'inactive') {
30. // convert stream data chunks to a 'webm' audio format as a blob
31. const blob = new Blob(chunks, { type: 'audio/webm' });
32. // convert blob to URL so it can be assigned to a audio src attribute
33. createAudioElement(URL.createObjectURL(blob));
34. }
35. };
36. // start recording with 1 second time between receiving 'ondataavailable' events
37. recorder.start(1000);
38. // setTimeout to stop recording after 15 minutes
39. setTimeout(() => {
40. // this will trigger one final 'ondataavailable' event and set recorder state to 'inactive'
41. recorder.stop();
42. }, 150000);
43. }).catch(console.error);
+2