click choose file to record audio evidence...
Recording Audio from the User to folder My Records
Once you have access to the file you can do anything you want with it. For example, you can:
convert it to acetest.wav
to attach it directly to an audio element so that you can play it Download it to the user's device Upload it to a server by attaching to an XMLHttpRequest Pass it through the Web Audio API and apply filters on to it
Whilst using the input element method of getting access to audio data is ubiquitous, it is the least appealing option. We really want to get access to the microphone and provide a nice voice evidence directly in the page.
Access the microphone interactively
Modern browsers can have a direct line to the microphone allowing us to build experiences that are fully integrated with the web page and the user will never leave the browser.
Acquire access to the microphone
We can directly access the Microphone by using an API in the WebRTC specification calledgetUserMedia().getUserMedia() will prompt the user for access to their connected microphones and cameras.
By itself, this isn't that useful. All we can do is take the audio data and play it back.
Access the raw data from the microphone
To access the raw data from the microphone we have to take the stream created bygetUserMedia() and then use the Web Audio API to process the data. The Web Audio API is a simple API that takes input sources and connects those sources to nodes which can process the audio data (adjust Gain etc) and ultimately to a speaker so that the user can hear it.
One of the nodes that you can connect is aScriptProcessorNode. This node will emit anonaudioprocess event every time the audio buffer is filled and you need to process it. At this point you could save the data into your own buffer and save it for later use.
The data that is held in the folder > My Records as the raw data from the microphone and you have a number of options with what you can do with the data:
Upload it straight to the server, Store it locally, Convert to a dedicated file format, such as WAV, and then save it to your servers or locally
Save the data from the microphone
The easiest way to save the data from the microphone is to use this Media Recorder API.
The Media Recorder API will take the stream created by getUserMedia and then progressively save the data that is on the stream in to you preferred destination.