Examples

React Example

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()
      
      // Create the transcriber with API key connection
      const transcriber = new SofyaTranscriber({
        apiKey: 'your_api_key',
        config: {
          language: 'en-US'
        }
      })
      
      transcriberRef.current = transcriber

      transcriber.on("ready", () => {
        transcriber.startTranscription(stream)
      })
      
      // ------------------------------------------------------------------------
      // The 'recognizing' event provides real-time updates of the ongoing transcription.
      // We update the display text but don't save it to lastRecognized because it's still provisional.
      // This allows us to show the user what's being transcribed in real-time while keeping
      // the confirmed text separate.
      // ------------------------------------------------------------------------
      transcriber.on('recognizing', (result: string) => {
        isTranscribing.current = true
        const currentText = lastRecognized.current
        const newText = currentText ? `${currentText} ${result}` : result
        setInputText(newText)
      })
      
      // ------------------------------------------------------------------------
      // The 'recognized' event provides the final, confirmed transcription.
      // We save it to lastRecognized as it's the confirmed text that new chunks will be appended to.
      // This ensures we maintain a history of all confirmed transcriptions.
      // ------------------------------------------------------------------------
      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('Transcription error:', error)
      })
    } catch (error) {
      console.error('Error starting transcription:', error)
    }
  }

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

  return (
    <div>
      <button onClick={startTranscription}>Start Transcription</button>
      <button onClick={stopTranscription}>Stop Transcription</button>
      <div>
        <h3>Transcription:</h3>
        <p>{inputText}</p>
      </div>
    </div>
  )
}

Basic JavaScript Example

import { SofyaTranscriber } from 'sofya.transcription'

// Create the transcriber with API key connection
const transcriber = new SofyaTranscriber({
  apiKey: 'YOUR_API_KEY',
  config: {
    language: 'en-US'
  }
})

let lastRecognized = ''
let isTranscribing = false

// Listen for the ready event
transcriber.on('ready', () => {
  console.log('Transcription service is ready')
  
  // Get the media stream and start transcription
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(mediaStream => {
      transcriber.startTranscription(mediaStream)
    })
    .catch(error => {
      console.error('Error accessing microphone:', error)
    })
})

// ------------------------------------------------------------------------
// Listen for transcription events
// ------------------------------------------------------------------------

// ------------------------------------------------------------------------
// The 'recognizing' event provides real-time updates of the ongoing transcription.
// We log the current text but don't save it to lastRecognized because it's still provisional.
// This allows us to show what's being transcribed in real-time while keeping
// the confirmed text separate.
// ------------------------------------------------------------------------
transcriber.on('recognizing', (result: string) => {
  isTranscribing = true
  const currentText = lastRecognized
  const newText = currentText ? `${currentText} ${result}` : result
  console.log('Recognizing:', newText)
})

// ------------------------------------------------------------------------
// The 'recognized' event provides the final, confirmed transcription.
// We save it to lastRecognized as it's the confirmed text that new chunks will be appended to.
// This ensures we maintain a history of all confirmed transcriptions.
// ------------------------------------------------------------------------
transcriber.on('recognized', (result: string) => {
  const currentText = lastRecognized
  const newText = currentText ? `${currentText} ${result}` : result
  lastRecognized = newText
  console.log('Recognized:', newText)
  isTranscribing = false
})

transcriber.on('error', (error) => {
  console.error('Transcription error:', error)
})

JavaScript + jQuery Example

<!DOCTYPE html>
<html lang="en">
<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>Transcription Test</h1>
  <button id="start">Start Transcription</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-US'
            }
          });

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

          transcriber.on('ready', function() {
            console.log('Transcription service is ready');

            navigator.mediaDevices.getUserMedia({ audio: true })
              .then(function(mediaStream) {
                transcriber.startTranscription(mediaStream);
              })
              .catch(function(error) {
                console.error('Error accessing microphone:', 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('SofyaTranscription library not loaded.');
        }
      });
    });
  </script>
</body>
</html>