update p5 sound examples to start audio on a user gesture

[markjsb]

Sound is currently not working in Chrome due to changes in the way that sound can be played. It seems that Chrome now only allows a sound context to be created with a user click.

Console log error message: The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu (anonymous) @ p5.sound.js:211 (anonymous) @ p5.sound.js:292 (anonymous) @ p5.sound.js:73 (anonymous) @ p5.sound.js:74

The error occurs three times, no sound plays.

[aatishb]

Hi, this is the github for the p5.js website. You might want the p5.js github which is here: https://github.com/processing/p5.js/

For your issue, the easiest way to resolve it is to have the equivalent of a play button, i.e. something that is clicked on the canvas before any sound plays. You could also try the userStartAudio() function from this example: https://p5js.org/reference/#/p5.sound/userStartAudio

[therewasaguy]

Change was made to the inline examples here https://github.com/processing/p5.js-sound/pull/403 https://github.com/processing/p5.js/pull/3988

and now the examples that live in the website repo also should be updated. The examples should be re-designed to follow the best practice of starting audio (i.e. with userStartAudio()) on a user gesture, i.e. within mousePressed(){}

[stalgiag]

@singhvisha do you have any interest in helping out with rewriting some of the samples to follow @therewasaguy 's proposal above?

[vilvadot]

I'm interested in helping rewriting them @stalgiag but I'm clueless on what direction to take, any help @therewasaguy?

I'm getting the following errors on AudioIn Example:

Chrome Version 79.0.3945.130

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

Firefox 73.0.1

{ 
name: "NotFoundError", 
message: "The object can not be found here.", 
constraint: "", 
stack: "" 
}

[singhvisha]

@stalgiag, Sorry for late answering.I was out of town. I would love to do.

[vilvadot]

Let me know if you need a hand @singhvisha

[vilvadot]

I have a working example here: https://github.com/vilvadot/p5-mic-example/blob/master/src/sketch.js

Haven't been able to make it work on Firefox though.

[endurance21]

Change was made to the inline examples here processing/p5.js-sound#403 processing/p5.js#3988

and now the examples that live in the website repo also should be updated. The examples should be re-designed to follow the best practice of starting audio (i.e. with userStartAudio()) on a user gesture, i.e. within mousePressed(){}

@therewasaguy all examples should be re-designed, is the work still undonen ? and if yes! you can assign me , i would love to work ! thanks

[therewasaguy]

@endurance21 yes, we can follow the rewrite that went into the inline examples. https://github.com/processing/p5.js-sound/pull/403 should provide some guidance on how to redesign the examples—thank you for finding and linking that! I apologize I did not already link this in the thread!