Audio

Playing Audio

Browsers have a limitation where you can't play audio until the user interacts with the tab. An attempt to play audio anyway will result in an error thrown.

To work with this limitation, we provide a React hook that will tell you whether the renderer can play audio or not. If playing video, you could use this flag to indicate when to unmute the video.

Example usage:

const canPlay = pluginApi.audio.useCanPlay({ skipCheck: !isPlaying });

Calling this function by default will:

1. Periodically check the renderer for a status change

2. Show a warning to the user that audio is blocked

We recommend passing a skipCheck property that will only start performing these side effects when the value is false. See the example usage above for clarity.

Audio Volume

If making a volume fader, please keep in mind that by default, HTML audio scales linearly. This is not ideal since human perception of loudness is not linear.

See more: https://www.dr-lex.be/info-stuff/volumecontrols.html

Example library to use: https://github.com/discord/perceptual

Showing to user that Audio is playing

If your plugin plays audio, you'll want to indicate that to the user to reduce confusion.

For example, we display an icon next to the scene so that the user knows where the audio comes from. Browser tabs use the same UI to notify this to the user.

Here's how it looks like in our platform:

To set this state, you need to set the __audioIsPlaying property in your renderer data to either true or false. See the Typescript type PluginRendererState for all possible states.

TheOpenPresenter/packages/base-plugin/src/types.ts at main · Vija02/TheOpenPresenterGitHub

Example

const onRendererDataLoaded: RegisterOnRendererDataLoaded<PluginRendererData> = (
  rendererData,
) => {
  const yjsWatcher = new YjsWatcher(rendererData as Y.Map<any>);
  yjsWatcher.watchYjs(
    (x: PluginRendererData) => x.isPlaying,
    () => {
      // Watch the isPlaying property and sync it to __audioIsPlaying
      rendererData.set("__audioIsPlaying", rendererData.get("isPlaying"));
    },
  );

  return {
    dispose: () => {
      yjsWatcher.dispose();
    },
  };
};

More info about this here: Renderer

Showing to user that Audio is being recorded

Similarly to above, you can show to the user that audio is currently being recorded by setting the __audioIsRecording variable.