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' |