> Requires SPX Production/Broadcast v.1.1.1 or newer. Playing back sound effects as a part of graphics playout can be important in some productions. The recommended workflow for playing back production audio, would be to integrate graphics playout and a professional multi-channel audio playout under same triggering mechanism like automation and orchestrate these individually, using dedicated software and systems for both. There are however ways to play back audio using SPX API's also. These helper features were introduced in SPX Production / Broadcast version 1.1.1 and they have been implemented for simple audio playback scenarios, like having a "swoosh" with a sport graphic. SPX provides these options: 1. serverAudioController 2. rendererAudioController Audio playback can be implemented into templates by making an API call, see end of this page for example snippets. --- # 1. Server audio _Server audio_ in SPX means using a basic system level audio player from the SPX server's operating system and available audio hardware. This can make sense in environments, like OB trucks, where a dedicated hardware is used for playout. The audio device used is always the default audio-out device of the computer and it cannot be changed. [[Control API]] has a GET endpoint `/api/v1/serverAudioController` which supports only two arguments - **command**: `play|stop` - **file**: `/media/wav/whoosh.wav` --- # 2. Renderer audio _Renderer audio_ in SPX means using audio playback capabilities of web browsers - simple in theory. However in SPX workflows there might be several outputs and views open for graphics playback: local renderer, a preview, multiple outputs for different screens, etc. * Which output should produce sound? * Can the video pipeline capture audio from this output? * Will it even play...?! [[Control API]] has a GET endpoint `/api/v1/rendererAudioController` which supports a few arguments: - **command**: `play|stop` - **file**: `/media/wav/whoosh.wav` - **fade**: `2000` (number, optional) - **loop**: `true|false` (boolean, optional) ### Default output(s) In SPX's [[Configurations]] Audio section there is a selector for choosing the default target for renderer audio output: * **ALL** - all connected outputs will play the audio file (usually not in perfect sync) * **NONE** - none of the outputs will play the audio file * **LOCAL** - only the local renderer will play the audio file (when in "program mode") * **OTHER** - all outputs except the local renderer will play the audio file ![[audio-dropdown.png]] ### `rendererAudio` URL parameter override The URL of the renderer supports an optional `rendererAudio=true|false` flag. This overrides the default setting. For example, if the config uses `none` option globally for all outputs, but (one of the renderers) can be enabled for `serverAudioController` playback with: ``` http://localhost:5660/renderer?rendererAudio=true ``` ### It may still not work... Since (most) browsers are made for interactive user interfaces, they have built-in features to prevent some potentially annoying or unsafe-features of websites, like audio/video autoplay. Technically SPX is trying to "autoplay" an audio file on the webpage and if the browser is not configured to allow this to happen, the audio may never play. This cannot be programmatically fixed or detected by SPX and the publisher of the host application must implement "flags" to the embedded browser to allow autoplay in their host application. OBS and vMIX can be configured to support audio from browser sources. See your video switcher documentation for details. ⚠️ **ALWAYS** CAREFULLY TEST AUDIO PLAYBACK IN YOUR PRODUCTION PIPELINE. Read more about the autoplay policy at [Chrome Developer Blog](https://developer.chrome.com/blog/autoplay/). --- # Template code snippet The following snippet can be used as a starting point when adding an audio playout to SPX templates. You can use either `rendererAudioController` or `serverAudioController` as the playout handler. Add this code directly into template's `runAnimationIN()` -function: ```js // Minimal audio player without fade or loop parameters const file = "/media/wav/whoosh.wav" const url = `/api/v1/rendererAudioController`; const arg = `?file=${file}&command=play` fetch(url+arg); ``` You can add loop and fade properties for more advanced playout. See sections on this page for additional information. You can also add a `filelist` item into the template, to be able to choose an audiofile from a folder. See [[Documentation/Graphic Templates/Template Definition|Template Definition]] for more.