」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何使用 Web 音訊 API 防止語音轉錄中的說話者回饋

如何使用 Web 音訊 API 防止語音轉錄中的說話者回饋

發佈於2024-08-21
瀏覽:845

How to Prevent Speaker Feedback in Speech Transcription Using Web Audio API

最近我需要弄清楚另一件事,將我的 Assembly.ai 轉錄引擎連接到聲音很大的前端。

這是我嘗試過的:

  1. 請求使用迴聲消除功能的麥克風存取權限。
  2. 使用 Web Audio API 設定音訊處理鏈。
  3. 將此設定與語音辨識整合。
  4. 利用 DynamicsCompressorNode 進行額外的音訊處理。

步驟 1: 請求使用迴聲消除功能的麥克風存取權限

第一步是請求存取啟用了迴聲消除的麥克風。此功能內建於大多數現代瀏覽器中,有助於減少揚聲器的回饋。

async function getMicrophoneStream() {
    const constraints = {
        audio: {
            echoCancellation: true,
            noiseSuppression: true,
            autoGainControl: true
        }
    };

    try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        return stream;
    } catch (err) {
        console.error('Error accessing the microphone', err);
        return null;
    }
}

解釋

  • 約束:我們指定音頻約束以啟用迴聲消除、噪音抑制和自動增益控制。
  • 錯誤處理:如果使用者拒絕存取或有任何其他問題,我們會擷取並記錄錯誤。

第 2 步:設定 Web 音訊 API 節點

接下來,我們設定 Web Audio API 來處理音訊串流。這涉及建立 AudioContext 並連接各個節點,包括 DynamicsCompressorNode。

async function setupAudioProcessing(stream) {
    const audioContext = new AudioContext();
    const source = audioContext.createMediaStreamSource(stream);

    // Create a DynamicsCompressorNode for additional processing
    const compressor = audioContext.createDynamicsCompressor();
    compressor.threshold.setValueAtTime(-50, audioContext.currentTime); // Example settings
    compressor.knee.setValueAtTime(40, audioContext.currentTime);
    compressor.ratio.setValueAtTime(12, audioContext.currentTime);
    compressor.attack.setValueAtTime(0, audioContext.currentTime);
    compressor.release.setValueAtTime(0.25, audioContext.currentTime);

    // Connect nodes
    source.connect(compressor);
    compressor.connect(audioContext.destination);

    return { audioContext, source, compressor };
}

解釋

  • AudioContext:表示音訊環境。
  • MediaStreamSource:將麥克風流連接到音訊上下文。
  • DynamicsCompressorNode:降低音訊訊號的動態範圍,有助於管理背景雜訊和回饋。

第 3 步:與語音辨識集成

最後,我們將音訊處理設定與 Web Speech API 整合以執行語音辨識。

