Build a Web App with the Spatial Audio API, Express, and EJS

Project Complexity: ★★★★★

In this guide, we will build a Web application using the High Fidelity Spatial Audio API that has the following properties:

• Each instance of the Web application (i.e. each browser tab open to the app's URL) will make a unique connection to the High Fidelity Spatial Audio Server.
• The JWT used to connect each app instance to the HiFi Server will be unique per-instance. The secrets used to generate each JWT will not be exposed to the user of the application.
• Users of the application will be able to control their position and orientation in 3D space.
• Users of the application will be able to see the current User ID, 3D position, 3D orientation, and Volume (in dB) of all other users connected to the High Fidelity Space.

To accomplish these goals, we will make use of Express, a popular, fast, minimal Web framework for NodeJS. Developers use it to create dynamic Web applications, where the content of each page depends on variables such as a user's login status.

We will also make use of EJS, a simple templating language that allows a developer to generate dynamic HTML with JavaScript. We'll use EJS to pipe the securely-generated JWT into the code that each user's browser utilizes to connect to High Fidelity.

This guide builds on concepts from the Build a Simple Web App and Get a JWT guides.

Here, you will learn how to:

1. Sign up to use the High Fidelity Spatial Audio API
2. Create a High Fidelity Spatial Audio App and a Space to use with our Express app
3. Set up your development environment for writing the Express app
4. Write the application!

1. Sign Up to use the High Fidelity Spatial Audio API

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.

2. Create an App and Space for the Express App

If you already have an App and Space for your Express App, you can jump straight to the next step.

To authenticate our Express App with your Space, you'll first need to create an App and a Space. To do that:

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. Click "Create New Space".

Do not share the data you see on this page. It allows users to make authorized connections to your High Fidelity Spatial Audio Server.

3. Set up your Local Development Environment

To complete this guide, you will need to install the following software on your computer:

• NodeJS v14.15.x
• A text editor, such as Visual Studio Code

Next, let's create a skeleton version of a NodeJS project we'll use for development:

Create a new folder on your local disk that you'll use for development, such as C:\code\hifi-express\.

Enter npm init to initialize a new NodeJS project, inputting data as prompted. The data you input isn't important for the purposes of this guide.

In this guide, you don't need to install the NodeJS version of the High Fidelity Spatial Audio Client Library. The Library JavaScript code is embedded within the HTML that is served to application users via a <script> tag.

Now, let's install all of the NodeJS dependencies used for this Express Web App project. We'll make use of these dependencies in the next steps.

1. Install express by typing npm i express and pressing enter.
2. Install ejs by typing npm i ejs and pressing enter.
3. Install jose with npm install jose
   • jose is a package used to create JWTs using NodeJS.

4. Download the Code

Now that you have your development environment set up, you can download a .zip file containing this project's code by clicking here.

Extract the files within to your development directory. Your development directory should now contain the following files:

• index.js
  • This file defines our Express app, which will serve the Web App when a browser session hits http://localhost:8080.
  • You must edit this file with some pieces of secret information - keep reading to learn more.
• views/index.ejs
  • This file defines the HTML template file that Express modifies with a signed JWT before serving it to clients.
  • Within this file, there exists a <script> tag that imports the JavaScript High Fidelity Spatial Audio Client Library automatically.
  • The client code contained within this file could be, for example, modified with a new user interface.
• package.json
  • This file contains information about the NodeJS project and its dependencies.
• package-lock.json
  • This file also contains information about the NodeJS project and its dependencies.

Open index.js and fill in your APP_ID, SPACE_ID, and APP_SECRET. You gained access to this information in the "Create an App and Space" step above. For reference, you can find these pieces of information in the High Fidelity Audio API Developer Console.

Finally, in the PowerShell or Terminal window you've been using, type node index.js and press enter to execute the code. Visit http://localhost:8080 in multiple browser tabs to use the resulting Web application and explore!

Conclusion

In this guide, you learned how to create a dynamic Web App using the High Fidelity Spatial Audio API, Express, and EJS. You can use this guide's project as a starting point for your own dynamic applications!

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 support@highfidelity.com.