EVI TypeScript Quickstart

1
import { Hume, HumeClient } from 'hume';
2
3
// instantiate the Hume client and authenticate
4
const client = new HumeClient({
5
  apiKey: import.meta.env.HUME_API_KEY,
6
});

1
import { Hume, HumeClient } from 'hume';
2
3
// Instantiate the Hume client and authenticate
4
const client = new HumeClient({
5
  apiKey: import.meta.env.HUME_API_KEY,
6
});
7
8
// Connect to EVI
9
const socket = await client.empathicVoice.chat.connect({
10
  configId: import.meta.env.HUME_CONFIG_ID,
11
});
12
13
// Define event handlers and assign them to WebSocket
14
socket.on('open', handleWebSocketOpenEvent);
15
socket.on('message', handleWebSocketMessageEvent);
16
socket.on('error', handleWebSocketErrorEvent);
17
socket.on('close', handleWebSocketCloseEvent);

1
import {
2
  convertBlobToBase64,
3
  ensureSingleValidAudioTrack,
4
  getAudioStream,
5
  getBrowserSupportedMimeType,
6
} from 'hume';
7
8
/**--- Audio Recording State ---*/
9
let recorder: MediaRecorder | null = null;
10
let audioStream: MediaStream | null = null;
11
const mimeTypeResult = getBrowserSupportedMimeType();
12
const mimeType: MimeType = mimeTypeResult.success 
13
  ? mimeTypeResult.mimeType 
14
  : MimeType.WEBM;
15
16
// define function for capturing audio
17
async function startAudioCapture(): Promise<void> {
18
  try {
19
    audioStream = await getAudioStream();
20
    // Validate the stream
21
    ensureSingleValidAudioTrack(audioStream);
22
23
    recorder = new MediaRecorder(audioStream, { mimeType });
24
    recorder.ondataavailable = handleAudioDataAvailable;
25
    recorder.onerror = (event) => {
26
      console.error("MediaRecorder error:", event);
27
    }
28
    recorder.start(50);
29
  } catch (error) {
30
    console.error(
31
      "Failed to initialize or start audio capture:", error
32
    );
33
    throw error;
34
  }
35
}
36
37
// define a WebSocket open event handler to capture audio
38
async function handleWebSocketOpen(): Promise<void> {
39
  console.log('WebSocket connection opened.');
40
  try {
41
    await startAudioCapture();
42
  } catch (error) {
43
    console.error("Failed to capture audio:", error);
44
    alert("Failed to access microphone. Disconnecting.");
45
    if (
46
      socket && 
47
      socket.readyState !== WebSocket.CLOSING && 
48
      socket.readyState !== WebSocket.CLOSED
49
    ) {
50
      socket.close();
51
    }
52
  }
53
}

1
/**--- Audio Playback State ---*/
2
const audioQueue: Blob[] = [];
3
let currentAudio: HTMLAudioElement | null = null;
4
let isPlaying = false;
5
6
// Play the audio within the playback queue, converting each 
7
// Blob into playable HTMLAudioElements
8
function playNextAudioChunk(): void {
9
  // Don't play if already playing or queue is empty
10
  if (isPlaying || audioQueue.length === 0) return;
11
12
  isPlaying = true;
13
  const audioBlob = audioQueue.shift();
14
15
  if (!audioBlob) {
16
    isPlaying = false;
17
    return;
18
  }
19
  const audioUrl = URL.createObjectURL(audioBlob);
20
  currentAudio = new Audio(audioUrl);
21
  currentAudio.play();
22
  currentAudio.onended = () => {
23
    URL.revokeObjectURL(audioUrl);
24
    currentAudio = null;
25
    isPlaying = false;
26
    // Recursively play the next chunk if queue is not empty
27
    playNextAudioChunk();
28
  };
29
}
30
31
// define a WebSocket message event handler to play audio output
32
function handleWebSocketMessage(
33
  message: Hume.empathicVoice.SubscribeEvent
34
) {
35
  switch (message.type) {
36
    case 'audio_output':
37
      // Decode and queue audio for playback
38
      const audioBlob = convertBase64ToBlob(
39
        message.data, 
40
        mimeType
41
      );
42
      audioQueue.push(audioBlob);
43
      // Attempt to play immediately if not already playing
44
      playNextAudioChunk();
45
      break;
46
  }
47
}

1
// function for stopping the audio and clearing the queue
2
function stopAudioPlayback(): void {
3
  if (currentAudio) {
4
    currentAudio.pause();
5
    console.log("Audio playback paused.");
6
    if (
7
      currentAudio.src && 
8
      currentAudio.src.startsWith('blob:')
9
    ) {
10
      // Revoke URL if paused mid-play
11
      URL.revokeObjectURL(currentAudio.src);
12
    }
13
    currentAudio = null;
14
  }
15
  audioQueue.length = 0; // Clear the queue
16
  isPlaying = false; // Reset playback state
17
}
18
19
// update WebSocket message event handler to handle interruption
20
function handleWebSocketMessage(
21
  message: Hume.empathicVoice.SubscribeEvent
22
) {
23
  switch (message.type) {
24
    case 'user_message':
25
      // Stop playback if user starts speaking
26
      stopAudioPlayback();
27
      break;
28
    case 'audio_output':
29
      // Decode and queue audio for playback
30
      const audioBlob = convertBase64ToBlob(
31
        message.data,
32
        mimeType
33
      );
34
      audioQueue.push(audioBlob);
35
      // Attempt to play immediately if not already playing
36
      playNextAudioChunk();
37
      break;
38
    case 'user_interruption':
39
      // Stop playback immediately when the user interrupts
40
      console.log("User interruption detected.");
41
      stopAudioPlayback();
42
      break;
43
  }
44
}