chrisguttandin / standardized-audio-context

A cross-browser wrapper for the Web Audio API which aims to closely follow the standard.
MIT License
673 stars 33 forks source link

import not supported in AudioWorkletGlobalScope #401

Closed charlieroberts closed 5 years ago

charlieroberts commented 5 years ago

If I include an import statement at the top of an AudioWorkletProcessor class file, I get an error using standardized-audio-context. At least in Chrome... in Firefox no error is thrown but all sound stops after adding the import statement.

Removing the import statement from the AWP gets rid of the error and sound comes through. Also, the import statement works fine using AudioWorklets in Chrome without standardized-audio-context. Not sure how hard this would be to fix, but my guess is that it's non-trivial... - Charlie

tests

index.html

<html>
<head></head>
<body></body>
<script type='module'>
    import sac from 'https://dev.jspm.io/npm:standardized-audio-context';

    window.onload = function() {
      const ctx = window.ctx = new sac.AudioContext()

      ctx.audioWorklet.addModule( './gibberish_worklet.js' ).then( node => {
        console.log( 'running...' )
        const awn = window.awn = new sac.AudioWorkletNode( ctx, 'gibberish', { outputChannelCount:[2] })
        awn.connect( ctx.destination ) 
        console.log( 'connected', awn )
      })
    }
</script>
</html>

gibberish_worklet.js

import Gibberish from './gibberish.js'

class GibberishProcessor extends AudioWorkletProcessor {
  constructor( options ) {
    console.log( 0 )

    super( options )
  }

  process(inputs, outputs, parameters) {
    const output = outputs[ 0 ]
    const len = outputs[0][0].length

    for (let i = 0; i < len; ++i) {
      output[0][ i ] = -1 + Math.random() * 2
      output[1][ i ] = -1 + Math.random() * 2
    }

    return true
  }
}

registerProcessor( 'gibberish', GibberishProcessor )

gibberish.js

const test = { a: 1 }

export default test
chrisguttandin commented 5 years ago

Hi Charlie, I can reproduce the issue.

It is a tricky one. The code of an AudioWorkletProcessor gets wrapped in an immediately invoked function to cover some minor bugs that exist in Chrome. But an import statement can't be inside of a function it needs to be the first thing in a script. I guess I have to come up with a way to split the import statements from the rest of the code.

Making it usable for the other browsers is difficult as well as the code gets currently evaluated using a Function constructor. That has to change as well.

Long story short. It will maybe take some time. :-)

chrisguttandin commented 5 years ago

Hi Charlie, I closed the issue automatically with a commit. Please feel free to reopen it if the problem persists.

I added some tests and tried to cover all possible permutations of an import statement. But the regex is more than 200 characters long. There is a good chance that there is a bug hiding in all those characters. :-)

charlieroberts commented 5 years ago

Fantastic! I will try this out today or tomorrow and keep you posted on how it goes.

That is a ridiculous regex!!! - Charlie

charlieroberts commented 5 years ago

FYI I did finally get to this, and unfortunately while it works for simple examples (nice!), I get an error when I tried to import Gibberish. I will play around some more and see if I can figure out what the problem is.

chrisguttandin commented 5 years ago

Thanks for letting me know. Do you maybe have an example I could try? Maybe I can make sense of the error message if it is not too cryptic.