async function startSpeechRecognition() {
    const stream = await getMicrophoneStream();
    if (!stream) return;

    const { audioContext, source, compressor } = await setupAudioProcessing(stream);

    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
    recognition.continuous = true;
    recognition.interimResults = true;

    recognition.onresult = (event) => {
        for (let i = event.resultIndex; i  {
        console.error('Speech recognition error', event.error);
    };

    recognition.start();

    // Handle audio context resume if needed
    if (audioContext.state === 'suspended') {
        audioContext.resume();
    }

    return recognition;
}

// Start the speech recognition process
startSpeechRecognition();

解釋

  • 語音辨識設定:我們設定了用於連續和暫時語音辨識的 Web Speech API。
  • 事件處理:我們處理onresult和onerror事件來處理識別結果和錯誤。
  • 開始辨識:我們啟動語音辨識流程並確保音訊情境不會暫停。

希望您發現這很有用。

編碼愉快!

提姆。

版本聲明 本文轉載於:https://dev.to/fosteman/how-to-prevent-speaker-feedback-in-speech-transcription-using-web-audio-api-2da4?1如有侵犯,請聯絡study_golang@163 .com刪除
最新教學 更多>
  • 如何使用 JSTL 迭代 HashMap 中的 ArrayList?
    如何使用 JSTL 迭代 HashMap 中的 ArrayList?
    使用JSTL 迭代HashMap 中的ArrayList在Web 開發中,JSTL(JavaServer Pages 標準標記庫)提供了一組標記來簡化JSP 中的常見任務( Java 伺服器頁面)。其中一項任務是迭代資料結構。 要迭代 HashMap 及其中包含的 ArrayList,可以使用 JS...
    程式設計 發佈於2024-11-05
  • Encore.ts — 比 ElysiaJS 和 Hono 更快
    Encore.ts — 比 ElysiaJS 和 Hono 更快
    几个月前,我们发布了 Encore.ts — TypeScript 的开源后端框架。 由于已经有很多框架,我们想分享我们做出的一些不常见的设计决策以及它们如何带来卓越的性能数据。 性能基准 我们之前发布的基准测试显示 Encore.ts 比 Express 快 9 倍,比 Fasti...
    程式設計 發佈於2024-11-05
  • 為什麼使用 + 對字串文字進行字串連接失敗?
    為什麼使用 + 對字串文字進行字串連接失敗?
    連接字串文字與字串在 C 中,運算子可用於連接字串和字串文字。但是,此功能存在限制,可能會導致混亂。 在問題中,作者嘗試連接字串文字「Hello」、「,world」和「!」以兩種不同的方式。第一個例子:const string hello = "Hello"; const str...
    程式設計 發佈於2024-11-05
  • React 重新渲染:最佳效能的最佳實踐
    React 重新渲染:最佳效能的最佳實踐
    React高效率的渲染機制是其受歡迎的關鍵原因之一。然而,隨著應用程式複雜性的增加,管理元件重新渲染對於最佳化效能變得至關重要。讓我們探索優化 React 渲染行為並避免不必要的重新渲染的最佳實踐。 1. 使用 React.memo() 作為函數式元件 React.memo() 是...
    程式設計 發佈於2024-11-05
  • 如何實作條件列建立:探索 Pandas DataFrame 中的 If-Elif-Else?
    如何實作條件列建立:探索 Pandas DataFrame 中的 If-Elif-Else?
    Creating a Conditional Column: If-Elif-Else in Pandas給定的問題要求將新列新增至DataFrame 中基於一系列條件標準。挑戰在於在實現這些條件的同時保持程式碼效率和可讀性。 使用函數應用程式的解決方案一種方法涉及創建一個將每一行映射到所需結果的函...
    程式設計 發佈於2024-11-05
  • 介紹邱!
    介紹邱!
    我很高興地宣布發布 Qiu – 一個嚴肅的 SQL 查詢運行器,旨在讓原始 SQL 再次變得有趣。老實說,ORM 有其用武之地,但當您只想編寫簡單的 SQL 時,它們可能會有點不知所措。我一直很喜歡寫原始 SQL 查詢,但我意識到我需要練習——大量的練習。這就是Qiu發揮作用的地方。 有了 Qiu...
    程式設計 發佈於2024-11-05
  • 為什麼 CSS 中的 Margin-Top 百分比是根據容器寬度計算的?
    為什麼 CSS 中的 Margin-Top 百分比是根據容器寬度計算的?
    CSS 中的 margin-top 百分比計算CSS 中的 margin-top 百分比計算當對元素應用 margin-top 百分比時,必須了解計算方式執行。與普遍的看法相反,邊距頂部百分比是根據包含塊的寬度而不是其高度來確定的。 W3C 規範解釋:W3C 規範解釋:根據W3C 規範,“百分比是根...
    程式設計 發佈於2024-11-05
  • 如何解決 CSS 轉換期間 Webkit 文字渲染不一致的問題?
    如何解決 CSS 轉換期間 Webkit 文字渲染不一致的問題?
    解決CSS 轉換期間的Webkit 文本渲染不一致在CSS 轉換期間,特別是縮放元素時,Webkit 中可能會出現文本渲染不一致的情況瀏覽器。這個問題源自於瀏覽器嘗試優化渲染效能。 一種解決方案是透過添加以下屬性來強制對過渡元素的父元素進行硬體加速:-webkit-transform: transl...
    程式設計 發佈於2024-11-05
  • 使用 Reactables 簡化 RxJS
    使用 Reactables 簡化 RxJS
    介紹 RxJS 是一個功能強大的庫,但眾所周知,它的學習曲線很陡峭。 這個函式庫龐大的 API 介面,再加上向反應式程式設計的典範轉移,可能會讓新手不知所措。 我創建了 Reactables API 來簡化 RxJS 的使用並簡化開發人員對反應式程式設計的介紹。 ...
    程式設計 發佈於2024-11-05
  • 如何在 Pandas 中找到多列的最大值?
    如何在 Pandas 中找到多列的最大值?
    找出 Pandas 中多列的最大值要確定 pandas DataFrame 中多列的最大值,可以採用多種方法。以下是實現此目的的方法:對指定列使用max() 函數此方法涉及明確選擇所需的列並應用max() 函數: df[["A", "B"]] df[[&quo...
    程式設計 發佈於2024-11-05
  • CI/CD 入門:自動化第一個管道的初學者指南(使用 Jenkins)
    CI/CD 入門:自動化第一個管道的初學者指南(使用 Jenkins)
    目錄 介紹 什麼是 CI/CD? 持續整合(CI) 持續交付(CD) 持續部署 CI/CD 的好處 更快的上市時間 提高程式碼品質 高效率協作 提高自動化程度和一致性 如何建立您的第一個 CI/CD 管道 第 1 步:設定版本控制 (GitHub) 步驟 2: 選擇 CI/CD ...
    程式設計 發佈於2024-11-05
  • TypeScript 如何讓 JavaScript 在大型專案中更加可靠。
    TypeScript 如何讓 JavaScript 在大型專案中更加可靠。
    介绍 JavaScript 广泛应用于 Web 开发,现在也被应用于不同行业的大型项目中。然而,随着这些项目的增长,管理 JavaScript 代码变得更加困难。数据类型不匹配、运行时意外错误以及代码不清晰等问题可能会导致查找和修复错误变得困难。 这就是TypeScript介入的地...
    程式設計 發佈於2024-11-05
  • 如何使用PHP的password_verify函數安全地驗證使用者密碼?
    如何使用PHP的password_verify函數安全地驗證使用者密碼?
    使用 PHP 解密加密密碼許多應用程式使用密碼雜湊等加密演算法安全地儲存使用者密碼。然而,在驗證登入嘗試時,將輸入密碼與加密的儲存版本進行比較非常重要。 加密問題password_hash 使用 Bcrypt,一元加密演算法方式雜湊演算法,表示加密的密碼無法逆轉或解密。這是一項安全功能,可確保即使資...
    程式設計 發佈於2024-11-05
  • 學習 Vue 部分 建立天氣應用程式
    學習 Vue 部分 建立天氣應用程式
    深入研究 Vue.js 就像在 DIY 工具包中發現了一個新的最喜歡的工具——直觀、靈活,而且功能強大得驚人。我接觸 Vue 的第一個副業專案是一個天氣應用程序,它教會了我很多關於框架功能以及一般 Web 開發的知識。這是我到目前為止所學到的。 1. Vue 入門:簡單與強大 Vu...
    程式設計 發佈於2024-11-05
  • NFT 預覽卡組件
    NFT 預覽卡組件
    ?剛剛完成了我的最新專案:使用 HTML 和 CSS 的「NFT 預覽卡元件」! ?查看並探索 GitHub 上的程式碼。歡迎反饋! ? GitHub:[https://github.com/khanimran17/NFT-preview-card-component] ?現場示範:[https:...
    程式設計 發佈於2024-11-05

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3