audiate

What is this?

A simple library to indicate autoplaying audio content is present, and to detect and present some UI to begin playback if it's been blocked by Chrome's autoplay policy.

Why should I use this?

• Chrome has recently changed their autoplaying media policy. It is confusing/unpredictable and detecting ability to autoplay is inconsistent.
• You have an app that autoplays audio immediately and want to give some indication to the user if it has been muted.
• You probably shouldn't: Just build some kind of interaction into your app that triggers the playback in a natural fashion.

Installation

yarn add audiate

Usage

ambient

If you want to automatically detect whether or not audio is muted by the MEI and ambiently pop up a 🔇 indication but otherwise let interaction continue as normal. Any click/tap anywhere on the page after this should enable audio.

import { ambient } from "audiate";
 
// Include somewhere in initialization
ambient();

Options

block

If you want to automatically detect whether or not audio is muted by the MEI and present a blocking screen, suspending further interaction. This screen is skipped if audio is already enabled.

import { block } from "audiate";
 
block({
  onEnable: () => {
    // Initialize audio playback
  }
});

Options