Deepgram ASR Demo (TS)

by juberti

HTML

<!DOCTYPE html>
<script type="worklet">
registerProcessor('my-processor', class param extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    const input = inputs[0];
    const output = outputs[0];

    for (let channel = 0; channel < input.length; ++channel) {
      const inputChannel = input[channel];
      const outputChannel = output[channel];

      for (let i = 0; i < inputChannel.length; ++i) {
        outputChannel[i] = inputChannel[i];
      }
    }

    // Copy the input data to a new Float32Array
    const data = new Float32Array(input[0]);

    // Post the data back to the main thread
    this.port.postMessage(data);

    return true;
  }
});
</script>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<br>
<textarea cols="80" id="output"></textarea>

TypeScript

const workerBlob = new Blob([
  document.querySelector('script[type=worklet]').textContent
], {
  type: "text/javascript"
});

class DeepgramSpeechRecognition {
  private context: AudioContext | null;
  private socket: WebSocket | null;
  private interimResults: boolean;
  private continuous: boolean;
  private micStream: MediaStream | null;
  private processorNode: AudioWorkletNode | null;

  constructor() {
    this.context = null;
    this.socket = null;
    this.interimResults = true;
    this.continuous = false;
    this.micStream = null;
    this.processorNode = null;
    this.outBuf = [];
    this.inText = "";
  }

  async start() {
    this.context = new window.AudioContext();
    await this.context.audioWorklet.addModule(window.URL.createObjectURL(workerBlob));
    const sampleRate = this.context.sampleRate;
    const params = new URLSearchParams({
    	"model": "conversationalai",
      "version": "latest",
      "encoding": "linear16",
      "channels": 1,
      "sample_rate": sampleRate
      "interim_results": true,
      "endpointing": 100
    });
    const url = "wss://api.deepgram.com/v1/listen?" + params.toString();
    this.socket = new WebSocket(url, ["token": "f10591a2945604eed431c1375db4a19c130e0e04"]);
    this.socket.binaryType = 'arraybuffer';
    this.socket.onopen = () => {
    	console.log("socket open");
    }
    this.socket.onmessage = message => {
      const result = JSON.parse(message.data);
      console.log(result);
      if (result.type) {
      	const transcript = result.channel.alternatives[0].transcript;
        //console.log(`${result.type}: ${transcript}`);
        if (result.is_final && transcript) {
	        this.inText += transcript + " ";
	        output.value = this.inText;
        }
        if (result.speech_final) {
        	this.inText = "";
        }
      }
    }
    console.log("socket opening");
    this.micStream = await navigator.mediaDevices.getUserMedia({
      audio: true
    });
    const source =...