Project Complexity: ★☆☆☆☆
Within a few minutes, you can develop a Web application that allows two or more people to talk to each other in a virtual 3D environment using the High Fidelity Spatial Audio API.
In this guide, you will learn how to:
If you already have a High Fidelity Developer Account, you can jump straight to the next step.
Before your app can make use of the Spatial Audio API, you'll need a High Fidelity Developer Account. Sign up for an account or log in here.
To complete this guide, you will need the following software:
getUserMedia, such as Mozilla Firefox or Google Chrome.
Create a new folder on your local disk that you'll use for development, such as
At this point, your development folder should have a file in it called
HighFidelityAudio-latest.js. It's okay if your development folder contains other files, too.
Create a new, blank HTML file in your development folder called
index.html. We'll write our code in this file later in Step 4.
Next, you'll need to get a Test JSON Web Token (JWT). You will use this JWT in Step 4 to authorize your simple Web App with the High Fidelity Spatial Audio API servers.
JWTs are an open industry standard method for securely representing claims between two parties. Click here to learn more about JWTs. (Link will open in a new tab)
To get a Test JWT:
The long string that is generated is your Test JSON Web Token (JWT). We will use this string later in Step 4.
Do not share this JWT. It allows users to make authorized connections to your High Fidelity Spatial Audio Server.
Your JWT should look something like this sample JWT (this sample won't work in your app):
Here's the fun part! Now, we're going to write some code that, when executed in a browser, will connect users to a virtual 3D environment and allow them to talk to each other.
index.html file from Step 2 in your favorite text editor.
Now, let's add to this file almost all of the code necessary to make this sample app work. Copy and paste the following code into
index.html (or click here to download an HTML file containing the code):
Double-click on your
index.html file and open it in your Web browser. You should see a mostly-blank Web page with a button and an audio element on it. The page's title should be
High Fidelity Spatial Audio API Example - Simple. Progress!
At this stage, if you were to click the "Connect" button, the connection would fail. This is because you haven't authenticated your app with High Fidelity using your JWT.
const HIFI_AUDIO_JWT = "";. Paste the JWT you obtained during Step 3 inside those quotation marks in your
index.html file, then save the file.
For example, that line of code may look like the following:
const HIFI_AUDIO_JWT = "NYCytIANhIiUQL9OeBYfUWZuLxiQtclLOGyV31Z0YIjTCCnIJ106RX06Q79Mjt1kcXMVMMINyZNCjeDsflmCIDMTmdcNz0ieRxbY.ZMwlZTJXkBOn.ZVU0ZzNalLipDJ3L5niFQnYZ5aFGt7JC2TlWiJJOMw33IICaiDcQinWMpGizhjTjLjR9yQjJ004OmJCIVfwyWZZjmII8FhlLSjV2TIHOil61DEUNi-VWUzM5Ms";
Refresh your browser. Click on the big "Connect" button at the top of the page. Your browser should ask you for microphone permissions. Accept the request, and you're connected!
To learn more about the code that you copy and pasted above, browse the code line-by-line and read the comments.
During this next test, we highly recommend that you wear headphones, as audio feedback may occur otherwise.
To test that it really was that simple, double-click
index.html again to open a second instance of your Simple Web App in a separate browser tab or window. Click the "Connect" button in that second browser tab, accept the request for microphone permissions, and talk into your microphone. You should be able to hear yourself!
Your input audio is traveling from Browser Tab A to the High Fidelity servers, at which point it is spatialized and mixed with the audio from all other connected clients. Then, that mixed audio is sent back to all other connected clients, where it is played back thru the audio element in Browser Tab B. All of this happens in a small fraction of a second and in near real-time!
In this guide, you created a simple Web application that makes use of the High Fidelity Spatial Audio API.
For detailed technical information about the High Fidelity Spatial Audio Client API, visit the API documentation.
If you have any questions or comments, please reach out to firstname.lastname@example.org.