我正在编写一个包装类,隐藏了使用AudioWorklet的内部工作。使用worklet涉及通过消息端口在节点和处理器之间进行通信。
一旦在节点中运行的代码到达port.postMessage(),节点中的脚本执行就会结束。当node.port.onmessage触发时(通过processor.port.postMessage),节点中的代码可以继续执行。
我可以使用回调函数让它工作。请参阅下面的代码。
class HelloWorklet {
constructor(audioContext) {
audioContext.audioWorklet.addModule('helloprocessor.js').then(() => {
this.awNode = new AudioWorkletNode(audioContext, 'hello-processor');
this.awNode.port.onmessage = (event) => {
switch (event.data.action) {
case 'response message':
this.respondMessage(event.data);
break;
}
}
});
}
requestMessage = (callback) => {
this.awNode.port.postMessage({action: 'request message'});
this.callback = callback;
}
respondMessage = (data) => {
// some time consuming processing
let msg = data.msg + '!';
this.callback(msg);
}
}
let audioCtx = new AudioContext();
let helloNode = new HelloWorklet(audioCtx);
const showMessage = (msg) => {
// additional processing
console.log(msg);
}
const requestMessage = () => {
helloNode.requestMessage(showMessage);
}
和处理器
class HelloProcessor extends AudioWorkletProcessor {
constructor() {
super();
this.port.onmessage = (event) => {
switch (event.data.action) {
case 'request message':
this.port.postMessage({action: 'response message', msg: 'Hello world'});
break;
}
}
}
process(inputs, outputs, parameters) {
// required method, but irrelevant for this question
return true;
}
}
registerProcessor('hello-processor', HelloProcessor);
调用requestMessage()
会导致Hello world!
在控制台中打印出来。由于使用回调有时会降低代码的可读性,我想使用await
重写代码,如下所示:
async requestMessage = () => {
let msg = await helloNode.requestMessage;
// additional processing
console.log(msg);
}
试图重写HelloWorklet.requestMessage
我无法弄清楚如何将resolve
的Promise
粘贴到this.awNode.port.onmessage
。对我来说,似乎this.awNode.port.postMessage
和this.awNode.port.onmessage
之间的代码中断超出了同步性。
由于使用AudioWorklet已经打破了任何向后兼容性,因此可以使用最新的ECMAScript功能。
编辑
感谢Khaled Osman答案的第3部分,我能够按如下方式重写课程:
class HelloWorklet {
constructor(audioContext) {
audioContext.audioWorklet.addModule('helloprocessor.js').then(() => {
this.awNode = new AudioWorkletNode(audioContext, 'hello-processor');
this.awNode.port.onmessage = (event) => {
switch (event.data.action) {
case 'response message':
this.respondMessage(event.data);
break;
}
}
});
}
requestMessage = () => {
return new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
this.awNode.port.postMessage({action: 'request message'});
})
}
respondMessage = (data) => {
// some time consuming processing
let msg = data.msg + '!';
this.resolve(msg);
}
}
let audioCtx = new AudioContext();
let helloNode = new HelloWorklet(audioCtx);
async function requestMessage() {
let msg = await helloNode.requestMessage();
// additional processing
console.log(msg);
}
我认为有三件事可能会对你有所帮助
util.promisify
将NodeJS回调样式函数转换为类似的承诺const { readFile } = require('fs')
const { promisify } = require('util')
const readFilePromise = promisify(fs.readFile)
readFilePromise('test.txt').then(console.log)
或者手动创建包装函数,这些函数返回它们周围的promises,它们在回调中解析/拒绝。
class MyClass {
requestSomething() {
return new Promise((resolve, reject) => {
this.resolve = resolve
this.reject = reject
})
}
onSomethingReturned(something) {
this.resolve(something)
}
}