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 [isTranscribing, setIsTranscribing] = React.useState(false)
  const [isPaused, setIsPaused] = React.useState(false)
  const lastRecognized = React.useRef('')
  const isTranscribingRef = 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)
        setIsTranscribing(true)
      })
      
      // ------------------------------------------------------------------------
      // 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) => {
        isTranscribingRef.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)
        isTranscribingRef.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 pauseTranscription = () => {
    if (transcriberRef.current && isTranscribing && !isPaused) {
      transcriberRef.current.pauseTranscription()
      setIsPaused(true)
    }
  }

  const resumeTranscription = () => {
    if (transcriberRef.current && isTranscribing && isPaused) {
      transcriberRef.current.resumeTranscription()
      setIsPaused(false)
    }
  }

  const stopTranscription = async () => {
    if (transcriberRef.current) {
      await transcriberRef.current.stopTranscription()
      setIsTranscribing(false)
      setIsPaused(false)
    }
  }

  return (
    <div>
      <div>
        <button 
          onClick={startTranscription} 
          disabled={isTranscribing}
        >
          Iniciar Transcrição
        </button>
        <button 
          onClick={pauseTranscription} 
          disabled={!isTranscribing || isPaused}
        >
          Pausar
        </button>
        <button 
          onClick={resumeTranscription} 
          disabled={!isTranscribing || !isPaused}
        >
          Retomar
        </button>
        <button 
          onClick={stopTranscription} 
          disabled={!isTranscribing}
        >
          Parar Transcrição
        </button>
      </div>
      <div>
        <p>Status: {isTranscribing ? (isPaused ? 'Pausado' : 'Transcrevendo') : 'Parado'}</p>
      </div>
      <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)
}) 

Exemplo JavaScript + jQuery

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title>Exemplo de Transcrição Sofya</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>
  <button id="pause" disabled>Pausar</button>
  <button id="resume" disabled>Retomar</button>
  <button id="stop" disabled>Parar</button>
  <pre id="output"></pre>

  <script>
    $(document).ready(function() {
      let isTranscribing = false;
      let isPaused = false;
      let transcriber = null;

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

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

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

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

          // Transcrição provisória
          transcriber.on('recognizing', function(result) {
            console.log('Reconhecendo:', result);
          });

          // Transcrição final
          transcriber.on('recognized', function(result) {
            console.log('Reconhecido:', result);
            $output.append(result + '\n');
          });

          // Erros
          transcriber.on('error', function(error) {
            console.error('Erro de transcrição:', error);
          });
        } else {
          $('#output').text('A biblioteca SofyaTranscription não está carregada.');
        }
      });

      $('#pause').on('click', function() {
        if (transcriber && isTranscribing && !isPaused) {
          transcriber.pauseTranscription();
          isPaused = true;
          updateButtonStates();
          console.log('Transcrição pausada');
        }
      });

      $('#resume').on('click', function() {
        if (transcriber && isTranscribing && isPaused) {
          transcriber.resumeTranscription();
          isPaused = false;
          updateButtonStates();
          console.log('Transcrição retomada');
        }
      });

      $('#stop').on('click', async function() {
        if (transcriber && isTranscribing) {
          await transcriber.stopTranscription();
          isTranscribing = false;
          isPaused = false;
          updateButtonStates();
          console.log('Transcrição parada');
        }
      });

      function updateButtonStates() {
        $('#start').prop('disabled', isTranscribing);
        $('#pause').prop('disabled', !isTranscribing || isPaused);
        $('#resume').prop('disabled', !isTranscribing || !isPaused);
        $('#stop').prop('disabled', !isTranscribing);
      }
    });
  </script>
</body>
</html>