Offload some more waveform processing onto a worker (#9223)

src/workers/blurhash.worker.ts

@@ -16,14 +16,19 @@ limitations under the License.
 
 import { encode } from "blurhash";
 
+import { WorkerPayload } from "./worker";
+
 const ctx: Worker = self as any;
 
-interface IBlurhashWorkerRequest {
-    seq: number;
+export interface Request {
     imageData: ImageData;
 }
 
-ctx.addEventListener("message", (event: MessageEvent<IBlurhashWorkerRequest>): void => {
+export interface Response {
+    blurhash: string;
+}
+
+ctx.addEventListener("message", (event: MessageEvent<Request & WorkerPayload>): void => {
     const { seq, imageData } = event.data;
     const blurhash = encode(
         imageData.data,

src/workers/playback.worker.ts

@@ -0,0 +1,42 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { WorkerPayload } from "./worker";
+import { arrayRescale, arraySmoothingResample } from "../utils/arrays";
+import { PLAYBACK_WAVEFORM_SAMPLES } from "../audio/consts";
+
+const ctx: Worker = self as any;
+
+export interface Request {
+    data: number[];
+}
+
+export interface Response {
+    waveform: number[];
+}
+
+ctx.addEventListener("message", async (event: MessageEvent<Request & WorkerPayload>): Promise<void> => {
+    const { seq, data } = event.data;
+
+    // First, convert negative amplitudes to positive so we don't detect zero as "noisy".
+    const noiseWaveform = data.map((v) => Math.abs(v));
+
+    // Then, we'll resample the waveform using a smoothing approach so we can keep the same rough shape.
+    // We also rescale the waveform to be 0-1 so we end up with a clamped waveform to rely upon.
+    const waveform = arrayRescale(arraySmoothingResample(noiseWaveform, PLAYBACK_WAVEFORM_SAMPLES), 0, 1);
+
+    ctx.postMessage({ seq, waveform });
+});

src/workers/worker.ts

@@ -0,0 +1,19 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export interface WorkerPayload {
+    seq: number;
+}