audiate
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

audiate

npm

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'

Readme

Keywords

none

Package Sidebar

Install

npm i audiate

Weekly Downloads

12

Version

2.0.0

License

MIT

Unpacked Size

13.3 kB

Total Files

21

Last publish

Collaborators

  • dzuc