O vosk-browser é uma ferramenta de reconhecimento de fala executada no navegador, desenvolvida com base na tecnologia WebAssembly, usando a biblioteca de reconhecimento de fala Vosk. Ele suporta o processamento de entrada de microfone ou arquivos de áudio diretamente no navegador, fornecendo funcionalidade de fala para texto off-line sem depender de servidores em nuvem. A ferramenta é compatível com 13 idiomas, incluindo inglês, alemão, francês, espanhol etc., e é adequada para desenvolvedores que precisam implementar o reconhecimento de fala no navegador. O vosk-browser é executado por meio do WebWorker, que otimiza o desempenho e evita o bloqueio do thread principal do navegador. Os usuários podem carregar o modelo e iniciar o reconhecimento de fala com um simples código JavaScript, o que o torna adequado para cenários como chatbots, casas inteligentes ou geração de legendas. Desenvolvido por Ciaran O'Reilly, o projeto está hospedado no GitHub e tem mais de 450 estrelas e uma comunidade ativa.
Lista de funções
- reconhecimento de fala off-lineEntrada de voz no navegador sem a necessidade de uma conexão com a Internet, protegendo a privacidade do usuário.
- Suporte a vários idiomasO modelo é extensível: inglês, alemão, francês, espanhol e 13 outros idiomas são suportados.
- Entrada de microfone e arquivo de áudioProcessamento de entrada de microfone ao vivo ou arquivos de áudio carregados.
- Otimização do WebAssemblyExecuta o WebAssembly e o WebWorker, garantindo que ele seja eficiente e não bloqueie o navegador.
- integração simplesInstalação via CDN ou npm, suporte para incorporação rápida de páginas da Web.
- Saída de resultados em tempo realReconhecimento parcial e em tempo real: fornece resultados de reconhecimento parcial e em tempo real, adequados para cenários de interação dinâmica.
- Carregamento flexível de modelosSuporte para carregar modelos de idiomas diferentes, que são armazenados em um formato compactado e têm tamanho reduzido.
Usando a Ajuda
Processo de instalação
O vosk-browser é muito fácil de usar e os desenvolvedores podem integrá-lo às páginas da Web das seguintes maneiras:
- Introduzido via CDN::
Adicione o seguinte código ao arquivo HTML para carregar a biblioteca vosk-browser na página:<script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vosk-browser@0.0.5/dist/vosk.js"></script>
Depois de carregar o
Vosk
As variáveis globais podem ser usadas em JavaScript. A versão mais recente é a 0.0.8. Recomendamos verificar a versão mais recente no npm ou no jsDelivr. - Instalar via npm::
Se você estiver usando o desenvolvimento modular, poderá instalá-lo via npm:npm install vosk-browser
Em seguida, importe-o em um arquivo JavaScript:
import * as Vosk from 'vosk-browser';
- Download de modelos de idiomas::
O vosk-browser precisa carregar o arquivo de modelo de idioma (no formato.tar.gz
), por exemplovosk-model-small-en-us-0.15.tar.gz
. Esses modelos podem ser baixados dos links fornecidos oficialmente (por exemplohttps://ccoreilly.github.io/vosk-browser/models/
) Download. O arquivo de modelo contém os arquivos de configuração e os dados necessários para o reconhecimento de fala, comomfcc.conf
responder cantandomodel.conf
. Para modelos de alta precisão, omfcc_hires.conf
. Coloque o arquivo de modelo no mesmo caminho do script ou especifique o URL do modelo.
Etapas de uso
Veja a seguir as etapas detalhadas para implementar o reconhecimento de fala usando o vosk-browser:
- Modelos de carregamento::
fazer uso deVosk.Model
O construtor carrega o modelo. Suponha que o arquivo de modelo sejamodel.tar.gz
O código é o seguinte:async function loadModel() { const model = await Vosk.createModel('model.tar.gz'); return model; }
Os modelos podem levar alguns segundos para carregar, dependendo do tamanho do arquivo e da velocidade da rede. Recomenda-se usar modelos pequenos (por exemplo, 50 MB) para melhorar a velocidade de carregamento.
- Inicialização do reconhecedor::
Crie o reconhecedor e especifique a taxa de amostragem (geralmente de acordo com o contexto de áudio, por exemplo, 16000 Hz):async function startRecognition(model) { const ctx = new AudioContext(); const recognizer = await Vosk.createRecognizer(model, ctx.sampleRate); return { recognizer, ctx }; }
- Captura de entrada de microfone::
Use a opçãonavigator.mediaDevices.getUserMedia
Obtenha a entrada do microfone:async function setupMic(ctx) { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const micNode = ctx.createMediaStreamSource(stream); return micNode; }
- Processamento de resultados de identificação::
monitorresult
responder cantandopartialResult
para obter um resultado de reconhecimento completo ou parcial:recognizer.addEventListener('result', (ev) => { console.log('完整结果:', ev.detail.text); }); recognizer.addEventListener('partialResult', (ev) => { console.log('部分结果:', ev.detail.text); });
- Transmitir dados de áudio::
Transmite dados de áudio do microfone para o reconhecedor:async function connectAudio(ctx, micNode, recognizer) { const transferer = await Vosk.createTransferer(ctx, 128 * 150); transferer.port.onmessage = (ev) => recognizer.acceptWaveform(ev.data); micNode.connect(transferer); }
- ativar o reconhecimento::
Combine as etapas acima para iniciar o reconhecimento de fala:async function start() { const model = await loadModel(); const { recognizer, ctx } = await startRecognition(model); const micNode = await setupMic(ctx); await connectAudio(ctx, micNode, recognizer); } document.getElementById('startButton').onclick = start;
Operação da função em destaque
- reconhecimento em tempo real: através de
partialResult
eventos, os desenvolvedores podem obter resultados de reconhecimento parcial em tempo real enquanto o usuário está falando, o que é adequado para cenários de chatbot ou legendas em tempo real. - Comutação de vários idiomasSubstitua simplesmente o arquivo de modelo (por exemplo
vosk-model-fr-0.22.tar.gz
(mudar para francês) para oferecer suporte a outros idiomas sem modificar o código. - operação off-lineProcessamento de dados: Todo o processamento é feito localmente no navegador sem suporte de servidor, adequado para cenários sensíveis à privacidade.
- gerenciamento de eventosSuporte para adicionar ou remover dinamicamente ouvintes de eventos. Por exemplo, remover um ouvinte de resultado:
recognizer.removeEventListener('result', callbackFunction);
Isso é útil em interfaces dinâmicas, como aplicativos Vue.js.
advertência
- Seleção de modelos: modelos pequenos são adequados para carregamento rápido, mas com baixa precisão; modelos grandes (por exemplo, com
rescore
) são mais precisos, mas exigem mais memória. - Compatibilidade do navegadorVerifique se o seu navegador é compatível com WebAssembly e APIs de áudio da Web (por exemplo, Chrome, Firefox).
- otimização do desempenhoUse o WebWorker para evitar o bloqueio da thread principal, mas esteja ciente de que o tempo de carregamento do modelo pode ser longo e é recomendável pré-carregar o modelo.
cenário do aplicativo
- chatbot
Os desenvolvedores podem integrar o vosk-browser em chatbots da Web para interação de voz por meio de entrada de microfone, adequado para atendimento ao cliente on-line ou assistentes virtuais. - Geração de subtítulos
Após o upload de arquivos de áudio, o vosk-browser gera legendas para criadores de conteúdo de vídeo ou plataformas educacionais. - Controle de casa inteligente
Permite o reconhecimento de comandos de voz no navegador para controlar dispositivos inteligentes, como ligar e desligar as luzes ou ajustar a temperatura. - Ferramentas de aprendizado de idiomas
Os alunos podem praticar sua pronúncia por meio do microfone, e o vosk-browser fornece feedback em tempo real sobre o texto da pronúncia para ajudar a melhorar a fala.
QA
- O vosk-browser requer uma conexão com a Internet?
Não é necessário. O vosk-browser suporta operação totalmente off-line, com modelagem e processamento feitos localmente para ambientes sem rede. - Quais são os idiomas suportados?
Atualmente, há suporte para 13 idiomas, incluindo inglês, alemão, francês, espanhol, etc., e mais idiomas podem ser ampliados no futuro com novos modelos. - Como podemos melhorar a precisão do reconhecimento?
Usando modelos de alta precisão (por exemplo, comrescore
modelo) e certifique-se de que o microfone seja de boa qualidade. Ajuste omodel.conf
Os parâmetros de decodificação no arquivo também podem otimizar os resultados. - Por que o reconhecimento está atrasado?
A latência pode ser causada pelo tempo de carregamento do modelo ou pelo desempenho do hardware. Recomenda-se o uso de modelos menores ou a otimização do desempenho do navegador.