Can't get microphone capture to work reliably in Chrome

[fadookie]

Nature of issue?

• [x] Found a bug
• [ ] Existing feature enhancement
• [ ] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [ ] Image
• [x] IO (Microphone)
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Which platform were you using when you encountered this?

• [ ] Mobile/Tablet (touch devices)
• [x] Desktop/Laptop
• [ ] Others (specify if possible)

Details about the bug:

• p5.js version: p5.js v0.9.0 July 01, 2019
• Web browser and version: Crome 78.0.3904.70 (Official Build) (64-bit)
• Operating System: macOS 10.14.6 (18G103)
• Steps to reproduce this:

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

In the web 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. This may be 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.

(This is a clone of https://github.com/processing/processing-sound/issues/48 which was filed against p5.js core repo. Please see discussion thread on original issue for more repro info.)

[endurance21]

@fadookie I tested the same sketch with latest code of p5.sound but the problem still persist , i think this is issue with web-editor , we only face problem in test and presentation mode ! @lmccart can you please guide me understanding the mechanism of "test" and "presentation" mode used in web-editor ?

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[catarak]

Thanks for reporting! I'm... honestly not sure this is an issue with the web editor? If the behavior persists when you download and run the sketch locally (outside of the web editor), I think that would point to an issue with p5.sound. Looking at @stalgiag's comment, it seems like p5.sound is trying to create an AudioContext without any user interaction.

[bigrig2212]

Same problem here. Working intermittently. I loaded the sound lib JS on button click and it works.

$("#button").click(function(){
  $.getScript( "/lib/addons/p5.sound.min.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
    console.log('started');
    mic = new p5.AudioIn();
    mic.start();
    fft = new p5.FFT();
    fft.setInput(mic);
    started = true;
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
  });
});

[mikevadeyo]

Same problem here. Working intermittently. I loaded the sound lib JS on button click and it works.

$("#button").click(function(){
  $.getScript( "/lib/addons/p5.sound.min.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
    console.log('started');
    mic = new p5.AudioIn();
    mic.start();
    fft = new p5.FFT();
    fft.setInput(mic);
    started = true;
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
  });
});

I'm having the same issue. Where do you add this code?