<img src="https://certify.alexametrics.com/atrk.gif?account=bIEZv1FYxz20cv" style="display:none" height="1" width="1" alt="">
Skip to content
Blog / Latest Articles

How to Use a Spatial Audio API When Building a Simple Web App

Whether you’re a first-time app developer or an experienced one, it’s always good to learn to code something new, and building web apps is a great way to experiment. Nowadays, developers are looking for new ways to add high-value experiences within web apps, given the popularity, accessibility to users, and rise of investments in new immersive technologies.

A new breed of immersive audio technology has fundamentally changed the way app developers deliver high quality audio experiences to their applications — and the best part is that it doesn’t have to be complicated to add this to your application.

How can this be done? Let’s dive right in.

Building a Simple Web App Using a Spatial Audio API

First, what do we mean by “spatial audio”?

Conventional VoIP is typically mono, meaning that the left and right speaker both play the same sound at the same time. Spatial audio mimics the way we hear in real life, meaning that sounds appear to come from different locations. For example, a barking dog might sound as it were behind you as you slowly rotate away from the sound source.

 

In the example above, notice how much easier it is to process who is speaking, even in a crowded room. This is the power of spatial audio at work.

The science behind spatial audio is quite simple. To spatialize audio, we take the original sound and shift the delay between the two channels and adjust the loudness of the frequencies relative to the position of your head. In the video above, we also adjusted the frequencies and loudness of sounds proportional to participants’ distance from one another, which further helps with conversation within a large group.

There are thousands of potential use cases for spatial audio. For example, Soundstage.fm has built an interactive venue for virtual concerts where artists and fans can chat with one another. Additionally, Hubbub has created virtual networking spaces to facilitate more natural and intuitive conversations.

Is spatial audio right for your app? To utilize our spatial audio during your next build, here is a list of the things you’ll need to build a simple web app.

1. Audio API

High Fidelity’s Spatial Audio API is the easiest way to add spatial audio to your app.

In fact, it only takes a few lines of code to get started and our flexible API can be easily integrated with all NodeJS and WebJS projects. When you’re ready for production, access pay-as-you-go or volume-based pricing.

Features and Benefits:

  • All audio is mixed on the server and sent to each user in one personalized stream
  • Low-latency powers seamless, natural conversations
  • Scalable architecture to support groups of all sizes
  • No increased bandwidth requirements
  • Opus Codec to generate studio-quality sounds
  • Full developer control over user positioning, loudness, room attenuation, and other aspects of the audio environment

There are many ways to get started quickly with High Fidelity’s Spatial Audio API. We recommend creating a free developer account. After creating your free account, consult our free guides for detailed walkthroughs and examples of apps built using the API.

2. Local Development Environment

Next, we recommend creating a local development environment. A local development environment will allow you to use your own machine to run your website, instead of using one provided by a web hosting company. This way, you can customize the setup without worrying that it'll affect your live site.

To create a local development environment using High Fidelity’s Spatial Audio API, you will need the following software: 

Start by creating a folder on your local disk and naming it C:\code\hifi-simple-web\. Next, unzip the JavaScript (Web) version of the High Fidelity Spatial Audio Client Library and save to that folder. Create a blank HTML file inside of this development folder and name it index.html

Explore Spatial Audio API Now

3. JSON Token

Next, you’ll need a JSON Web Token (JWT). Today, JWTs serve as the industry standard for securely authorizing and exchanging information between two parties.

Follow these steps to secure a Test JWT:

  1. Log in to your High Fidelity Developer Account.
  2. Under "New App Name", enter an app name.
    • Example: "My Test App"
  3. Click the "Create New App" button.
  4. On the page that appears, under "New Space Name", enter a space name.
    • Example: "My Test Space"
  5. On the page that appears, under "Optional User ID", enter a User ID.
  6. Example: "Test User 01"
  7. Click the "Make Test JWT" button.

4. Code and Test

Lastly, let’s create a sample application using simple code. 

Click here to download an HTML file containing code for the sample application. Copy and paste the following code into index.html. Be sure to save your index.html.

Double-click on your index.html file and open it in the browser. You should see a mostly blank web page with a button and audio element on it. The page’s title should be Spatial Audio API Example - Simple.

Next, inside index.html, find const HIFI_AUDIO_JWT = "";. Paste the JWT you obtained during the previous step inside those quotation marks in your index.html file, then save the file. Refresh your browser, select “Connect”, accept microphone permissions, and you’re connected – it’s that easy! 

Testing your code is as simple as clicking index.html and opening a second instance of the app in a separate browser or window. Click the “Connect” button, accept microphone permissions and talk into your microphone. You should hear yourself! 

Add Immersive, High Quality Voice Chat to Your Application

Are you ready to build? Integrating spatial audio into your own application is straightforward — and the benefits are notable — you’ve already just made a simple web application with it! And the possibilities don’t stop there.

 

High Fidelity offers step-by-step guides and code examples to help you make the most of our Spatial Audio API. If you’re interested in adding spatial audio to an existing video conferencing solution, we’ve compiled a few resources to guide your efforts:

“Your support has been swift, and I regret spending as long as I did trying to get [another solution] to behave itself and not switching sooner. I have, in the past few years, worked with over 9 different VoIP systems besides your, from Flash based RTMP applications, to deeply integrated ‘run it over your own messaging stack’ SDKs. I have never had as few issues with a voice service as I have had with High Fidelity.” - Adam Frisby, CPO at Sine Wave Entertainment Ltd.

Adding immersive voice chat to your application is straightforward. And with access to support, teams can easily test, optimize, and troubleshoot code. Get started for free – no credit card required. Create a free developer account or talk to a spatial audio expert.

Create Your Free Developer Account

Add Spatial Audio to your app, game, or website.

Learn More
Published by High Fidelity May 14, 2021

Don't Miss Out

We're sharing the inside scoop with our loyal subscribers. Subscribe now to be first to know what we're working on next.

By subscribing, you agree to the High Fidelity Terms of Service

Ready to build?

Integrating spatial audio into your project is a snap. Here's everything you need to get started:
book-icon

Documentation

Detailed docs covering how our API works and sample code.
examples-icon

Guides + Examples

Complete guides and walkthroughs covering all you’ll need to get started.