Как заставить AudioWorklets работать с vue-cli / webpack / babel?(получение ошибки недопустимого вызова) - PullRequest
Новая
       10

Как заставить AudioWorklets работать с vue-cli / webpack / babel?(получение ошибки недопустимого вызова)

0 голосов
/ 15 декабря 2018

Я пытаюсь создать WebApp с vue-cli, который использует AudioWorklets, но я получаю кучу ошибок при попытке получить доступ к любому свойству моего AudioWorkletNode, например, port или channelCount и т. Д .: 

TypeError: Illegal invocation at MyWorkletNode.invokeGetter

После нескольких часов поиска в Google и отладки, я думаю, что это как-то связано с классами, кажется, что AudioWorklet работает только с классами ES6, но один из vue-cli / babel / webpack делает свое волшебство (чего я не понимаю, где и что он делает) и переносит классы в обычные функции конструктора или что-то в этом роде.Или, может быть, это загрузчик worklet, который делает транспиляцию?Я не знаю, я в полном неведении и понятия не имею, где искать.

Если я пишу код без каких-либо упаковщиков, просто ванильный JS, он работает, я не получаю никаких ошибок,Но мне нужно использовать AudioWorklets в моем проекте vue, так какие у меня варианты?Что-нибудь лучше, чем отключение классовой транспортировки?Если нет, то где и как я могу его отключить? 

// main.js
import worklet from 'worklet-loader!./processor.js'

class MyWorkletNode extends AudioWorkletNode {
  constructor(context) {
    super(context, 'my-worklet-processor');
    // Throws TypeError: Illegal invocation
    console.log(this.channelCount);
  }
}

this.audioCtx.audioWorklet.addModule(worklet).then(() => {
  let node = new MyWorkletNode(this.audioCtx);
  console.log("Loaded!");

  // Throws TypeError: Illegal invocation
  node.port.onmessage = event => {
    console.log(event.data);
  };
}).catch(e => console.log(`${e.name}: ${e.message}`));


// processor.js
class MyWorkletProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
    this.port.postMessage('hello!');
  }

  process(inputs, outputs, parameters) {
    // audio processing code here.
  }
}

registerProcessor('my-worklet-processor', MyWorkletProcessor);

1 Ответ

0 голосов
/ 25 февраля 2019

Трудно сказать, что здесь не так без кода.Части Worklet выглядят правильно.

Но чтобы ответить на общий вопрос (для потомков), процессор должен быть в отдельном пакете, загруженном в его собственный контекст.Когда вы используете worklet-loader, импорт - это просто URL. 

import MyWorkletProceessor from 'worklet-loader!./path/MyWorkletProcessor'

console.log(MyWorkletProcessor) 

>5b91ba45c32d94f52b3a.worklet.js

Я не рекомендую использовать встроенный загрузчик, поскольку он по умолчанию помещает артефакт в корневой каталог dist, что может вызвать проблемы с развертыванием.,

Вот пошаговое руководство по базовой настройке. 

// vue-config.js
configureWebpack: {
  module: {
    rules: [
      {
        test: /Worklet\.js$/,  <---- change this to match your filename conventions
        loader: 'worklet-loader',
        options: {
          name: 'js/[hash].worklet.js'
        }
      }
    ]
  }
}

// somewhere in vue code
import MyWorkletProcessor from './path/MyWorkletProcessor'
import MyWorkletNode from './path/MyWorkletNode'
...

try {
  await context.audioWorklet.addModule(MyWorkletProcessor)
  myWorkletNode = new MyWorkletNode(context)
  // or if no custom node
  // myWorkletNode = new AudioWorkletNode(context, 'my-worklet-processor') 
} catch (error) {
  // ...
}
// connect the workletNode input to a source node
someSourceNode.connect(myWorkletNode )
// connect the worklet output to some other node or destination
myWorkletNode.connect(context.destination)

// MyWorkletNode.js
export default class MyWorkletNode extends AudioWorkletNode {
   constructor(context) {
    super(context, 'my-worklet-processor')
    console.log(this.channelCount)
  }
}

// MyWorkletProcessor.js
class MyWorkletProcessor extends AudioWorkletProcessor {
  constructor() {
    super()
    this.port.postMessage('hello!')
  }

  process(inputs, outputs, parameters) {
    // audio processing code here.
    return true
  }
}
registerProcessor('my-worklet-processor', MyWorkletProcessor)

Я также создал связанное демонстрационное приложение , которое показывает рабочие пакеты, запущенные в vue.

...