Unmute adds a mute/unmute button to the top right corner of your page.
This button implements many browsers' requirements that the AudioContext is started by a user action before it can play any sound. If the AudioContext is not running when the page is loaded, the button will initially be muted until a user clicks to unmute the button.
INSTALLATION
npm install unmute
USAGE
The mute button can be added to the page like so:
es6
HTML
If your code uses Tone.js, you can simply add the following code to your <head>
and it'll add an UnmuteButton to the page and bind itself to Tone.js' AudioContext. Tone.js must be included on the page.
API
Parameter
UnmuteButton takes an optional object as a parameter.
container
The HTMLElement which the button will be added to
title
UnmuteButton also unmutes the browser tab on iOS even when the mute toggle rocker switch is toggled on. This causes a title to appear on the phone's lock screen. The default title says "Web Audio"
mute
This will force the initial state of the button to be muted. Though, you cannot force it to be 'unmuted' by passing in {'mute' : false}
because the default state of the button is also determined by the state of the AudioContext.
context
If a context is passed in, it will be wrapped and available as a property of the returned object. If no context was passed in, one will be created. You can access the created context as a property.
const context =
Events
UnmuteButton returns an event emitting object.
'start'
Emitted when the AudioContext is started for the first time.
'mute'
Emitted when the AudioContext is muted.
'unmute'
Emitted when the AudioContext is unmuted.
Methods
remove()
Removes the button element from its container
const unmute = //remove the elementunmute
Style
The UnmuteButton's default styling can be overwritten with css. The UnmuteButton is a <button>
element with id #unmute-button
. When in a muted state, a class .muted
is added to the element.
iOS
Additionally this button plays a silent sound through an <audio>
element when the button is clicked which enables sound on iOS even when the mute rocker switch is toggled on. [reference]
Earlier versions of Tone.js (before tone@13.2.3)
If using an older version of Tone with a global reference to Tone.js, it should work as with the above examples. The one exception is if you're using it with a build system which does not create a reference to Tone
on the window.
This has been tested with Tone.js (>=tone@0.7.0)
Without Tone.js
To use it without Tone.js, check out this example. Be sure to use the wrapped and shimmed AudioContext instance which is a property of the UnmuteButton instance. Automatically adding the button to the body (using data-add-button="true"
) will not work.