Audiate NPM | npm.io

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

Name	Description	Default value
`stylesheet`	The default stylesheet can be overridden by passing the `stylesheet` option and targeting the class names: `Audiate`, `AudiateClick` and `AudiateSound`.	See `lib/stylesheet.ts`

`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

Name	Description	Default value
`clickToEnable`	Setting this to false will cause the blocking enable screen to only be enabled on mobile	`true`
`stylesheet`	The default stylesheet can be overridden by passing the `stylesheet` option and targeting the class names: `Audiate`, `AudiateClick` and `AudiateSound`.	See `lib/stylesheet.ts`
`onEnable`	Function that runs once blocking enable screen is tapped/clicked	`noop`
`message`	Message presented to the user at block screen	`'Tap\\|Click to enable audio'`