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 Spatial Audio API.
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
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.
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
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.
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!