THEO Blog

Building better experiences with THEOplayer’s Web Audio API

Audio is a key factor in visual media and can enhance or destroy your experience: good processed audio can, in fact, make the experience more immersive, increase the viewer engagement and improve accessibility for those with impaired hearing. That’s why THEOplayer offers the Web Audio API (watch the demo here).


Why an Audio API?


You’re in full control of audio

Our technology relies on the HTML5 Web Audio API provided in all modern browsers, such as Google Chrome, Apple Safari, Mozilla Firefox or Microsoft Edge among others, and gives you fine-grained control over all aspects of the audio experience you are providing to your users. This opens up a variety of interesting possibilities for improving user experience and engagement.


Improve the user experience

Our Web Audio API provides you with the means to greatly improve the accessibility of your streaming content. In a variety of contexts, it can be hard to deliver enjoyable audio, and for these cases the web audio API can be used. One such classic case is when the content has interspersed ads. Often, these are not attuned to the average audio volume of the stream, and this can strongly detract from the user experience and even repel viewers (imagine watching a relaxing movie and then being hit with a very loud advertisement!). Another web audio API example is live streaming from outdoors, where the weather conditions can impact the audio experience (e.g. high-volume peaks and clipping due to strong winds). For these cases, we can plug a script that performs dynamic range compression (for the outdoors scenario, for example the script provided at GitHub) or normalisation (for the ads scenario) into the Web Audio API.


Improve your web accessibilityTHEOplayer improves user experience in audio for online streaming

For the hearing-impaired, the Web Audio API also offers a width of possibilities allowing you to improve the user experience according to web accessibility standards. For example, you could add a button to the player allowing simple things, like increasing the audio gain, or even a full equaliser control panel! In a muted autoplay scenario, you could also indicate that there is audio available as well, increasing the potential for engaging users with your content.


Deepen user immersion virtual reality

The Web Audio API can also offer new possibilities in the realm of VR: by controlling the panning, you can provide even deeper VR immersion on the aural level as well. Even when you are not using video but only playing back audio, you can improve the experience by providing a visualisation using the Web Audio API, which can be displayed within the player and provide a whole new experience (for an example: webaudioapi.com, or the examples at Github under ‘Visualization’).


How to use the Web Audio API?

The Web Audio API is provided in all modern browsers (consult this documentation for more detailed compatibility information). The basic idea of the THEOplayer Web Audio API is that you can use THEOplayer’s audio output as an audio source node in a Web Audio graph. This node’s output can then be run through a pipeline containing one or more audio processing steps. Each of these steps can take the audio signal and do a multitude of things with it: you can analyse the audio data, tweak the gain and panning, remux it,...


Getting started

A good basic tutorial on how to use the HTML5 Web Audio API in general can be found at this link. The API we offer can be found at this link. In short, once you have instantiated an AudioContext using the HTML5 Web Audio API, you can call player.audio.createAudioSourceNode(audioContext), which will return an audio node that you can use in your own Web Audio API processing graph.

Check our Web Audio API demo here. Also visit a very simple Web Audio API tutorial at our Support Page.


A more complex use case

Radio France, Orange Labs, IRCAM and France Televisions have developed a Web Audio node that performs dynamic range compression. In effect, it allows you to cut out the volume ‘peaks’ and render the overall audio experience more enjoyable. The JavaScript source code for their audio node is provided at this link. And of course, you can plug this nicely into the THEOplayer Audio API! You can check it out on this demo we designed.

Discover our demo zone and, if you want to get more information about our Web Audio API, click on the button below. Our team of video streaming expert will be happy to help you.

Get in contact with us


THEOplayer Web Audio API keys learnings

Subscribe by email