Driving In-Platform Connection with Audio Chat SDK: A Real-World Look

My experience enabling my favorite crossword game with real-time audio

In this article:

1. How audio chat SDKs drive in-platform community for users
2. 4 steps to add Aircore’s Sync Audio SDK to any product

I’ll never forget the first time I experienced the power of a flexible, out-of-the-box audio chat SDK in a real-life scenario. 

It was 2022, and Aircore had just launched the Sync Audio SDK – a low code UI panel that developers can integrate into their apps to provide real time audio chat to users. I remember sitting in our Sunnyvale office after an exciting all-hands demo of this new audio chat SDK. The table was abuzz with excitement, and my mind was racing through possible applications of this audio chat SDK. I was excited to try it out for myself – but where to start?

Learn more about Aircore’s products here.

A better way for platform users to communicate

The answer hit me on the head later that week. If you’re a casual (or an avid) crossword enjoyer like I am, you may be familiar with the site downforacross.com. It’s a boredom-be-gone, convenient way to complete your favorite crosswords from sources like the NY Times and the LA Times. The best part of the experience is that it’s collaborative – just copy and paste a link, and your friends are able to join you for some real-time puzzling fun. You can watch your friends fill in their answers as they type. There’s even a text chat built into each game, with each player randomly assigned a name comprising <funny adjective> + <animal>. Last time I played, my name was Affordable Bonobo.

The ability to share a direct link to your game session meant that all my friends and I ever needed to do was slap a link into Discord, hop into a voice chat, and be on our way. However, it wasn't ideal. I didn't like having to open up a separate app just to be able to talk with my friends. I didn’t want our game-related communication to be mixed in with all the other conversations happening in our Discord channel, or to spam the people in the channel who weren’t playing.

Instead, I wanted to keep everyone together, to turn our game into a little community all within the bounds of our game session – no Discord necessary. I thought the Sync SDK would be the perfect solution here. It was a great opportunity to demonstrate the power of real-time audio in the browser. As a non-web developer, I was also stoked to test out just how easy this low-code audio chat SDK integration could be for myself.

4 steps add Aircore’s audio chat SDK to any product

Good thing for me, downforacross is actually an open source project. It took no time to clone the repo and get a development build up and running on my local machine. From there, it was quick work to add the Sync voice panel by following the steps on Aircore's docs page.

Step 1: Register as a developer

On developer.aircore.io, I registered myself and created a test app.

Then I filled out the required information for the app I was creating – basically just a name and a short description – and that was it! We'll come back to the developer console later.

Step 2: Add the NPM package to your project

I added the package to the project with

npm install @aircore/aircore-panel-core @aircore/aircore-media-panel

Step 3: Initialize the client

All the logic for the downforacross chat lives in `src/components/Chat/Chat.js`. 

In this file, I added two import statements.

 
import { createClientWithPublishableKey } from '@aircore/aircore-panel-core';
import { MediaPanel } from '@aircore/aircore-media-panel';
	

In the Chat constructor, I set up the username and the chat client with the publishable key assigned to me on the developer site.

 
const userId = `DOWN_FOR_ACROSS_USER_${username}`;
 this.client = createClientWithPublishableKey('my-publishable-key', userId);
	

Your userId can be anything, but in this case I picked up the variable that sets players’ usernames in the already existing text chat. The userId represents the specific client that is connecting to the audio chat.

‍

Your publishable app key (or PAK) can be found on the developer console under your newly created app.

Step 4: Render the Voice Panel

I declared a new method, `renderVoicePanel`, in which to execute the bulk of the setup for the panel.

 
renderVoicePanel(username) {
  const channelId = 
    `DOWN_FOR_ACROSS_CHANNEL_${this.props.gid}_${this.props.isFencing}`;
 
  // Set current user name and avatar
  this.client.setUserDisplayName(username);
 
  var encodedColor = `${encodeURIComponent(this.props.myColor)}`;
  encodedColor = encodedColor.replace(/\(/g, '%28').replace(/\)/g, '%29');
 
  const iconUrl = `https://api.iconify.design/material-symbols/circle.svg? 
  color=${encodedColor}&width=50&height=50`;
 
  this.client.setUserAvatarUrl(iconUrl);
 
  // Connect to the desired channel
  this.client.connect(channelId);
 
  // Render the panel
 
  this.VoicePanel = MediaPanel(
    '#voicePanel', // Selector DOM target
    {
      client: this.client,
      channelId: channelId,
      config: {
        expandedStateOptions: {
          enabled: false, // Disabling the expanded view
        }
      }
    });
 
  return (<div></div>);
}
	

We need a channel ID, a unique ID which acts as the “chatroom” to which users will connect. I chose to create the channel ID from the unique game ID which already existed in the project:

 
const channelId = `DOWN_FOR_ACROSS_CHANNEL_${this.props.gid}_${this.props.isFencing}`;const channelId = `DOWN_FOR_ACROSS_CHANNEL_${this.props.gid}_${this.props.isFencing}`;
	

 
const channelId = `DOWN_FOR_ACROSS_CHANNEL_${this.props.gid}_${this.props.isFencing}`;

We have to configure some attributes on the client.

 
this.client.setUserDisplayName(username);
 this.client.setUserAvatarUrl(iconUrl);
 

Here, I chose the username and user avatar to correspond to the existing username and chat icons that the downforacross project assigns to users in the text chat. The configurations I make here will show up on the panel as a users' name and icon.

Next, we need to connect the client to the channel.

 
this.client.connect(channelId);
 

The final piece to render the panel looks like this:

 
// Render the panel
this.VoicePanel = MediaPanel(
  '#voicePanel', // Selector DOM target
  {
    client: this.client,
    channelId: channelId,
    config: {
      expandedStateOptions: {
      enabled: false, // Disabling the expanded view
    }
  }
});
 

The panel is open to be configured in many ways, but I've only set one config option to always keep the panel in a collapsed view.

The panel needs a selector DOM target to know where to render itself. This target must exist before the panel is rendered. To this end, I created a new div for the panel in the `Chat` component’s `render()` function:

 
<div className="chat--voice--panel" id="voicePanel"></div>
 

I passed in the #voicePanel selector to the panel.

Finally, I called `this.renderVoicePanel` inside `componentDidMount`

 
this.renderVoicePanel(this.state.username);
 

Conclusion

That's it! We can now do crosswords with our friends while chatting with them in real time – all within the web browser – using this low-lift, high-design audio chat SDK. Tools like this are a critical resource for any Product or Engineering team looking to drive product engagement, build customer loyalty, and give their users the ability to create an in-platform community on their own terms. 

See the full Sync Web docs here, and get in touch to learn more about Aircore’s audio chat SDK.

‍