I am developing a web application using Next.js 14 where a narration (probably using text-to-speech) is ongoing, and I need the app to automatically pause the narration when a user speaks and then resume it once the user stops speaking.
Context:
The app is being built with Next.js 14. The narration is an integral part of the app, possibly using a text-to-speech service. I am looking for a way to detect when the user starts speaking so that the app can pause the narration. Similarly, when the user stops speaking, the narration should resume. The main challenge is to detect the user's speech in real-time and distinguish it from the ongoing narration or any other background noise. Current Implementation:
I've set up the basic framework of the app and the narration feature. I am currently exploring how to integrate real-time user speech detection.
Questions:
What are the possible approaches or techniques to detect user speech in real-time and differentiate it from the narration within a Next.js environment? Are there specific libraries or APIs that facilitate this kind of functionality, especially in the context of a Next.js application? If anyone has implemented a similar feature or has insights into handling such real-time audio processing in a web app, could you share your experiences or suggestions? Any guidance or references to similar implementations would be greatly appreciated, as I am looking for the most efficient and reliable way to achieve this functionality in my Next.js application.