Squashed commit of the following:

commit 01a62b36a484d65664a641c4db2a7f3373251b47
Merge: 10edf06898 74961dbfb1
Author: Johannes Marbach <johannesm@element.io>
Date:   Mon Nov 13 19:38:47 2023 +0100

    Merge branch 'johannes/webpack5-workers' into johannes/worklet-path

commit 10edf068980f11b99bf2b18dce72e27065fd5727
Author: Johannes Marbach <johannesm@element.io>
Date:   Sun Nov 12 12:21:43 2023 +0100

    Document syntax and use .ts

commit 4040f2ce4121ddaf5254cb68e2e9b8716b0431d0
Author: Johannes Marbach <johannesm@element.io>
Date:   Sat Nov 11 21:38:09 2023 +0100

    Switch to URL and use syntax compatible with Webpack

commit b4f96f17cc1819bd84b8e6735a8c3f69948e97c4
Merge: eed2ffdc1c 94484692f8
Author: Johannes Marbach <johannesm@element.io>
Date:   Thu Nov 9 21:04:06 2023 +0100

    Merge branch 'develop' into johannes/worklet-path

commit eed2ffdc1c27e8748719b64e002c44e3dc6500e7
Author: Johannes Marbach <johannesm@element.io>
Date:   Thu Nov 9 21:03:45 2023 +0100

    Restore unused import to fix dead code analysis

commit 689cea2f061120070f3db405289bd9ded108def5
Author: Johannes Marbach <johannesm@element.io>
Date:   Thu Nov 9 16:50:56 2023 +0100

    Use literal path in audioWorklet.addModule for compatibility with Webpack 5
This commit is contained in:
Johannes Marbach 2023-11-13 19:39:45 +01:00
parent 74961dbfb1
commit 64ba0b4130

View file

@ -28,6 +28,10 @@ import { UPDATE_EVENT } from "../stores/AsyncStore";
import { createAudioContext } from "./compat";
import { FixedRollingArray } from "../utils/FixedRollingArray";
import { clamp } from "../utils/numbers";
// This import is needed for dead code analysis but not actually used because the
// built-in worker / worklet handling in Webpack 5 only supports static paths
// @ts-ignore no-unused-locals
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import mxRecorderWorkletPath from "./RecorderWorklet";
const CHANNELS = 1; // stereo isn't important
@ -129,7 +133,13 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
if (this.recorderContext.audioWorklet) {
// Set up our worklet. We use this for timing information and waveform analysis: the
// web audio API prefers this be done async to avoid holding the main thread with math.
await this.recorderContext.audioWorklet.addModule(mxRecorderWorkletPath);
// The audioWorklet.addModule syntax is required for Webpack 5 to correctly recognise
// this as a worklet rather than an asset. This also requires the parser.javascript.worker
// configuration described in https://github.com/webpack/webpack.js.org/issues/6869.
const audioWorklet = this.recorderContext.audioWorklet;
await audioWorklet.addModule(new URL("./RecorderWorklet.ts", import.meta.url));
this.recorderWorklet = new AudioWorkletNode(this.recorderContext, WORKLET_NAME);
this.recorderSource.connect(this.recorderWorklet);
this.recorderWorklet.connect(this.recorderContext.destination);