将本地文件导入AudioWorkletProcessor文件时出现意外标识符错误

Question

我目前正在使用的角度来构建一个视频会议应用程序。在我的一项服务中，我尝试整合网络音频api。问题是，当我尝试使用addModule(AudioWorkletProcessorFileName.js)函数向音频工作单元添加脚本时，它会抛出一个SyntaxError: Unexpected Identifier。我发现只有当我试图将另一个文件导入AudioWorkletProcessorFileName.js时才会发生这种情况。当我删除import语句时，一切都正常。我想导入更复杂的代码，但我想从一个更简单的test.js版本(我想导入的文件)开始。我不知道为何会这样。我是不是漏掉了一些角度上的配置设置？

在audio.service.ts中：

import { Injectable } from '@angular/core';
import { AudioContext, AudioWorkletNode } from 'standardized-audio-context';

@Injectable()
export class AudioService {
     audioCtx = new AudioContext();

     constructor() {}

     async createNewSetting(track) {
         // We need an audio context for the sound
         const srcNode = this.audioCtx.createMediaStreamTrackSource(track);
         const destNode = this.audioCtx.createMediaStreamDestination();

         // This will be the processor node
         await this.audioCtx.audioWorklet.addModule(
          './assets/worklet/audio-worklet-processor.js'
         );

         const spatialNode = new AudioWorkletNode(
             this.audioCtx,
             'spatial-processor'
         );

         // Connect the nodes
         srcNode.connect(spatialNode);
         spatialNode.connect(destNode);

         // Return the updated audio stream
         return destNode.stream.getTracks()[0];
    }
}

在音频-worklet-processor.js中：

import TEST_VAR from './test.js'; // Will throw exception when I include this

class SpatialProcessor extends AudioWorkletProcessor {

    constructor() {
        super();
        console.log("In Constructor");
    }

    process (inputs, outputs, parameters) {
        console.log("In Process");
        return true;
    }
}

registerProcessor("spatial-processor", SpatialProcessor);

在test.js中：

const TEST_VAR = 1;

export default {
    TEST_VAR
};

Answer 1

正如上面的注释中提到的，这是标准化音频上下文中的一个错误，它没有正确地解析AudioWorklet内部的相对路径。它应该在25.1.7及以上版本中修复。