JavaScript is a very flexible language and it provides many API support to do many useful things. Here one important thing is that record audio or video in web pages is also done using JavaScript. In this case, it will ask the user for microphone access to the browser and record the audio through the microphone and save the audio data chunks in form of binary value in an array and when we play the audio then retrieve chuck data and start playing. The same thing happens for video also, when we do video conferences then this actually happens in the server, only thing is that here we play the video at the same page, and in case of video conference the video will play at the other end.
This whole thing happens using an API, which is MediaRecorder API. This API provides functionality to record media such as audio or video. It is created using the MediaRecorder() constructor.
Here we use one property of JavaScript, which is mediaDevices property, which is used to get access to connected input media devices like microphones, webcams, etc. This property uses a method getUserMedia() to get permission for accessing the microphone, webcam etc. This method returns a promise to the navigator object.
The Promises are as follows:
If true:
- resolve : If all permissions are achieved and the microphone or camera are working fine, then it returns a MediaStream object. This is the main recorded data.
If false:
- NotAllowedError: If the user reject the permission for recording.
- NotFoundError: If there is no media track.
- NotReadableError: If the input devices are not found or the hardware is not working.
- OverconstrainedError: If constraint audio settings are preventing.
- AbortError: If generic unknown cause is found.
- TypeError: If audio: false stated in the Javascript code.
Example:Â
javascript
<!DOCTYPE html><html>Â
<head>Â Â <script>Â
    let audioIN = { audio: true };    // audio is true, for recordingÂ
    // Access the permission for use    // the microphone    navigator.mediaDevices.getUserMedia(audioIN)Â
      // 'then()' method returns a Promise      .then(function (mediaStreamObj) {Â
        // Connect the media stream to the        // first audio element        let audio = document.querySelector('audio');        //returns the recorded audio via 'audio' tagÂ
        // 'srcObject' is a property which         // takes the media object        // This is supported in the newer browsers        if ("srcObject" in audio) {          audio.srcObject = mediaStreamObj;        }        else {  // Old version          audio.src = window.URL            .createObjectURL(mediaStreamObj);        }Â
        // It will play the audio        audio.onloadedmetadata = function (ev) {Â
          // Play the audio in the 2nd audio          // element what is being recorded          audio.play();        };Â
        // Start record        let start = document.getElementById('btnStart');Â
        // Stop record        let stop = document.getElementById('btnStop');Â
        // 2nd audio tag for play the audio        let playAudio = document.getElementById('adioPlay');Â
        // This is the main thing to recorded         // the audio 'MediaRecorder' API        let mediaRecorder = new MediaRecorder(mediaStreamObj);        // Pass the audio stream Â
        // Start event        start.addEventListener('click', function (ev) {          mediaRecorder.start();          // console.log(mediaRecorder.state);        })Â
        // Stop event        stop.addEventListener('click', function (ev) {          mediaRecorder.stop();          // console.log(mediaRecorder.state);        });Â
        // If audio data available then push         // it to the chunk array        mediaRecorder.ondataavailable = function (ev) {          dataArray.push(ev.data);        }Â
        // Chunk array to store the audio data         let dataArray = [];Â
        // Convert the audio data in to blob         // after stopping the recording        mediaRecorder.onstop = function (ev) {Â
          // blob of type mp3          let audioData = new Blob(dataArray,                     { 'type': 'audio/mp3;' });                     // After fill up the chunk           // array make it empty          dataArray = [];Â
          // Creating audio url with reference           // of created blob named 'audioData'          let audioSrc = window.URL              .createObjectURL(audioData);Â
          // Pass the audio url to the 2nd video tag          playAudio.src = audioSrc;        }      })Â
      // If any error occurs then handles the error       .catch(function (err) {        console.log(err.name, err.message);      });  </script></head>Â
<body style="background-color:rgb(101, 185, 17); ">Â Â <header>Â Â Â Â <h1>Record and Play Audio in JavaScript</h1>Â Â </header>Â Â <!--button for 'start recording'-->Â Â <p>Â Â Â Â <button id="btnStart">START RECORDING</button>Â Â Â Â Â Â Â Â Â Â Â Â Â Â <button id="btnStop">STOP RECORDING</button>Â Â Â Â <!--button for 'stop recording'-->Â Â </p>Â
  <!--for record-->  <audio controls></audio>  <!--'controls' use for add     play, pause, and volume-->Â
  <!--for play the audio-->  <audio id="audioPlay" controls></audio></body>Â
</html> |
Output: 
