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.
npm install unmute
The mute button can be added to the page like so:
UnmuteButton()import UnmuteButton from 'unmute'
UnmuteButton()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.
<script src="https://unpkg.com/unmute" data-add-button="true"></script>UnmuteButton takes an optional object as a parameter.
UnmuteButton({
//the parent element of the mute button
//can pass in "none" to create the element, but not add it to the DOM
container : document.querySelector('#container'),
//the title which appears on the iOS lock screen
title : 'Web Audio',
//force it to start muted, even when the AudioContext is running
mute : false
//AudioContext
context : new AudioContext(),
})The HTMLElement which the button will be added to
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"
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.
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 } = UnmuteButton()UnmuteButton returns an event emitting object.
Emitted when the AudioContext is started for the first time.
UnmuteButton().on('start', () => {
//AudioContext.state is 'running'
})Emitted when the AudioContext is muted.
Emitted when the AudioContext is unmuted.
Removes the button element from its container
const unmute = UnmuteButton()
//remove the element
unmute.remove()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.
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]
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)
import Tone from 'tone'
UnmuteButton({ tone : Tone })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.