[wip] feat: use noise-suppressor for voice messages

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

Author: Antreesy

rspack.config.js

@@ -182,6 +182,10 @@ module.exports = defineConfig((env) => {
 					resourceQuery: /raw/,
 					type: 'asset/source',
 				},
+				{
+					resourceQuery: /url$/,
+					type: 'asset/resource',
+				},
 			],
 		},
 

src/components/NewMessage/NewMessageAudioRecorder.vue

@@ -56,6 +56,7 @@ import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.v
 import { useAudioEncoder } from '../../composables/useAudioEncoder.ts'
 import { useGetToken } from '../../composables/useGetToken.ts'
 import { mediaDevicesManager } from '../../utils/webrtc/index.js'
+import { processNoiseSuppression } from '../../utils/supressNoise.ts'
 
 export default {
 	name: 'NewMessageAudioRecorder',
@@ -173,7 +174,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 +194,10 @@ export default {
 
 			// Create a media recorder to capture the stream
 			try {
-				this.mediaRecorder = new this.MediaRecorder(this.audioStream, {
+				// const audioStreamProcessed = await processNoiseSuppression(this.audioStream, 'none')
+				const audioStreamProcessed = await processNoiseSuppression(this.audioStream, 'rnnoise')
+
+				this.mediaRecorder = new this.MediaRecorder(audioStreamProcessed, {
 					mimeType: 'audio/wav',
 				})
 			} catch (exception) {

src/types/vendor/@sapphi-red_web-noise-suppressor.d.ts

@@ -0,0 +1,8 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+declare module '@sapphi-red/web-noise-suppressor/rnnoiseWorklet.js?url'
+declare module '@sapphi-red/web-noise-suppressor/rnnoise.wasm?url'
+declare module '@sapphi-red/web-noise-suppressor/rnnoise_simd.wasm?url'

src/utils/supressNoise.ts

@@ -0,0 +1,32 @@
+import {
+	RnnoiseWorkletNode,
+	loadRnnoise,
+} from '@sapphi-red/web-noise-suppressor'
+
+import rnnoiseWorkletPath from '@sapphi-red/web-noise-suppressor/rnnoiseWorklet.js?url'
+import rnnoiseWasmPath from '@sapphi-red/web-noise-suppressor/rnnoise.wasm?url'
+import rnnoiseWasmSimdPath from '@sapphi-red/web-noise-suppressor/rnnoise_simd.wasm?url'
+
+type NoiseSuppressorModel = 'rnnoise' | 'none'
+
+export async function processNoiseSuppression(stream: MediaStream, model: NoiseSuppressorModel): Promise<MediaStream> {
+	if (model === 'rnnoise') {
+		const audioContext = new AudioContext()
+		const rnnoiseWasmBinary = await loadRnnoise({
+			url: rnnoiseWasmPath,
+			simdUrl: rnnoiseWasmSimdPath
+		})
+		await audioContext.audioWorklet.addModule(rnnoiseWorkletPath)
+		const mediaStreamAudioSource = audioContext.createMediaStreamSource(stream)
+		const mediaStreamAudioDestinationNode = audioContext.createMediaStreamDestination()
+		const rnnoise = new RnnoiseWorkletNode(audioContext, {
+			wasmBinary: rnnoiseWasmBinary,
+			maxChannels: 2
+		})
+		mediaStreamAudioSource.connect(rnnoise)
+		rnnoise.connect(mediaStreamAudioDestinationNode)
+		return mediaStreamAudioDestinationNode.stream
+	}
+
+	return stream
+}