Exemplos

Exemplo React

import React from 'react'
import { SofyaTranscriber } from 'sofya.transcription'

const App = () => {
  const transcriberRef = React.useRef<SofyaTranscriber | null>(null)
  const [inputText, setInputText] = React.useState('')
  const lastRecognized = React.useRef('')
  const isTranscribing = React.useRef(false)

  const getMediaStream = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
    return stream
  }

  const startTranscription = async () => {
    try {
      const stream = await getMediaStream()
      
      // Criar o transcritor com conexão de chave de API
      const transcriber = new SofyaTranscriber({
        apiKey: 'your_api_key',
        config: {
          language: 'pt-BR'
        }
      })
      
      transcriberRef.current = transcriber

      transcriber.on("ready", () => {
        transcriber.startTranscription(stream)
      })
      
      // ------------------------------------------------------------------------
      // O evento 'recognizing' fornece atualizações em tempo real da transcrição em andamento.
      // Atualizamos o texto de exibição, mas não salvamos no lastRecognized porque ainda é provisório.
      // Isso nos permite mostrar ao usuário o que está sendo transcrito em tempo real, mantendo
      // o texto confirmado separado.
      // ------------------------------------------------------------------------
      transcriber.on('recognizing', (result: string) => {
        isTranscribing.current = true
        const currentText = lastRecognized.current
        const newText = currentText ? `${currentText} ${result}` : result
        setInputText(newText)
      })
      
      // ------------------------------------------------------------------------
      // O evento 'recognized' fornece a transcrição final e confirmada.
      // Salvamos no lastRecognized pois é o texto confirmado ao qual novos trechos serão anexados.
      // Isso garante que mantemos um histórico de todas as transcrições confirmadas.
      // ------------------------------------------------------------------------
      transcriber.on('recognized', (result: string) => {
        const currentText = lastRecognized.current
        const newText = currentText ? `${currentText} ${result}` : result
        lastRecognized.current = newText
        setInputText(newText)
        isTranscribing.current = false
      })
      
      transcriber.on('error', (error: Error) => {
        console.error('Erro na transcrição:', error)
      })
    } catch (error) {
      console.error('Erro ao iniciar transcrição:', error)
    }
  }

  const stopTranscription = () => {
    if (transcriberRef.current) {
      transcriberRef.current.stopTranscription()
    }
  }

  return (
    <div>
      <button onClick={startTranscription}>Iniciar Transcrição</button>
      <button onClick={stopTranscription}>Parar Transcrição</button>
      <div>
        <h3>Transcrição:</h3>
        <p>{inputText}</p>
      </div>
    </div>
  )
}

Exemplo JavaScript Básico

import { SofyaTranscriber } from 'sofya.transcription'

// Criar o transcritor com conexão de chave de API
const transcriber = new SofyaTranscriber({
  apiKey: 'YOUR_API_KEY',
  config: {
    language: 'pt-BR'
  }
})

let lastRecognized = ''
let isTranscribing = false

// Ouvir o evento ready
transcriber.on('ready', () => {
  console.log('Serviço de transcrição está pronto')
  
  // Obter o stream de mídia e iniciar a transcrição
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(mediaStream => {
      transcriber.startTranscription(mediaStream)
    })
    .catch(error => {
      console.error('Erro ao acessar microfone:', error)
    })
})

// ------------------------------------------------------------------------
// Ouvir eventos de transcrição
// ------------------------------------------------------------------------

// ------------------------------------------------------------------------
// O evento 'recognizing' fornece atualizações em tempo real da transcrição em andamento.
// Registramos o texto atual, mas não salvamos no lastRecognized porque ainda é provisório.
// Isso nos permite mostrar o que está sendo transcrito em tempo real, mantendo
// o texto confirmado separado.
// ------------------------------------------------------------------------
transcriber.on('recognizing', (result: string) => {
  isTranscribing = true
  const currentText = lastRecognized
  const newText = currentText ? `${currentText} ${result}` : result
  console.log('Reconhecendo:', newText)
})

// ------------------------------------------------------------------------
// O evento 'recognized' fornece a transcrição final e confirmada.
// Salvamos no lastRecognized pois é o texto confirmado ao qual novos trechos serão anexados.
// Isso garante que mantemos um histórico de todas as transcrições confirmadas.
// ------------------------------------------------------------------------
transcriber.on('recognized', (result: string) => {
  const currentText = lastRecognized
  const newText = currentText ? `${currentText} ${result}` : result
  lastRecognized = newText
  console.log('Reconhecido:', newText)
  isTranscribing = false
})

transcriber.on('error', (error) => {
  console.error('Erro na transcrição:', error)
}) 

JavaScript + jQuery Example

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title>Sofya Transcription Example</title>
  <script src="https://cdn.jsdelivr.net/npm/sofya.transcription/dist/bundle.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>Teste de Transcrição</h1>
  <button id="start">Iniciar Transcrição</button>
  <pre id="output"></pre>


  <script>
    $(document).ready(function() {
      $('#start').on('click', function() {
        if (window.SofyaTrancription) {
          const transcriber = new window.SofyaTrancription.SofyaTranscriber({
            apiKey: 'YOUR_API_KEY',
            config: {
              language: 'pt-BR'
            }
          });

          const $output = $('#output');

          transcriber.on('ready', function() {
            console.log('Serviço de transcrição pronto');

            navigator.mediaDevices.getUserMedia({ audio: true })
              .then(function(mediaStream) {
                transcriber.startTranscription(mediaStream);
              })
              .catch(function(error) {
                console.error('Erro ao acessar o microfone:', error);
              });
          });

          transcriber.on('recognizing', function(result) {
            console.log('Recognizing:', result);
          });

          transcriber.on('recognized', function(result) {
            console.log('Recognized:', result);
            $output.append(result + '\n');
          });

          transcriber.on('error', function(error) {
            console.error('Transcription error:', error);
          });
        } else {
          $('#output').text('A biblioteca SofyaTranscription ainda não foi carregada.');
        }
      });
    });
  </script>
</body>
</html>