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

【问题标题】：Unexpected Identifier Error when Importing a local file into AudioWorkletProcessor File将本地文件导入 AudioWorkletProcessor 文件时出现意外的标识符错误
【发布时间】：2021-01-09 07:09:20
【问题描述】：

我目前正在使用 Angular 构建视频会议应用程序。在我的一项服务中，我尝试合并网络音频 api。问题是当我尝试使用addModule(AudioWorkletProcessorFileName.js) 函数向音频工作集添加脚本时，它会抛出SyntaxError: Unexpected Identifier。我发现只有当我尝试将另一个文件导入AudioWorkletProcessorFileName.js 时才会发生这种情况。当我删除 import 语句时，一切正常。我想导入更复杂的代码，但我想从更简单的test.js 版本开始（我想导入的文件）。我不确定为什么会这样。我是否缺少 Angular 中的一些配置设置或其他内容？

在 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];
    }
}

在 audio-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
};

【问题讨论】：

您好 mwong，您可以在 Firefox 中测试代码吗？不幸的是，Firefox 还不支持 AudioWorklets 中的 import 语句。
我一直用 Chrome。
我刚刚在 Chrome 的一个 Angular 应用程序中测试了这个。这个对我有用。我可以看到日志语句。
嗯，非常有趣...你能给我发一个你的 Angular 应用程序的链接吗，因为我想看看你是如何构建它的，以及是否有任何 Angular 配置设置与我的不同？我创建了一个新项目进行测试，但仍然遇到同样的错误。
你能把你新的 Angular 应用上传到某个地方（可能是 Bitbucket 或 GitHub）吗？我在现有的 Angular 应用程序中对其进行了测试。我必须先创建一个干净的示例。谢谢。

标签： angular syntax-error web-audio-api

【解决方案1】：

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

【讨论】：