Web Audio Concepts 

The Web Audio API is a powerful, high-performance way of manipulating sound in the browser. Before continuing this tutorial, you might want to check out the previous blog posts.

– Part 1: Overview of the Spaceport Volumetric Video Capturing and Streaming

– Part 2: Spaceport Volumetric  Video Container Structure

– Part 3: Spaceport Volumetric Video Live Streaming

– Part 4: Spaceport 1.0

– Part 5: WebAR and integration to 8th Wall

In this tutorial, We’ll show you how to add sound to the volumetric video, in a good way.

Step 1: Configure your index.html

To add audio to your volumetric player, create a new audio tag. WEB audio API provides a convenient audio tool to set up your audio source and get your background audio configured quickly. You can choose from a few different methods, but in our case, we’re keeping it simple with the audio tag.

Step 2: Loading sounds

The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an AudioNode. Once the (undecoded) audio file data has been received, it can be kept around for later decoding, or it can be decoded right away using the AudioContext decodeAudioData() method. This method takes the ArrayBuffer of audio file data stored in request.response and decodes it asynchronously (not blocking the main JavaScript execution thread).

Step 3: Playing Sounds

Once one or more AudioBuffers are loaded, then we’re ready to play sounds. Let’s assume we’ve just loaded an AudioBuffer with the sound of a dog barking and that the loading has finished. Then we can play this buffer with the following code.

Conclusion

In this article, we learned more about the Web Audio API and how this API can help us work with audio in the volumetric video player. It opens a lot of possibilities for us to create more complex applications. 

Hope you enjoyed the blog post. If you have any questions please do not hesitate to contact us.

hello@spaceport.tv