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
  secretKey: import.meta.env.HUME_SECRET_KEY || '',
7
});

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
  secretKey: import.meta.env.HUME_SECRET_KEY || '',
7
});
8
9
// instantiates WebSocket and establishes an authenticated connection
10
const socket = await client.empathicVoice.chat.connect({
11
  configId: import.meta.env.HUME_CONFIG_ID || null,
12
});
13
14
// define handler functions and assign them to the corresponding WebSocket event handlers
15
socket.on('open', handleWebSocketOpenEvent);
16
socket.on('message', handleWebSocketMessageEvent);
17
socket.on('error', handleWebSocketErrorEvent);
18
socket.on('close', handleWebSocketCloseEvent);

1
import {
2
  convertBlobToBase64,
3
  ensureSingleValidAudioTrack,
4
  getAudioStream,
5
  getBrowserSupportedMimeType,
6
} from 'hume';
7
8
// the recorder responsible for recording the audio stream to be prepared as the audio input
9
let recorder: MediaRecorder | null = null;
10
11
// the stream of audio captured from the user's microphone
12
let audioStream: MediaStream | null = null;
13
14
// mime type supported by the browser the application is running in
15
const mimeType: MimeType = (() => {
16
  const result = getBrowserSupportedMimeType();
17
  return result.success ? result.mimeType : MimeType.WEBM;
18
})();
19
20
// define function for capturing audio
21
async function captureAudio(): Promise<void> {
22
  // prompts user for permission to capture audio, obtains media stream upon approval
23
  audioStream = await getAudioStream();
24
25
  // ensure there is only one audio track in the stream
26
  ensureSingleValidAudioTrack(audioStream);
27
28
  // instantiate the media recorder
29
  recorder = new MediaRecorder(audioStream, { mimeType });
30
31
  // callback for when recorded chunk is available to be processed
32
  recorder.ondataavailable = async ({ data }) => {
33
    // IF size of data is smaller than 1 byte then do nothing
34
    if (data.size < 1) return;
35
36
    // base64 encode audio data
37
    const encodedAudioData = await convertBlobToBase64(data);
38
39
    // define the audio_input message JSON
40
    const audioInput: Omit<Hume.empathicVoice.AudioInput, 'type'> = {
41
      data: encodedAudioData,
42
    };
43
44
    // send audio_input message
45
    socket?.sendAudioInput(audioInput);
46
  };
47
48
  // capture audio input at a rate of 100ms (recommended for web)
49
  const timeSlice = 100;
50
  recorder.start(timeSlice);
51
}
52
53
// define a WebSocket open event handler to capture audio
54
async function handleWebSocketOpenEvent(): Promise<void> {
55
  // place logic here which you would like invoked when the socket opens
56
  console.log('Web socket connection opened');
57
  await captureAudio();
58
}

1
// audio playback queue
2
const audioQueue: Blob[] = [];
3
4
// flag which denotes whether audio is currently playing or not
5
let isPlaying = false;
6
7
// the current audio element to be played
8
let currentAudio: : HTMLAudioElement | null = null;
9
10
// play the audio within the playback queue, converting each Blob into playable HTMLAudioElements
11
function playAudio(): void {
12
  // IF there is nothing in the audioQueue OR audio is currently playing then do nothing
13
  if (!audioQueue.length || isPlaying) return;
14
15
  // update isPlaying state
16
  isPlaying = true;
17
18
  // pull next audio output from the queue
19
  const audioBlob = audioQueue.shift();
20
21
  // IF audioBlob is unexpectedly undefined then do nothing
22
  if (!audioBlob) return;
23
24
  // converts Blob to AudioElement for playback
25
  const audioUrl = URL.createObjectURL(audioBlob);
26
  currentAudio = new Audio(audioUrl);
27
28
  // play audio
29
  currentAudio.play();
30
31
  // callback for when audio finishes playing
32
  currentAudio.onended = () => {
33
    // update isPlaying state
34
    isPlaying = false;
35
36
    // attempt to pull next audio output from queue
37
    if (audioQueue.length) playAudio();
38
  };
39
}
40
41
// define a WebSocket message event handler to play audio output
42
function handleWebSocketMessageEvent(
43
  message: Hume.empathicVoice.SubscribeEvent
44
): void {
45
  // place logic here which you would like to invoke when receiving a message through the socket
46
  switch (message.type) {
47
    // add received audio to the playback queue, and play next audio output
48
    case 'audio_output':
49
      // convert base64 encoded audio to a Blob
50
      const audioOutput = message.data;
51
      const blob = convertBase64ToBlob(audioOutput);
52
53
      // add audio Blob to audioQueue
54
      audioQueue.push(blob);
55
56
      // play the next audio output
57
      if (audioQueue.length === 1) playAudio();
58
      break;
59
  }
60
}

1
// function for stopping the audio and clearing the queue
2
function stopAudio(): void {
3
  // stop the audio playback
4
  currentAudio?.pause();
5
  currentAudio = null;
6
7
  // update audio playback state
8
  isPlaying = false;
9
10
  // clear the audioQueue
11
  audioQueue.length = 0;
12
}
13
14
// update WebSocket message event handler to handle interruption
15
function handleWebSocketMessageEvent(
16
  message: Hume.empathicVoice.SubscribeEvent
17
): void {
18
  // place logic here which you would like to invoke when receiving a message through the socket
19
  switch (message.type) {
20
    // add received audio to the playback queue, and play next audio output
21
    case 'audio_output':
22
      // convert base64 encoded audio to a Blob
23
      const audioOutput = message.data;
24
      const blob = convertBase64ToBlob(audioOutput);
25
26
      // add audio Blob to audioQueue
27
      audioQueue.push(blob);
28
29
      // play the next audio output
30
      if (audioQueue.length === 1) playAudio();
31
      break;
32
33
    // stop audio playback, clear audio playback queue, and update audio playback state on interrupt
34
    case 'user_interruption':
35
      stopAudio();
36
      break;
37
  }
38
}