feat: use noise suppression for voice messages

Signed-off-by: Maksim Sukharev <[email protected]>

Author: Antreesy

src/components/NewMessage/NewMessageAudioRecorder.vue

@@ -55,6 +55,11 @@ import IconClose from 'vue-material-design-icons/Close.vue'
 import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue'
 import { useAudioEncoder } from '../../composables/useAudioEncoder.ts'
 import { useGetToken } from '../../composables/useGetToken.ts'
+import {
+	destroyNoiseSuppressionWorklet,
+	processNoiseSuppression,
+	registerNoiseSuppressionWorklet,
+} from '../../utils/supressNoise.ts'
 import { mediaDevicesManager } from '../../utils/webrtc/index.js'
 
 export default {
@@ -173,7 +178,11 @@ export default {
 			// Create new audio stream
 			try {
 				this.audioStream = await mediaDevicesManager.getUserMedia({
-					audio: true,
+					audio: {
+						noiseSuppression: false,
+						echoCancellation: false,
+						autoGainControl: false,
+					},
 					video: false,
 				})
 			} catch (exception) {
@@ -189,7 +198,9 @@ export default {
 
 			// Create a media recorder to capture the stream
 			try {
-				this.mediaRecorder = new this.MediaRecorder(this.audioStream, {
+				await registerNoiseSuppressionWorklet()
+				const audioStreamProcessed = processNoiseSuppression(this.audioStream, true)
+				this.mediaRecorder = new this.MediaRecorder(audioStreamProcessed, {
 					mimeType: 'audio/wav',
 				})
 			} catch (exception) {
@@ -243,6 +254,7 @@ export default {
 			this.mediaRecorder.stop()
 			clearInterval(this.recordTimer)
 			this.$emit('recording', false)
+			destroyNoiseSuppressionWorklet()
 		},
 
 		/**

src/test-setup.js

@@ -48,6 +48,11 @@ vi.mock('@nextcloud/capabilities', () => ({
 	getCapabilities: vi.fn(() => mockedCapabilities),
 }))
 
+vi.mock('@sapphi-red/web-noise-suppressor', () => ({
+	loadRnnoise: vi.fn(),
+	RnnoiseWorkletNode: vi.fn(),
+}))
+
 HTMLAudioElement.prototype.setSinkId = vi.fn()
 
 window._oc_webroot = '/nc-webroot' // used by getRootUrl() | since @nextcloud/router 2.2.1

src/utils/supressNoise.ts

@@ -0,0 +1,116 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { loadRnnoise, RnnoiseWorkletNode } from '@sapphi-red/web-noise-suppressor'
+
+let audioContext: AudioContext | null = null
+let rnnoiseWorklet: RnnoiseWorkletNode | null = null
+
+/**
+ * Creates and registers global RnnoiseWorkletNode and AudioContext.
+ */
+export async function registerNoiseSuppressionWorklet() {
+	if (audioContext && rnnoiseWorklet) {
+		// Already registered
+		return
+	}
+
+	audioContext = new AudioContext()
+	const rnnoiseWasmBinary = await loadRnnoise({
+		url: new URL(
+			'../../node_modules/@sapphi-red/web-noise-suppressor/dist/rnnoise.wasm',
+			import.meta.url,
+		).pathname,
+		simdUrl: new URL(
+			'../../node_modules/@sapphi-red/web-noise-suppressor/dist/rnnoise_simd.wasm',
+			import.meta.url,
+		).pathname,
+	})
+	await audioContext.audioWorklet.addModule(new URL(
+		'../../node_modules/@sapphi-red/web-noise-suppressor/dist/rnnoise/workletProcessor.js',
+		import.meta.url,
+	).pathname)
+	rnnoiseWorklet = new RnnoiseWorkletNode(audioContext, {
+		wasmBinary: rnnoiseWasmBinary,
+		maxChannels: 2,
+	})
+}
+
+/**
+ * Destroys the global RnnoiseWorkletNode and AudioContext.
+ */
+export async function destroyNoiseSuppressionWorklet() {
+	if (rnnoiseWorklet) {
+		try {
+			rnnoiseWorklet?.disconnect()
+		} catch (error) {
+			console.error(error)
+		}
+		rnnoiseWorklet = null
+	}
+
+	if (audioContext) {
+		try {
+			await audioContext.close()
+		} catch (error) {
+			console.error(error)
+		}
+		audioContext = null
+	}
+}
+
+/**
+ * Processes the given MediaStream with noise suppression if enabled.
+ * Requires that RnnoiseWorklet has been asynchronously registered beforehand.
+ *
+ * @param stream - MediaStream to process
+ * @param enabled - Whether noise suppression is enabled
+ */
+export function processNoiseSuppression(stream: MediaStream, enabled = false): MediaStream {
+	if (!enabled) {
+		// No noise suppression requested; return the original stream
+		return stream
+	}
+
+	if (!stream.getAudioTracks().length) {
+		// No audio tracks to process; return the original stream
+		return stream
+	}
+
+	if (!audioContext || !rnnoiseWorklet) {
+		return stream
+	}
+
+	return processRnnoise(stream)
+}
+
+/**
+ * Connects the RnnoiseWorklet to the given MediaStream and returns a new MediaStream with noise suppression applied.
+ *
+ * @param stream - MediaStream to process
+ */
+export function processRnnoise(stream: MediaStream): MediaStream {
+	try {
+		const mediaStreamAudioSource = audioContext!.createMediaStreamSource(stream)
+		const mediaStreamAudioDestinationNode = audioContext!.createMediaStreamDestination()
+		mediaStreamAudioSource.connect(rnnoiseWorklet!)
+		rnnoiseWorklet!.connect(mediaStreamAudioDestinationNode)
+
+		const processedAudioTrack = mediaStreamAudioDestinationNode.stream.getAudioTracks()[0]
+		if (!processedAudioTrack) {
+			return stream
+		}
+
+		// Remove existing audio tracks from the original stream and add only the processed track
+		for (const track of stream.getAudioTracks()) {
+			stream.removeTrack(track)
+		}
+		stream.addTrack(processedAudioTrack)
+	} catch (error) {
+		console.error('Error processing noise suppression:', error)
+	}
+
+	return stream
+}