HOW TO USE JAVASCRIPT TO RECORD AND PLAY AUDIO IN THE BROWSER.
Accessing the microphone in your device and then storing the recorded audio through the web browser could be very tasking. This article is written to simplify the process and to properly explain certain concepts.
THE STEPS YOU SHOULD KNOW:
1. ACCESSING THE STREAM.
2. CAPTURING THE STREAM.
3. PROCESSING THE STREAM.
4. PLAYING THE STREAM.
ACCESSING THE STREAM.
The browser contains the necessary toolset to easily record and play audio, there is no need for a third-party library. The browser has several APIs that have different functionalities. Here is a the link to see the several API that the web browser has https://developer.mozilla.org/en-US/docs/Web/API. To access the microphone we make use of the window.navigator,the window navigator contains several details about the browser.
The windows.navigator contains several methods,and one of those methods we can use to access the microphone is the getUserMedia().
The getUserMedia method is responsible for the permission grant and it is a promise which resolves into a stream. The stream either video or audio stream would now be accessible for you to capture and process.
Side-note: Computers can not process continuous analog signals, hence it has to convert them to a digital signal into an array of 1’s and 0’s, those 1’s and 0’s are called array buffers. Hence this stream is a sequence of array buffers.
The getUserMedia method has an optional parameter that requires an object to be passed,this parameter is just to tell it whether the audio or video device would be accessed or both.The values are Boolean.
Capturing the stream.
Just like how the getUserMedia it main purpose is to access the streamof data being generated by the streaming device(microphone).
The job of the media recorder API is to capture the data. And it is very easy to set up.
There are series of methods that the media recorder api have, the most important methods are:
Start() and stop()
The ondataavailable is an important event.
The start() method would start the recording.
The stop() method would stop the recording.
The ondataavailable is where the actual data capturing takes place. Remember that the getUserMedia resolves a promise which is a stream of data(an audiobuffer) hence we call this event to tell the browser what to do if there is data available in the stream ,since this is a real time event we have to actually process and capture the data as soon as possible.
Having said that the stream being resolved by the promise are sequence of 1’s and 0’s we can store it in an array. Hence in the ondataavailable event we would append the stream of data into an array.
PROCESSING THE STREAM
Side note: A blob is a holder of data. It is a data type that stores binary data. In JavaScript a blob requires two arguments the first argument is an array of the stream of data or data and then the second argument is the name of data type in an object.
We now have our stream stored in an array,so we would put it inside a blob.The aim is to create an audio file. As discussed above the Blob requires two argument
1 an array of data
2 a file type
We put the array of captured data in the Blob first argument and then specify the type.
After the processing stage we need to be able to play what we recorded we are going to use the audio tag as a medium to play the recordings.
PLAYING THE STREAM
We all know that the HTML audio tag have the src attribute which takes the path of the audio file (the path of the audio file points to the actual audio file). But in this case our audio object is not a file but a blob hence we need a way to generate a string which would point to the blob created. Luckily for us the windows have a property to that . That property is called URL.createObjectURL() it requires one argument which is the blob object. Now we have created the source we need to assign it to the src attribute and now we can play our audio.
To stop the audio we would use the stop method.
DEMO:ACCESSING THE STREAM,CAPTURING ,PROCESSING THE STREAM,PLAYING THE STREAM.
I created a little demo. Link below.
To be able to access the full code you can get the source code at :
