Skip to content

A simple library to indicate autoplaying audio content is present, and to present a click/tap to enable screen to begin playback.

License

Notifications You must be signed in to change notification settings

dzucconi/audiate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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'

About

A simple library to indicate autoplaying audio content is present, and to present a click/tap to enable screen to begin playback.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published