It is a good practice to give users control over starting audio playback. - * This practice is enforced by Google Chrome's autoplay policy as of r70 + * This practice is enforced by Google Chrome's autoplay policy * (info), iOS Safari, and other browsers. *
* *- * userStartAudio() starts the Audio Context on a user gesture. It utilizes * the StartAudioContext library by * Yotam Mann (MIT Licence, 2016). Read more at https://github.com/tambien/StartAudioContext. *
* - *Starting the audio context on a user gesture can be as simple as userStartAudio().
- * Optional parameters let you decide on a specific element that will start the audio context,
+ *
Starting the audio context on a user gesture can be as simple as p5.initSound()
+ * at the top of any sketch that uses audio/sound. By default, it will create a button that
+ * initializes the audio context when pressed.
The button element has the ID "p5_loading" and it can be stylized using CSS. + * If an HTML element with that ID already exists on the page, then that element will be used.
+ * + *When p5.initSound() runs before preload, setup, and draw, it will wait until the + * audio context has been initialized before running preload, setup or draw.
+ * + *Optional parameters let you decide on a specific element, + * or an array of elements, that will start the audio context. * and/or call a function once the audio context is started.
* @param {Element|Array} [element(s)] This argument can be an Element, * Selector String, NodeList, p5.Element, @@ -71,35 +135,60 @@ define(['startaudiocontext', 'Tone/core/Context', 'Tone/core/Tone'], function (S * @param {Function} [callback] Callback to invoke when the AudioContext has started * @return {Promise} Returns a Promise which is resolved when * the AudioContext state is 'running' - * @method userStartAudio - * @for p5 + * @method p5.initSound * @example *
- * function setup() {
- * var myDiv = createDiv('click to start audio');
- * myDiv.position(0, 0);
+ * p5.initSound();
*
+ * // Setup won't run until the context has started
+ * function setup() {
+ * background(0, 255, 0);
* var mySynth = new p5.MonoSynth();
- *
- * // This won't play until the context has started
* mySynth.play('A6');
- *
- * // Start the audio context on a click/touch event
- * userStartAudio().then(function() {
- * myDiv.remove();
- * });
* }
*
+ * function setup() {
+ * background(255, 0, 0);
+ *
+ * var myButton = createButton('click to start audio');
+ * myButton.position(0, 0);
+ *
+ * p5.initSound(myButton).then(() => {
+ * var mySynth = new p5.MonoSynth();
+ * mySynth.play('A6');
+ * background(0, 255, 0);
+ * myButton.remove();
+ * });
*/
- p5.prototype.userStartAudio = function(elements, callback) {
- var elt = elements;
- if (elements instanceof p5.Element) {
- elt = elements.elt;
- } else if (elements instanceof Array && elements[0] instanceof p5.Element ) {
- elt = elements.map(function(e) { return e.elt});
+ p5.initSound = userStartAudio;
+
+ function createInitSoundButton(p5Context) {
+ if (document.getElementById(INIT_AUDIO_ID) === null) {
+ const sndString = document.characterSet === 'UTF-8'
+ ? '🔊'
+ : 'Sound';
+ const initSoundButton = document.createElement('button');
+ initSoundButton.setAttribute('id', INIT_AUDIO_ID);
+ initSoundButton.innerText = `Init ${sndString}`;
+ initSoundButton.style.position = 'absolute';
+ initSoundButton.style.zIndex = '2';
+ initSoundButton.style.width = '100px';
+ initSoundButton.style.height = '100px';
+ initSoundButton.style.top = '0';
+ const node = p5Context._userNode || document.body;
+ node.appendChild(initSoundButton);
+
+ removeInitSoundButtonOnAudioContextStart(initSoundButton);
}
- return StartAudioContext(audiocontext, elt, callback);
- };
+ }
+
+ function removeInitSoundButtonOnAudioContextStart(child) {
+ audiocontext.resume().then(() => {
+ child.remove();
+ });
+ }
return audiocontext;
});