Ejemplos

Ejemplo 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()
      
      // Crear el transcriptor con conexión de clave de API
      const transcriber = new SofyaTranscriber({
        apiKey: 'your_api_key',
        config: {
          language: 'es-ES'
        }
      })
      
      transcriberRef.current = transcriber

      transcriber.on("ready", () => {
        transcriber.startTranscription(stream)
      })
      
      // ------------------------------------------------------------------------
      // El evento 'recognizing' proporciona actualizaciones en tiempo real de la transcripción en curso.
      // Actualizamos el texto de visualización pero no lo guardamos en lastRecognized porque aún es provisional.
      // Esto nos permite mostrar al usuario lo que se está transcribiendo en tiempo real, manteniendo
      // el texto confirmado separado.
      // ------------------------------------------------------------------------
      transcriber.on('recognizing', (result: string) => {
        isTranscribing.current = true
        const currentText = lastRecognized.current
        const newText = currentText ? `${currentText} ${result}` : result
        setInputText(newText)
      })
      
      // ------------------------------------------------------------------------
      // El evento 'recognized' proporciona la transcripción final y confirmada.
      // Lo guardamos en lastRecognized ya que es el texto confirmado al que se anexarán nuevos fragmentos.
      // Esto asegura que mantenemos un historial de todas las transcripciones 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('Error en la transcripción:', error)
      })
    } catch (error) {
      console.error('Error al iniciar la transcripción:', error)
    }
  }

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

  return (
    <div>
      <button onClick={startTranscription}>Iniciar Transcripción</button>
      <button onClick={stopTranscription}>Detener Transcripción</button>
      <div>
        <h3>Transcripción:</h3>
        <p>{inputText}</p>
      </div>
    </div>
  )
}

Ejemplo JavaScript Básico

import { SofyaTranscriber } from 'sofya.transcription'

// Crear el transcriptor con conexión de clave de API
const transcriber = new SofyaTranscriber({
  apiKey: 'YOUR_API_KEY',
  config: {
    language: 'es-ES'
  }
})

let lastRecognized = ''
let isTranscribing = false

// Escuchar el evento ready
transcriber.on('ready', () => {
  console.log('El servicio de transcripción está listo')
  
  // Obtener el stream de medios e iniciar la transcripción
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(mediaStream => {
      transcriber.startTranscription(mediaStream)
    })
    .catch(error => {
      console.error('Error al acceder al micrófono:', error)
    })
})

// ------------------------------------------------------------------------
// Escuchar eventos de transcripción
// ------------------------------------------------------------------------

// ------------------------------------------------------------------------
// El evento 'recognizing' proporciona actualizaciones en tiempo real de la transcripción en curso.
// Registramos el texto actual pero no lo guardamos en lastRecognized porque aún es provisional.
// Esto nos permite mostrar lo que se está transcribiendo en tiempo real, manteniendo
// el texto confirmado separado.
// ------------------------------------------------------------------------
transcriber.on('recognizing', (result: string) => {
  isTranscribing = true
  const currentText = lastRecognized
  const newText = currentText ? `${currentText} ${result}` : result
  console.log('Reconociendo:', newText)
})

// ------------------------------------------------------------------------
// El evento 'recognized' proporciona la transcripción final y confirmada.
// Lo guardamos en lastRecognized ya que es el texto confirmado al que se anexarán nuevos fragmentos.
// Esto asegura que mantenemos un historial de todas las transcripciones confirmadas.
// ------------------------------------------------------------------------
transcriber.on('recognized', (result: string) => {
  const currentText = lastRecognized
  const newText = currentText ? `${currentText} ${result}` : result
  lastRecognized = newText
  console.log('Reconocido:', newText)
  isTranscribing = false
})

transcriber.on('error', (error) => {
  console.error('Error en la transcripción:', error)
}) 

JavaScript + jQuery Example

<!DOCTYPE html>
<html lang="es-ES">
<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>Prueba de Transcripción</h1>
  <button id="start">Iniciar Transcripción</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: 'en-ES'
            }
          });

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

          transcriber.on('ready', function() {
            console.log('Servicio de transcripción listo');

            navigator.mediaDevices.getUserMedia({ audio: true })
              .then(function(mediaStream) {
                transcriber.startTranscription(mediaStream);
              })
              .catch(function(error) {
                console.error('Error al acceder al micrófono:', 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('La biblioteca SofyaTranscription aún no se ha cargado.');
        }
      });
    });
  </script>
</body>
</html>