Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Web Audio onaudioprocess works in Firefox, JSFiddle in Chrome, but not Chrome Itself

I'm working in Chrome 39.0.2171.71 (64-bit) on a WebAudio/WebMIDI app. I have the jazz-soft webmidi plugin installed.

I'm having trouble getting onaudioprocess to fire at all. I've stripped things down to the most basic code:

<!DOCTYPE html>
<html lang="en">
    <head></head>
    <body>
        Page Loaded.
        <script>
             var context;
             if (window.AudioContext) {
                 context = new AudioContext(); 
             } else {
                 context = new webkitAudioContext(); 
             }
             console.log('Javascript is working.');

             oscillator = context.createOscillator();
             oscillator.start(0);

             myscriptnode = context.createScriptProcessor(4096, 1, 1);
             myscriptnode.onaudioprocess = function(event) {
                  console.log('ONAUDIOPROCESS works!');
             };

             oscillator.connect(myscriptnode);
         </script>
     </body>
</html>

This works in Firefox. In fact, most of the things I've been playing with have worked in Firefox, but not in Chrome. However, the following two examples work for me in JSFiddle running in Chrome:

http://jsfiddle.net/78yKV/3/ (this example runs but seems to be slow/spotty with the onaudioprocess callback, and it cuts out sometimes and needs to be restarted.)

http://jsfiddle.net/99rxd/ (for this example, I have to add a third argument of function(){console.log('error');} to getUserMedia() to make it run. This gives me an uncaught reference error of r undefined when I start it, but it then runs and the onaudioprocess callback works reliably.)

Things I've Tried

I've searched exhaustively, and it seems like there are some Chrome scope issues with createScriptProcessor. I've tried everything to scope my process global (declaring it at the top, declaring without 'var', setting myscriptnode.onaudioprocess = window.audioProcess = function(event)) and nothing has worked. Everything has worked in Firefox.

The only reason I'm holding on to hope is because of the working JSFiddle examples. It seemed like the main reason code works in JSFiddle and not in the browser has to do with waiting for the DOM to load. I doubt this is the problem, but I tried putting my javascript in (function( /code/)();, adding an oninit() function to the body tag and putting my code in function init(){}, etc. with no luck.

I have no idea what is going on. If it works in JSFiddle, shouldn't I be able to make it work in the browser? Is there another way to change the scope so my eventhandler doesn't get garbage collected (which is what I am assuming is the problem)... or is there something more basic going wrong? I have yet to see even one callback using onaudioprocess work from the browser, which makes me feel like perhaps it is more basic than the scope/garbage collection problem. Could it be the jazz-soft plugin?

Thanks for the help!

like image 464
dramsay Avatar asked Mar 17 '23 17:03

dramsay


1 Answers

Chrome still has a bug where the script processor needs to be connected to the destination.

Add "myscriptnode.connect(context.destination);" to the end, and I think you'll find it works as expected.

like image 137
cwilso Avatar answered Apr 25 '23 12:04

cwilso