P5.js: update examples to reflect new Audio Autoplay Policy

[TomPeak]

Hello,

I use p5.sound on Chrome

please have a look: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

I get this error:
The AudioContext was not allowed to start. It must be resume (or created) after a user gesture on the page. https://goo.gl/7K7WLu

There are some 2018 chances!

Tom

[lmccart]

I think the todo here is to add a note into the documentation and update any examples that autoplay to instead require user interaction (mousePressed etc).

[lmccart]

note that the documentation for sound examples is done here: https://github.com/processing/p5.js-sound

[limzykenneth]

For now this behaviour has been at least temporarily suspended, furthermore what Chrome is doing isn't standard compliant. How Chrome will or will not change their approach to this is still to be seen.

[lmccart]

this would mean updating files p5.dom.js and maybe also p5.Element.js. there are probably updates needed for the p5.sound library as well, but those live in a separate repo

[micuat]

I've encountered this problem with latest chrome when playing videos. Muted video can be autoplayed but video.volume(0) is not enough - only video.elt.muted = true works

[tigoe]

It's not just audio playback, I'm getting the same error when I try to use AudioIn and fft to do tone detection.

See https://github.com/tigoe/p5js_examples/tree/master/toneDetect for an example that fails reliably.

[dhowe]

Seems to me we either need to fix the fatal bugs (eg https://github.com/processing/p5.js-sound/issues/88) in p5.sound or give up on it and instruct folks to use something like Tone.js. If the latter, then we don't need to worry too much about this... (its quite frustrating for students who are instructed to use the sound lib, to then have it crash their sketches whenever they let them run for a while)

[stalgiag]

Just putting a note here that the above issue was fixed with #3608, seems reasonable to move forward with updating examples/documentation in time for 0.8.0 release

[fadookie]

I can't get this to work reliably on my latest sketch: https://editor.p5js.org/fadookie/sketches/RM4wd2g8U

In the editor, it works fine. But as soon as I download or show in fullscreen or presentation mode, I sometimes am unable to get any audio line in EVEN after waiting for a click event as suggested in the docs.

Sometimes it works without any user interaction, sometimes it never works, seemingly at random! And it's confusing because in the event the audio line in fails to start, I get a success callback from AudioIn#start rather than an error callback. I've never seen my error callback fire even once. I know this is mostly Chrome's fault but it's making p5.js barely usable for making audio-reactive sketches.

Does anyone have any advice? Is there a more sure-fire way to wait for "user interaction" other than just waiting for a click on the canvas? Should I be re-creating the AudioIn? How can I tell my users what to do so it works? It also seems like there's a bug in #start such that errors don't actually get bubbled up.

[limzykenneth]

@fadookie I don't think this is related to the autoplay policy as the behaviour does not include microphone access. Chrome and other browsers usually ask for user permission before accessing them (with default settings), basically the same behaviour as webcams. I have no idea why Chrome is giving this behaviour though, nothing I found online points to a potential source of the problem.

[fadookie]

Thanks, maybe I should open a separate issue with this. May be PEBKAC but would still be great to document better if so.

Edit: Moved to separate issue: https://github.com/processing/p5.js/issues/4112

[lmccart]

fixed with https://github.com/processing/p5.js/pull/3988. there is more work planned with p5.sound to address the way the audio context is initiated, but this partially resolves the issue in the meantime