Skip to content

Latest commit

 

History

History
47 lines (29 loc) · 2.43 KB

README.md

File metadata and controls

47 lines (29 loc) · 2.43 KB
Raw

web-audio-api-autostart

Beginning with Chrome 66, creating an AudioContext before the document has received a user-gesture will initialize it to the suspended state, and no audio processing can be done until AudioContext.resume() is called, either in response to a user-triggered action (such as a trusted click event), or after the document has received a user gesture, depending on autoplay policy. That is, it's no longer possible to start an AudioContext completely automatically to play sounds.

This is a severe breaking change to several Web Audio API-based apps, and to work around this, you either need to ask the user to perform a meaningful action (such as a click), start chrome with --autoplay-policy=no-user-gesture-required, or wait until a gesture happens (again, depending on autoplay policy).

web-audio-api-autostart simply injects these requirements into the construction of the AudioContext itself. It will try to auto-start the AudioContext when created, or show a simple and tasteful, customizable snackbar to let the user start (resume) the AudioContext playback manually.

How to use

Include autostart.js through a script tag before your app code:

<script src="autostart.js"></script>

Customize

Appearance

The button label can be customized by the data-btn-label attribute on the script tag:

<script src="autostart.js" data-btn-label="Start"></script>

The button appearance can be customized through the audioctx-resume-btn CSS class, for example:

.audioctx-resume-btn {
    font-size: 22px !important;
}

Some properties need the !important keyword to override inline styles.

Behavior

By default, the button will be shown near immediately if required. To attempt to wait until AudioContext.resume() can be called without a direct user-gesture (such as in the case of an autoplay policy that allows doing so after any arbitrary user-gesture has happened), add the data-timeout attribute, specifying the wait duration in milliseconds:

<script src="autostart.js" data-timeout="4000"></script>

Known Issues

web-audio-api-autostart makes repeated attempts at calling AudioContext.resume() to try to avoid having to show the button. This might spam several warnings into the console, especially with the data-timeout attribute set.