About Chat Plus

Chat Plus is a chrome extension developed by Tabgraf that enables additional features in Google Chat some of which are:-

  1. Audio message
  2. Reminders
  3. Bookmarking message
  4. Encrypt and Decrypt message
  5. Quoting a message
  6. Code and Code blocks
  7. Location sharing
  8. Copy link of the message
  9. And Counting ...

 

Send Audio message in Google Chat

To send audio message in Google Chat first you need to install Chat plus from the Chrome webstore. After the extension has been successfully installed you will be finding a lot of additional features has been enabled in Google Chat. Among this is the Audio Messaging. Here is a screenshot attached to help you locate this feature.

 

Once you click on the mic, a popup with a recorder will open (for the first time users, you must login with your Google account to use Chat Plus). This recorder will record your audio message and send it to Google Chat as a link which you send it in the chat. An audio preview will also be injected with the link for a quick preview of the message.

 

How the Audio messaging works ?

The moment the record button is clicked, a instance MediaRecorder is created, and event listner `dataavailable` is attched to it, which provides the audio that is being recorder in chunk and that is being collected in chunks array.  Here is a reference of how the MediaRecorder works:

navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
  const mediaRecorder = new MediaRecorder(stream);
  let chunks = [];

  mediaRecorder.addEventListener("dataavailable", (event) => {
    if (event.data.size > 400) {
      if (!animateDiv.classList.contains("animate-recorder")) {
        animateDiv.classList.add("animate-recorder");
      }
    } else {
      animateDiv.classList.remove("animate-recorder");
    }
    chunks.push(event.data);
  });
});

 

How the audio chunks is converted back to audio ?

The chunks array that is generated during the recording is converted to Blob of type `mp3` which is used to create a audio url. This audio url is again utilised for creating a base64 which is sent to the backend to save a audio file.

const audioBlob = new Blob(chunks, { type: "audio/mp3" });
const reader = new FileReader();
reader.readAsDataURL(audioBlob);
reader.onload = () => {
  const base64AudioMessage = reader.result.split(",")[1];
  console.log(base64AudioMessage);
};

In the backend a new instance of Buffer is created which converts the `base64AudioMessage` to buffer. This buffer is used to create an audio file with help of node js file system(fs).

const buffer = Buffer.from(base64AudioMessage , "base64");

fs.writeFileSync(audioFilePath, buffer);

So , this how the Audio messaging feature works in Chat Plus.