From 6f72a041d8f90c1bc2b958d735bf1d085a6b5e23 Mon Sep 17 00:00:00 2001
From: Nikolai Giman <gimanhead@gmail.com>
Date: Tue, 15 Jul 2025 17:14:33 +0200
Subject: [PATCH] feat: add volume control and output device selection

---
 .gitignore                                    |   5 +-
 README.md                                     |  26 +++
 packages/dev-app/.gitignore                   |   1 +
 .../dev-app/src/components/VolumeChanger.vue  |  23 +++
 packages/dev-app/src/router/index.ts          |  12 ++
 packages/dev-app/src/views/HomeView.vue       |  15 ++
 .../src/views/examples/AdvancedTranslator.vue |   7 +-
 .../examples/ChangeAudioOutputDevice.vue      | 195 ++++++++++++++++++
 .../src/views/examples/FromAudioFile.vue      | 164 +++++++++++++++
 packages/lib/README.md                        |  26 +++
 packages/lib/package.json                     |   2 +-
 packages/lib/src/PalabraClient.model.ts       |   8 -
 packages/lib/src/PalabraClient.ts             | 125 ++++++-----
 .../lib/src/__tests__/PalabraClient.test.ts   |  73 ++++++-
 .../__tests__/PalabraWebRtcTransport.test.ts  |   1 +
 packages/lib/src/api/api.model.ts             |  29 ++-
 packages/lib/src/api/api.ts                   |  60 +++---
 packages/lib/src/lib.ts                       |   7 +-
 .../transport/PalabraWebRtcTransport.model.ts |   4 +-
 .../src/transport/PalabraWebRtcTransport.ts   |  33 ++-
 packages/lib/src/utils/browser-devices.ts     |  18 +-
 packages/lib/src/utils/index.ts               |   7 +
 packages/lib/src/utils/track-from-file.ts     |  43 ++++
 packages/lib/src/utils/utils.ts               |   3 +
 pnpm-lock.yaml                                | 121 +++++++++++
 25 files changed, 883 insertions(+), 125 deletions(-)
 create mode 100644 packages/dev-app/src/components/VolumeChanger.vue
 create mode 100644 packages/dev-app/src/views/examples/ChangeAudioOutputDevice.vue
 create mode 100644 packages/dev-app/src/views/examples/FromAudioFile.vue
 create mode 100644 packages/lib/src/utils/index.ts
 create mode 100644 packages/lib/src/utils/track-from-file.ts
 create mode 100644 packages/lib/src/utils/utils.ts

diff --git a/.gitignore b/.gitignore
index 059ba01..c59eb46 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,7 @@
 .env
 .vscode
 node_modules
-dist
\ No newline at end of file
+dist
+coverage
+.DS_Store
+tmp
\ No newline at end of file
diff --git a/README.md b/README.md
index b1f51b4..45eee74 100644
--- a/README.md
+++ b/README.md
@@ -74,6 +74,24 @@ await client.stopPlayback();
 await client.stopTranslation();
 ```
 
+### 6. Output device changing
+
+> [!NOTE]
+> Audio output device switching is supported only in browsers that implement setSinkId(). In unsupported browsers like Safari, this method will have no effect.
+> 
+```ts
+await client.changeAudioOutputDevice('deviceId')
+```
+
+### 7. Volume changing for audio track by language
+
+> [!NOTE]
+> Volume should be a value between 0.0 and 1.0, where 0.0 is muted and 1.0 is maximum volume.
+> 
+```ts
+client.setVolume('es', .7)
+```
+
 > [!NOTE]
 > Browsers may restrict audio playback initiated without user interaction.
 > Each browser may also define user interaction differently.
@@ -145,6 +163,14 @@ new PalabraClient(options: PalabraClientData)
 - `unmuteOriginalTrack(): void`  
   Unmutes the original audio track (microphone).
 
+- `setVolume(language: string, volume: number): void`  
+Set volume for audio track by given language. Volume should be between 0.0 (muted) and 1.0 (maximum)
+
+- `changeAudioOutputDevice(deviceId: string): Promise<void>`
+  Change output device
+  > Note: Audio output device switching is supported only in browsers that implement setSinkId(). In unsupported browsers like Safari, this method will have no effect.
+  > 
+
 - `cleanup(): Promise<void>`  
   Stops translation and playback, releases resources, and resets the client to its initial state.
 
diff --git a/packages/dev-app/.gitignore b/packages/dev-app/.gitignore
index aef72d0..015a8db 100644
--- a/packages/dev-app/.gitignore
+++ b/packages/dev-app/.gitignore
@@ -31,3 +31,4 @@ coverage
 
 test-results/
 playwright-report/
+*.test.mp3
diff --git a/packages/dev-app/src/components/VolumeChanger.vue b/packages/dev-app/src/components/VolumeChanger.vue
new file mode 100644
index 0000000..5b7e572
--- /dev/null
+++ b/packages/dev-app/src/components/VolumeChanger.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { PalabraClient } from '@palabra-ai/translator';
+import { ref, watch } from 'vue';
+
+const props = defineProps<{
+    client: PalabraClient;
+    language: string;
+}>();
+
+const volume = ref(1);
+
+watch(volume, (newVolume) => {
+    props.client.setVolume(props.language, newVolume);
+});
+</script>
+
+<template>
+    <div>
+        <input type="range" v-model="volume" min="0" max="1" step="0.01" />
+
+        {{ Math.round(volume * 100) }} % [{{ language }}]
+    </div>
+</template>
\ No newline at end of file
diff --git a/packages/dev-app/src/router/index.ts b/packages/dev-app/src/router/index.ts
index bcc0ba9..0bad924 100644
--- a/packages/dev-app/src/router/index.ts
+++ b/packages/dev-app/src/router/index.ts
@@ -3,6 +3,8 @@ import HomeView from '../views/HomeView.vue'
 import BasicTranslator from '../views/examples/BasicTranslator.vue'
 import AdvancedTranslator from '../views/examples/AdvancedTranslator.vue'
 import AudioElement from '../views/examples/AudioElement.vue'
+import FromAudioFile from '../views/examples/FromAudioFile.vue'
+import ChangeAudioOutputDevice from '@/views/examples/ChangeAudioOutputDevice.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -26,6 +28,16 @@ const router = createRouter({
           path: '/audio-element',
           name: 'audio-element',
           component: AudioElement
+        },
+        {
+          path: '/from-audio-file',
+          name: 'from-audio-file',
+          component: FromAudioFile
+        },
+        {
+          path: '/change-audio-output-device',
+          name: 'change-audio-output-device',
+          component: ChangeAudioOutputDevice
         }
       ]
     },
diff --git a/packages/dev-app/src/views/HomeView.vue b/packages/dev-app/src/views/HomeView.vue
index 1e60cd8..132a994 100644
--- a/packages/dev-app/src/views/HomeView.vue
+++ b/packages/dev-app/src/views/HomeView.vue
@@ -17,6 +17,7 @@ const route = useRoute();
       </div>
     </div>
     <nav class="flex items-center md:flex-row flex-col">
+      
       <router-link
         to="/"
         class="mx-4 px-4 py-2 rounded-md transition-colors"
@@ -38,6 +39,20 @@ const route = useRoute();
       >
         Advanced Example
       </router-link>
+      <router-link
+        to="/from-audio-file"
+        class="mx-4 px-4 py-2 rounded-md transition-colors"
+        :class="route.path === '/from-audio-file' ? 'bg-blue-100 text-blue-600' : 'hover:bg-gray-100'"
+      >
+        From Audio File Example
+      </router-link>
+      <router-link
+        to="/change-audio-output-device"
+        class="mx-4 px-4 py-2 rounded-md transition-colors"
+        :class="route.path === '/change-audio-output-device' ? 'bg-blue-100 text-blue-600' : 'hover:bg-gray-100'"
+      >
+        Change Audio Output Device
+      </router-link>
     </nav>
   </header>
   <main class="flex flex-col items-center justify-center h-[calc(100vh-4rem)] gap-4">
diff --git a/packages/dev-app/src/views/examples/AdvancedTranslator.vue b/packages/dev-app/src/views/examples/AdvancedTranslator.vue
index 96529ad..bf1b479 100644
--- a/packages/dev-app/src/views/examples/AdvancedTranslator.vue
+++ b/packages/dev-app/src/views/examples/AdvancedTranslator.vue
@@ -7,9 +7,9 @@ import {
   type PalabraClientData,
 } from '@palabra-ai/translator';
 import { onMounted, ref } from 'vue';
+import VolumeChanger from '@/components/VolumeChanger.vue';
 
 let palabraClient: PalabraClient | null = null;
-const currentMicTrack: MediaStreamTrack | null = null;
 
 const isTranslationStarted = ref(false);
 const isMicrophoneMuted = ref(false);
@@ -58,7 +58,6 @@ const stopTranslation = async () => {
 };
 
 const toggleMicrophone = () => {
-  if (!currentMicTrack) return;
   if (isMicrophoneMuted.value) {
     palabraClient?.unmuteOriginalTrack();
     isMicrophoneMuted.value = false;
@@ -110,6 +109,10 @@ const setTranslateTo = async (code: PalabraClientData['translateTo']) => {
 <template>
   <main class="flex flex-col items-center justify-center h-[calc(100vh-4rem)] gap-4">
     <h2 class="text-2xl font-bold mb-6 text-center">Advanced Translator Example</h2>
+    <div v-if="isTranslationStarted && palabraClient">
+      <VolumeChanger :client="palabraClient" language="es" />
+      <VolumeChanger :client="palabraClient" language="fr" />
+    </div>
     <div>
       <h2>Transcription:</h2>
       <p>{{ transcriptionData }}</p>
diff --git a/packages/dev-app/src/views/examples/ChangeAudioOutputDevice.vue b/packages/dev-app/src/views/examples/ChangeAudioOutputDevice.vue
new file mode 100644
index 0000000..8164924
--- /dev/null
+++ b/packages/dev-app/src/views/examples/ChangeAudioOutputDevice.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import {
+  getLocalAudioTrack,
+  PalabraClient,
+  EVENT_TRANSLATION_RECEIVED,
+  EVENT_PARTIAL_TRANSCRIPTION_RECEIVED,
+  EVENT_REMOTE_TRACKS_UPDATE,
+  EVENT_DATA_RECEIVED,
+  getAudioOutputDevices,
+  PalabraApiClient,
+} from '@palabra-ai/translator';
+import { onMounted, ref, watch } from 'vue';
+import VolumeChanger from '@/components/VolumeChanger.vue';
+
+let palabraClient: PalabraClient | null = null;
+const isTranslationStarted = ref(false);
+const isMicrophoneMuted = ref(false);
+
+const transcriptionData = ref<string>('');
+const translationData = ref<string>('');
+const audioOutputDevice = ref<string>('default');
+const audioOutputDevices = ref<MediaDeviceInfo[]>([]);
+
+const buttonClass = 'flex-1 text-white p-3 rounded-md disabled:opacity-50 disabled:cursor-not-allowed';
+const clearSessions = async () => {
+  const apiClient = new PalabraApiClient({
+      clientId: import.meta.env.VITE_PALABRA_CLIENT_ID,
+      clientSecret: import.meta.env.VITE_PALABRA_CLIENT_SECRET,
+  }, import.meta.env.VITE_PALABRA_ENDPOINT);
+
+  const sessions = await apiClient.fetchActiveSessions();
+  sessions?.data?.sessions?.forEach(session => {
+    apiClient.deleteStreamingSession(session.id);
+  });
+}
+
+const handleClientEvents = () => {
+  if (!palabraClient) return;
+
+  palabraClient.on(EVENT_DATA_RECEIVED, (data) => {
+    console.log('Data received:', data);
+  });
+
+  palabraClient.on(EVENT_PARTIAL_TRANSCRIPTION_RECEIVED, (data) => {
+    if (data) {
+      transcriptionData.value = data.transcription.text;
+    }
+  });
+
+  palabraClient.on(EVENT_TRANSLATION_RECEIVED, (data) => {
+    if (data) {
+      translationData.value = data.transcription.text;
+    }
+  });
+
+  palabraClient.on(EVENT_REMOTE_TRACKS_UPDATE, (data) => {
+    console.log('Remote tracks updated:', data);
+  });
+
+  palabraClient.on(EVENT_DATA_RECEIVED, (data) => {
+      console.log('Data received EVENT_DATA_RECEIVED:', data);
+  });
+}
+
+watch(audioOutputDevice, async (newVal) => {
+  console.log('audioOutputDevice', newVal);
+  if (palabraClient) {
+    await palabraClient.changeAudioOutputDevice(newVal);
+  }
+});
+
+onMounted(async () => {
+  audioOutputDevices.value = await getAudioOutputDevices();
+
+  await clearSessions();
+ 
+  palabraClient = new PalabraClient({
+    auth: {
+      clientId: import.meta.env.VITE_PALABRA_CLIENT_ID,
+      clientSecret: import.meta.env.VITE_PALABRA_CLIENT_SECRET,
+    },
+    translateFrom: 'en',
+    translateTo: 'es',
+    handleOriginalTrack: getLocalAudioTrack,
+    apiBaseUrl: import.meta.env.VITE_PALABRA_ENDPOINT,
+  });
+
+  handleClientEvents();
+});
+
+const startTranslation = async () => {
+  try {
+    isTranslationStarted.value = true;
+    await palabraClient?.startTranslation();
+    await palabraClient?.startPlayback();
+  } catch (error) {
+    await stopTranslation();
+    alert(error);
+  }
+};
+
+const stopTranslation = async () => {
+  isTranslationStarted.value = false;
+  isMicrophoneMuted.value = false;
+  await palabraClient?.stopTranslation();
+  reset();
+  await palabraClient?.cleanup();
+};
+
+const toggleMicrophone = () => {
+  if (!palabraClient) return;
+
+  if (isMicrophoneMuted.value) {
+    palabraClient.unmuteOriginalTrack();
+    isMicrophoneMuted.value = false;
+  } else {
+    palabraClient.muteOriginalTrack();
+    isMicrophoneMuted.value = true;
+  }
+};
+
+const reset = () => {
+  transcriptionData.value = '';
+  translationData.value = '';
+};
+</script>
+
+<template>
+  <div class="container mx-auto px-4 py-8">
+    <div class="max-w-2xl mx-auto flex flex-col gap-4">
+      <h2 class="text-2xl font-bold mb-6 text-center">Basic Translator Example</h2>
+
+      
+
+      <div class="flex flex-col gap-4 shadow-md p-6 rounded-lg">
+        <h1>Change Audio Output Device</h1>
+        <select v-model="audioOutputDevice" class="w-full p-2 rounded-md border border-gray-300">
+          <option v-for="device in audioOutputDevices" :key="device.deviceId" :value="device.deviceId">
+            {{ device.label }}
+          </option>
+        </select>
+
+        <VolumeChanger v-if="isTranslationStarted && palabraClient" :client="palabraClient" language="es" />
+      </div>
+      <div class="bg-white rounded-lg shadow-lg p-6 flex flex-col gap-7">
+        <div>
+          <h3>Transcription:</h3>
+          <p class="text-sm text-gray-600">{{ transcriptionData }}</p>
+        </div>
+
+        <div class="flex items-center gap-4 md:flex-row flex-col">
+          <button
+            :disabled="isTranslationStarted"
+            :class="buttonClass"
+            class="bg-blue-500 hover:bg-blue-600"
+            @click="startTranslation"
+          >
+            Start Translation
+          </button>
+          <button
+            :disabled="!isTranslationStarted"
+            :class="buttonClass"
+            class="bg-red-500 hover:bg-red-600"
+            @click="stopTranslation"
+          >
+            Stop Translation
+          </button>
+          <button
+            :disabled="!isTranslationStarted"
+            :class="[
+              buttonClass,
+              isMicrophoneMuted ? 'bg-green-500 hover:bg-green-600' : 'bg-yellow-500 hover:bg-yellow-600'
+            ]"
+            @click="toggleMicrophone"
+          >
+            {{ isMicrophoneMuted ? '🔇 Unmute microphone' : '🎤 Mute microphone' }}
+          </button>
+        </div>
+        <div class="mb-14">
+          <h3>Translation:</h3>
+          <p class="text-sm text-gray-600">{{ translationData }}</p>
+        </div>
+        <div class="text-sm text-gray-600">
+          <p>This is a basic example demonstrating:</p>
+          <ul class="list-disc ml-6 mt-2">
+            <li>Starting/stopping translation</li>
+            <li>Microphone muting</li>
+            <li>Basic error handling</li>
+            <li>Transcription and translation data</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/packages/dev-app/src/views/examples/FromAudioFile.vue b/packages/dev-app/src/views/examples/FromAudioFile.vue
new file mode 100644
index 0000000..44bc8fc
--- /dev/null
+++ b/packages/dev-app/src/views/examples/FromAudioFile.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import {
+  PalabraClient,
+  EVENT_TRANSLATION_RECEIVED,
+  EVENT_PARTIAL_TRANSCRIPTION_RECEIVED,
+  EVENT_REMOTE_TRACKS_UPDATE,
+  createTrackFromFile,
+  PalabraApiClient,
+} from '@palabra-ai/translator';
+import { onMounted, ref } from 'vue';
+
+let palabraClient: PalabraClient | null = null;
+const isTranslationStarted = ref(false);
+const isMicrophoneMuted = ref(false);
+
+const transcriptionData = ref<string>('');
+const translationData = ref<string>('');
+
+const getAudioTrack = async (): Promise<MediaStreamTrack> => {
+  const audioUrl = new URL(`../../assets/track-1.test.mp3`, import.meta.url).href;
+  const response = await fetch(audioUrl);
+  if (!response.ok) {
+    throw new Error(`Failed to load audio file: ${response.statusText}`);
+  }
+
+  const audioBlob = await response.blob();
+
+  const { track } = await createTrackFromFile(audioBlob, new AudioContext());
+
+  return track;
+};
+
+onMounted(async () => {
+  const apiClient = new PalabraApiClient({
+      clientId: import.meta.env.VITE_PALABRA_CLIENT_ID,
+      clientSecret: import.meta.env.VITE_PALABRA_CLIENT_SECRET,
+    }, import.meta.env.VITE_PALABRA_ENDPOINT)
+
+  const sessionsData = await apiClient.fetchActiveSessions();
+
+  sessionsData?.data?.sessions?.forEach((session: any) => {
+    apiClient.deleteStreamingSession(session.id);
+  });
+  
+
+  palabraClient = new PalabraClient({
+    auth: {
+      clientId: import.meta.env.VITE_PALABRA_CLIENT_ID,
+      clientSecret: import.meta.env.VITE_PALABRA_CLIENT_SECRET,
+    },
+    translateFrom: 'ru',
+    translateTo: 'en-us',
+    handleOriginalTrack: getAudioTrack,
+    apiBaseUrl: import.meta.env.VITE_PALABRA_ENDPOINT,
+  });
+
+  palabraClient.on(EVENT_PARTIAL_TRANSCRIPTION_RECEIVED, (data) => {
+    if (data) {
+      transcriptionData.value = data.transcription.text;
+    }
+  });
+
+  palabraClient.on(EVENT_TRANSLATION_RECEIVED, (data) => {
+    if (data) {
+      translationData.value = data.transcription.text;
+    }
+  });
+
+  palabraClient.on(EVENT_REMOTE_TRACKS_UPDATE, (data) => {
+    console.log('Remote tracks updated:', data);
+  });
+});
+
+const startTranslation = async () => {
+  isTranslationStarted.value = true;
+  await palabraClient?.startTranslation();
+  await palabraClient?.startPlayback();
+};
+
+const stopTranslation = async () => {
+  isTranslationStarted.value = false;
+  isMicrophoneMuted.value = false;
+  await palabraClient?.stopTranslation();
+  reset();
+  await palabraClient?.cleanup();
+};
+
+const toggleMicrophone = () => {
+  if (!palabraClient) return;
+
+  if (isMicrophoneMuted.value) {
+    palabraClient.unmuteOriginalTrack();
+    isMicrophoneMuted.value = false;
+  } else {
+    palabraClient.muteOriginalTrack();
+    isMicrophoneMuted.value = true;
+  }
+};
+
+const reset = () => {
+  transcriptionData.value = '';
+  translationData.value = '';
+};
+</script>
+
+<template>
+  <div class="container mx-auto px-4 py-8">
+    <div class="max-w-2xl mx-auto">
+      <h2 class="text-2xl font-bold mb-6 text-center">Basic Translator Example (from audio file)</h2>
+      <p class="text-sm text-gray-600">
+        This example demonstrates how to translate audio from a file. 
+        <br>
+        <span class="text-sm text-red-600">
+          Put your audio file in the <code>assets</code> folder and name it <code>track-1.test.mp3</code>.
+          Do not forget setup language in the <code>translateFrom</code> and <code>translateTo</code> fields based on the audio file.
+        </span>
+      </p>
+      <div class="bg-white rounded-lg shadow-lg p-6 flex flex-col gap-7">
+        <div>
+          <h3>Transcription:</h3>
+          <p class="text-sm text-gray-600">{{ transcriptionData }}</p>
+        </div>
+
+        <div class="flex items-center gap-4 md:flex-row flex-col">
+          <button
+            :disabled="isTranslationStarted"
+            class="flex-1 bg-blue-500 text-white p-3 rounded-md hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
+            @click="startTranslation"
+          >
+            Start Translation
+          </button>
+          <button
+            :disabled="!isTranslationStarted"
+            class="flex-1 bg-red-500 text-white p-3 rounded-md hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed"
+            @click="stopTranslation"
+          >
+            Stop Translation
+          </button>
+          <button
+            :disabled="!isTranslationStarted"
+            :class="isMicrophoneMuted ? 'bg-green-500 hover:bg-green-600' : 'bg-yellow-500 hover:bg-yellow-600'"
+            class="flex-1 text-white p-3 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
+            @click="toggleMicrophone"
+          >
+            {{ isMicrophoneMuted ? '🔇 Unmute microphone' : '🎤 Mute microphone' }}
+          </button>
+        </div>
+        <div class="mb-14">
+          <h3>Translation:</h3>
+          <p class="text-sm text-gray-600">{{ translationData }}</p>
+        </div>
+        <div class="text-sm text-gray-600">
+          <p>This is a basic example demonstrating:</p>
+          <ul class="list-disc ml-6 mt-2">
+            <li>Starting/stopping translation</li>
+            <li>Microphone muting</li>
+            <li>Basic error handling</li>
+            <li>Transcription and translation data</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/packages/lib/README.md b/packages/lib/README.md
index b1f51b4..45eee74 100644
--- a/packages/lib/README.md
+++ b/packages/lib/README.md
@@ -74,6 +74,24 @@ await client.stopPlayback();
 await client.stopTranslation();
 ```
 
+### 6. Output device changing
+
+> [!NOTE]
+> Audio output device switching is supported only in browsers that implement setSinkId(). In unsupported browsers like Safari, this method will have no effect.
+> 
+```ts
+await client.changeAudioOutputDevice('deviceId')
+```
+
+### 7. Volume changing for audio track by language
+
+> [!NOTE]
+> Volume should be a value between 0.0 and 1.0, where 0.0 is muted and 1.0 is maximum volume.
+> 
+```ts
+client.setVolume('es', .7)
+```
+
 > [!NOTE]
 > Browsers may restrict audio playback initiated without user interaction.
 > Each browser may also define user interaction differently.
@@ -145,6 +163,14 @@ new PalabraClient(options: PalabraClientData)
 - `unmuteOriginalTrack(): void`  
   Unmutes the original audio track (microphone).
 
+- `setVolume(language: string, volume: number): void`  
+Set volume for audio track by given language. Volume should be between 0.0 (muted) and 1.0 (maximum)
+
+- `changeAudioOutputDevice(deviceId: string): Promise<void>`
+  Change output device
+  > Note: Audio output device switching is supported only in browsers that implement setSinkId(). In unsupported browsers like Safari, this method will have no effect.
+  > 
+
 - `cleanup(): Promise<void>`  
   Stops translation and playback, releases resources, and resets the client to its initial state.
 
diff --git a/packages/lib/package.json b/packages/lib/package.json
index 8bb5a86..fec8a9b 100644
--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@palabra-ai/translator",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "private": false,
     "main": "dist/lib.js",
     "types": "dist/index.d.ts",
diff --git a/packages/lib/src/PalabraClient.model.ts b/packages/lib/src/PalabraClient.model.ts
index c85724c..8a54087 100644
--- a/packages/lib/src/PalabraClient.model.ts
+++ b/packages/lib/src/PalabraClient.model.ts
@@ -17,12 +17,4 @@ export interface PalabraClientData {
   handleOriginalTrack: () => Promise<MediaStreamTrack>;
   transportType?: 'webrtc'; // TODO: add websocket transport | 'websocket'
   apiBaseUrl?: string;
-}
-
-export interface PlayTranslationContext {
-  streamSource: MediaStreamAudioSourceNode | null;
-  gainNode: GainNode | null;
-  audioElement: InstanceType<typeof Audio> | null;
-  audioSources: MediaStreamAudioSourceNode[];
-  gainNodes: GainNode[];
 }
\ No newline at end of file
diff --git a/packages/lib/src/PalabraClient.ts b/packages/lib/src/PalabraClient.ts
index 8bded7c..a10ff63 100644
--- a/packages/lib/src/PalabraClient.ts
+++ b/packages/lib/src/PalabraClient.ts
@@ -1,4 +1,4 @@
-import { PalabraClientData, PlayTranslationContext } from '~/PalabraClient.model';
+import { PalabraClientData } from '~/PalabraClient.model';
 import { PalabraApiClient } from '~/api/api';
 import { PalabraWebRtcTransport } from '~/transport/PalabraWebRtcTransport';
 import { PipelineConfigManager } from '~/config/PipelineConfigManager';
@@ -10,9 +10,11 @@ import {
   EVENT_STOP_TRANSLATION,
   PalabraEvents,
   PROXY_EVENTS,
+  RemoteTrackInfo,
 } from '~/transport/PalabraWebRtcTransport.model';
 import { PalabraBaseEventEmitter } from '~/PalabraBaseEventEmitter';
 import { SessionResponse } from '~/api/api.model';
+import { supportsAudioContextSetSinkId } from './utils';
 
 export class PalabraClient extends PalabraBaseEventEmitter {
   private translateFrom: string;
@@ -25,19 +27,15 @@ export class PalabraClient extends PalabraBaseEventEmitter {
   private transportType: PalabraClientData['transportType'];
   private configManager: PipelineConfigManager;
   private audioContext: AudioContext;
-  private playTranslationContext: PlayTranslationContext = {
-    streamSource: null,
-    gainNode: null,
-    audioElement: null,
-    audioSources: [],
-    gainNodes: [],
-  };
+
   private shouldPlayTranslation: boolean;
 
-  private translationTracks: MediaStreamTrack[];
+  private translationTracks = new Map<string, RemoteTrackInfo>();
 
   private sessionData: SessionResponse | null = null;
 
+  private deviceId = '';
+
   constructor(data: PalabraClientData) {
     super();
 
@@ -62,8 +60,8 @@ export class PalabraClient extends PalabraBaseEventEmitter {
       this.emit(EVENT_START_TRANSLATION);
       return true;
     } catch (error) {
-      console.error('Failed to start translation:', error);
-      return false;
+      await this.stopTranslation();
+      throw error;
     }
   }
 
@@ -71,25 +69,53 @@ export class PalabraClient extends PalabraBaseEventEmitter {
     await this.transport?.disconnect();
     await this.deleteSession();
     this.transport = null;
+    this.stopPlayback();
+    this.closeAudioContext();
+    this.cleanUnusedTracks([]);
     this.emit(EVENT_STOP_TRANSLATION);
   }
 
   public async startPlayback() {
-    await this.initAudioContext();
     this.shouldPlayTranslation = true;
     this.playTracks();
   }
 
   public async stopPlayback() {
     this.shouldPlayTranslation = false;
-    this.resetPlayTranslationContext();
+    this.translationTracks.forEach(track => {
+      track.remoteAudioTrack.detach();
+    });
   }
 
-  private initTransportHandlers() {
+  public setVolume(language: string, volume: number) {
+    this.translationTracks?.forEach(track => {
+      if (track.language === language) {
+        console.log('setting volume', volume, 'for', language);
+        track.remoteAudioTrack.setVolume(volume);
+      }
+    });
+  }
 
+  private cleanUnusedTracks(event: RemoteTrackInfo[]) {
+    const newTracks = new Set(event.map(track => track.remoteAudioTrack.sid));
+    this.translationTracks.forEach((track, sid) => {
+      if (!newTracks.has(sid)) {
+        track.remoteAudioTrack.detach();
+        this.translationTracks.delete(sid);
+      }
+    });
+  }
+
+  private initTransportHandlers() {
     this.transport.on(EVENT_REMOTE_TRACKS_UPDATE, (event) => {
 
-      this.translationTracks = event.map(track => track.track);
+      this.cleanUnusedTracks(event);
+
+      event.forEach(track => {
+        if (!this.translationTracks.has(track.remoteAudioTrack.sid)) {
+          this.translationTracks.set(track.remoteAudioTrack.sid, track);
+        }
+      });
 
       if (this.shouldPlayTranslation) {
         this.playTracks();
@@ -126,11 +152,14 @@ export class PalabraClient extends PalabraBaseEventEmitter {
 
     this.originalTrack = await this.handleOriginalTrack();
 
+    this.initAudioContext();
+
     this.transport = new PalabraWebRtcTransport({
       streamUrl: sessionResponse.data.webrtc_url,
       accessToken: sessionResponse.data.publisher,
       inputStream: new MediaStream([this.originalTrack]),
       configManager: this.configManager,
+      audioContext: supportsAudioContextSetSinkId() ? this.audioContext : undefined,
     });
 
     return this.transport;
@@ -190,58 +219,21 @@ export class PalabraClient extends PalabraBaseEventEmitter {
     this.initConfig();
   }
 
-  private resetPlayTranslationContext() {
-    this.playTranslationContext.streamSource?.disconnect();
-    this.playTranslationContext.gainNode?.disconnect();
-    this.playTranslationContext.audioElement?.pause();
-    if (this.playTranslationContext.audioElement) {
-      this.playTranslationContext.audioElement.srcObject = null;
-    }
-    this.playTranslationContext.audioElement = null;
-    this.playTranslationContext.streamSource = null;
-    this.playTranslationContext.gainNode = null;
+  async changeAudioOutputDevice(deviceId: string) {
+    this.deviceId = deviceId;
+    this.transport.getRoom().switchActiveDevice('audiooutput', this.deviceId);
   }
 
-  private async playTracks() {
-    if (!this.translationTracks || this.translationTracks.length === 0) return;
-
-    const mediaStream = new MediaStream(this.translationTracks);
-
-    const audioTracks = mediaStream.getAudioTracks();
-
-    if (audioTracks.length === 0) {
-      console.warn('No audio tracks found in MediaStream');
-      return;
-    }
-    this.playTranslationContext.audioSources?.forEach(source => source.disconnect());
-    this.playTranslationContext.gainNodes?.forEach(node => node.disconnect());
-
-    if (!this.playTranslationContext.audioElement) {
-      this.playTranslationContext.audioElement = new Audio();
-    }
-    this.playTranslationContext.audioElement.srcObject = mediaStream;
-    this.playTranslationContext.audioElement.volume = 0;
-
-    this.playTranslationContext.audioSources = [];
-    this.playTranslationContext.gainNodes = [];
-
-    const audioContext = new AudioContext();
-
-    for (const track of audioTracks) {
-      const singleTrackStream = new MediaStream([track]);
-      const streamSource = audioContext?.createMediaStreamSource(singleTrackStream);
-      const gainNode = audioContext?.createGain();
-
-      streamSource.connect(gainNode);
-      gainNode.connect(audioContext?.destination);
-
-      this.playTranslationContext.audioSources.push(streamSource);
-      this.playTranslationContext.gainNodes.push(gainNode);
-    }
+  private isAttached(track: RemoteTrackInfo) {
+    return track.remoteAudioTrack.attachedElements.length > 0;
+  }
 
-    if (audioContext?.state === 'suspended') {
-      await audioContext?.resume();
-    }
+  private async playTracks() {
+    this.translationTracks?.forEach(track => {
+      if (!this.isAttached(track)) {
+        track.remoteAudioTrack.attach();
+      }
+    });
   }
 
   private async initAudioContext() {
@@ -249,6 +241,11 @@ export class PalabraClient extends PalabraBaseEventEmitter {
     this.audioContext = new AudioContext();
   }
 
+  private closeAudioContext() {
+    this.audioContext?.close();
+    this.audioContext = null;
+  }
+
   private initConfig() {
     this.configManager = new PipelineConfigManager(this.transportType);
 
diff --git a/packages/lib/src/__tests__/PalabraClient.test.ts b/packages/lib/src/__tests__/PalabraClient.test.ts
index 8e433d5..2fa9fcf 100644
--- a/packages/lib/src/__tests__/PalabraClient.test.ts
+++ b/packages/lib/src/__tests__/PalabraClient.test.ts
@@ -74,12 +74,17 @@ vi.mock('../api/api', () => ({
   })),
 }));
 
+const mockSwitchActiveDevice = vi.fn();
+
 vi.mock('../transport/PalabraWebRtcTransport', () => ({
   PalabraWebRtcTransport: vi.fn().mockImplementation(() => ({
     connect: vi.fn().mockResolvedValue(undefined),
     disconnect: vi.fn().mockResolvedValue(undefined),
     setTask: vi.fn().mockResolvedValue(undefined),
     on: vi.fn().mockImplementation(() => { /* mock */ }),
+    getRoom: vi.fn().mockImplementation(() => ({
+      switchActiveDevice: mockSwitchActiveDevice,
+    })),
   })),
 }));
 
@@ -122,17 +127,13 @@ describe('PalabraClient', () => {
 
   it('should startPlayback and call playTracks', async () => {
     const playTracksSpy = vi.spyOn(client as unknown as { playTracks: () => void }, 'playTracks').mockImplementation(() => undefined);
-    const initAudioContextSpy = vi.spyOn(client as unknown as { initAudioContext: () => void }, 'initAudioContext').mockImplementation(() => undefined);
     await client.startPlayback();
     expect(playTracksSpy).toHaveBeenCalled();
-    expect(initAudioContextSpy).toHaveBeenCalled();
     expect((client as unknown as { shouldPlayTranslation: boolean }).shouldPlayTranslation).toBe(true);
   });
 
   it('should stopPlayback and reset context', async () => {
-    const resetSpy = vi.spyOn(client as unknown as { resetPlayTranslationContext: () => void }, 'resetPlayTranslationContext').mockImplementation(() => undefined);
     await client.stopPlayback();
-    expect(resetSpy).toHaveBeenCalled();
     expect((client as unknown as { shouldPlayTranslation: boolean }).shouldPlayTranslation).toBe(false);
   });
 
@@ -210,4 +211,68 @@ describe('PalabraClient', () => {
     expect(stopPlaybackSpy).toHaveBeenCalled();
     expect(initConfigSpy).toHaveBeenCalled();
   });
+
+  it('should setVolume', async  () => {
+    const setVolumeSpy = vi.spyOn(client as unknown as { setVolume: (...args: unknown[]) => void }, 'setVolume').mockImplementation(() => undefined);
+    await client.startTranslation();
+    client.setVolume('es', 0.5);
+    expect(setVolumeSpy).toHaveBeenCalled();
+  });
+
+  it('should changeAudioOutputDevice', async () => {
+    await client.startTranslation();
+    await client.changeAudioOutputDevice('mock-device-id');
+    expect((client as unknown as { deviceId: string }).deviceId).toBe('mock-device-id');
+    expect(mockSwitchActiveDevice).toHaveBeenCalledWith('audiooutput', 'mock-device-id');
+  });
+
+  it('should call attach on remoteAudioTrack when playTracks is called', async () => {
+    const mockAttach = vi.fn();
+    const mockRemoteAudioTrack = { attach: mockAttach, attachedElements: [] };
+    (client as unknown as { translationTracks: Map<string, unknown> })
+      .translationTracks.set('test-sid', {
+        remoteAudioTrack: mockRemoteAudioTrack,
+        language: 'es',
+      });
+    await (client as unknown as { playTracks: () => void }).playTracks();
+    expect(mockAttach).toHaveBeenCalled();
+  });
+
+  it('should call detach on remoteAudioTrack when stopPlayback is called', async () => {
+    const mockDetach = vi.fn();
+    const mockRemoteAudioTrack = { detach: mockDetach, attachedElements: [] };
+    (client as unknown as { translationTracks: Map<string, unknown> })
+      .translationTracks.set('test-sid', {
+        remoteAudioTrack: mockRemoteAudioTrack,
+        language: 'es',
+      });
+    await client.stopPlayback();
+    expect(mockDetach).toHaveBeenCalled();
+  });
+
+  it('should not call attach on remoteAudioTrack when playTracks is called and remoteAudioTrack is already attached', async () => {
+    const mockAttach = vi.fn();
+    const mockRemoteAudioTrack = { attach: mockAttach, attachedElements: [1] };
+
+    (client as unknown as { translationTracks: Map<string, unknown> })
+      .translationTracks.set('test-sid', {
+        remoteAudioTrack: mockRemoteAudioTrack,
+        language: 'es',
+      });
+
+    await (client as unknown as { playTracks: () => void }).playTracks();
+    expect(mockAttach).not.toHaveBeenCalled();
+  });
+
+  it('should call detach on remoteAudioTrack when stopPlayback is called', async () => {
+    const mockDetach = vi.fn();
+    const mockRemoteAudioTrack = { detach: mockDetach, attachedElements: [] };
+    (client as unknown as { translationTracks: Map<string, unknown> })
+      .translationTracks.set('test-sid', {
+        remoteAudioTrack: mockRemoteAudioTrack,
+        language: 'es',
+      });
+    await client.stopPlayback();
+    expect(mockDetach).toHaveBeenCalled();
+  });
 });
\ No newline at end of file
diff --git a/packages/lib/src/__tests__/PalabraWebRtcTransport.test.ts b/packages/lib/src/__tests__/PalabraWebRtcTransport.test.ts
index 28bebe5..f86f9e6 100644
--- a/packages/lib/src/__tests__/PalabraWebRtcTransport.test.ts
+++ b/packages/lib/src/__tests__/PalabraWebRtcTransport.test.ts
@@ -176,6 +176,7 @@ describe('PalabraWebRtcTransport', () => {
           track: {},
           language: 'en',
           participant: 'user1',
+          remoteAudioTrack: mockTrack,
         },
       ],
     );
diff --git a/packages/lib/src/api/api.model.ts b/packages/lib/src/api/api.model.ts
index 138a040..dd7bdec 100644
--- a/packages/lib/src/api/api.model.ts
+++ b/packages/lib/src/api/api.model.ts
@@ -1,6 +1,14 @@
 export interface ApiResponse<T> {
     data?: T;
     ok: boolean;
+    errors?: {
+      detail: string;
+      error_code:number;
+      instance:string;
+      status:number;
+      title:string;
+      type:string;
+    }[];
   }
 
 export interface SessionResponse {
@@ -13,9 +21,18 @@ export interface SessionResponse {
 }
 
 export interface CreateSessionPayload {
-    data: {
-      publisher_count: number,
-      subscriber_count: number,
-      publisher_can_subscribe: boolean,
-    }
-  }
\ No newline at end of file
+  data: {
+    publisher_count: number,
+    subscriber_count: number,
+    publisher_can_subscribe: boolean,
+  }
+}
+
+export interface SessionListResponse {
+  sessions: {
+    id:string,
+    created_at:string,
+    updated_at:string,
+    expires_at:string
+  }[] | null
+}
\ No newline at end of file
diff --git a/packages/lib/src/api/api.ts b/packages/lib/src/api/api.ts
index 6a62dda..c7f3662 100644
--- a/packages/lib/src/api/api.ts
+++ b/packages/lib/src/api/api.ts
@@ -1,12 +1,12 @@
 import { ClientCredentialsAuth, UserTokenAuth } from '~/PalabraClient.model';
-import { ApiResponse, SessionResponse, CreateSessionPayload } from './api.model';
+import { ApiResponse, SessionResponse, CreateSessionPayload, SessionListResponse } from './api.model';
 
 export class PalabraApiClient {
   private baseUrl: string;
   private readonly clientId: string;
   private readonly clientSecret: string;
 
-  constructor(auth: ClientCredentialsAuth | UserTokenAuth, baseUrl?: string) {
+  constructor(auth: ClientCredentialsAuth | UserTokenAuth, baseUrl = 'https://api.palabra.ai') {
     this.baseUrl = baseUrl;
     this.clientId = 'clientId' in auth ? auth.clientId : '';
     this.clientSecret = 'clientSecret' in auth ? auth.clientSecret : '';
@@ -28,32 +28,27 @@ export class PalabraApiClient {
      * createStreamingSession implements Step 2 of the Palabra Quick Start Guide: Creating a Streaming Session.
      * Documentation Reference: https://docs.palabra.ai/docs/quick-start#step-2-create-a-streaming-session
      */
-  createStreamingSession = async (): Promise<ApiResponse<SessionResponse> | null> => {
-    try {
-      const payload: CreateSessionPayload = {
-        data: {
-          publisher_count: 1,
-          subscriber_count: 0,
-          publisher_can_subscribe: true,
-        },
-      };
+  createStreamingSession = async (): Promise<ApiResponse<SessionResponse>> => {
+    const payload: CreateSessionPayload = {
+      data: {
+        publisher_count: 1,
+        subscriber_count: 0,
+        publisher_can_subscribe: true,
+      },
+    };
 
-      const response = await fetch(`${this.baseUrl}/session-storage/session`, {
-        method: 'POST',
-        headers: this.baseHeaders(),
-        body: JSON.stringify(payload),
-      });
+    const response = await fetch(`${this.baseUrl}/session-storage/session`, {
+      method: 'POST',
+      headers: this.baseHeaders(),
+      body: JSON.stringify(payload),
+    });
 
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
+    const data: ApiResponse<SessionResponse> = await response.json();
 
-      const data: ApiResponse<SessionResponse> = await response.json();
-      return data;
-    } catch (e) {
-      console.error(e);
-      return null;
+    if (!data.ok) {
+      throw new Error(`${JSON.stringify(data.errors)}`);
     }
+    return data;
   };
 
   deleteStreamingSession = async (sessionId: string): Promise<ApiResponse<void> | null> => {
@@ -71,4 +66,21 @@ export class PalabraApiClient {
       return null;
     }
   };
+
+  fetchActiveSessions = async (): Promise<ApiResponse<SessionListResponse> | null> => {
+    try {
+      const response = await fetch(`${this.baseUrl}/session-storage/sessions`, {
+        headers: this.baseHeaders(),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      return await response.json();
+    } catch (e) {
+      console.error(e);
+      return null;
+    }
+  };
 }
\ No newline at end of file
diff --git a/packages/lib/src/lib.ts b/packages/lib/src/lib.ts
index 430d907..5004834 100644
--- a/packages/lib/src/lib.ts
+++ b/packages/lib/src/lib.ts
@@ -3,8 +3,5 @@ export * from './PalabraClient.model';
 export * from './transport/PalabraWebRtcTransport';
 export * from './transport/PalabraWebRtcTransport.model';
 export * from './api/api';
-export * from './utils/browser-devices';
-export * from './utils/data-filters';
-export * from './utils/data-filters.model';
-export * from './utils/source';
-export * from './utils/target';
\ No newline at end of file
+export * from './utils';
+export * from './api/api.model';
\ No newline at end of file
diff --git a/packages/lib/src/transport/PalabraWebRtcTransport.model.ts b/packages/lib/src/transport/PalabraWebRtcTransport.model.ts
index 73da722..ac6d879 100644
--- a/packages/lib/src/transport/PalabraWebRtcTransport.model.ts
+++ b/packages/lib/src/transport/PalabraWebRtcTransport.model.ts
@@ -1,5 +1,5 @@
 import { AllowedMessageTypes } from '~/config/PipelineConfig.model';
-import { ConnectionState, RemoteParticipant, TrackPublishOptions } from 'livekit-client';
+import { ConnectionState, RemoteAudioTrack, RemoteParticipant, TrackPublishOptions } from 'livekit-client';
 import { PipelineConfigManager } from '~/config/PipelineConfigManager';
 import { filterErrorData, filterPartialTranscriptionData, filterPartialTranslatedTranscriptionData, filterPipelineTimingsData, filterTranscriptionData, filterTranslationData } from '~/utils/data-filters';
 export interface PalabraWebRtcTransportConstructor {
@@ -8,8 +8,10 @@ export interface PalabraWebRtcTransportConstructor {
   inputStream: MediaStream;
   configManager: PipelineConfigManager;
   publishTrackSettings?: TrackPublishOptions;
+  audioContext?: AudioContext;
 }
 export interface RemoteTrackInfo {
+  remoteAudioTrack: RemoteAudioTrack;
   track: MediaStreamTrack;
   language: string;
   participant: string;
diff --git a/packages/lib/src/transport/PalabraWebRtcTransport.ts b/packages/lib/src/transport/PalabraWebRtcTransport.ts
index 6898d0d..7a00639 100644
--- a/packages/lib/src/transport/PalabraWebRtcTransport.ts
+++ b/packages/lib/src/transport/PalabraWebRtcTransport.ts
@@ -1,4 +1,13 @@
-import { LocalAudioTrack, Room, RoomEvent, Track, RemoteParticipant, RemoteTrack, TrackPublication, TrackPublishOptions } from 'livekit-client';
+import {
+  LocalAudioTrack,
+  Room,
+  RoomEvent,
+  Track,
+  RemoteParticipant,
+  TrackPublication,
+  TrackPublishOptions,
+  RemoteAudioTrack,
+} from 'livekit-client';
 import { RealtimeTransport } from '~/transport/RealtimeTransport.model';
 import {
   DataReceivedEventPayload,
@@ -28,7 +37,14 @@ export class PalabraWebRtcTransport extends PalabraBaseEventEmitter implements R
   constructor(data: PalabraWebRtcTransportConstructor) {
     super();
 
-    this.room = new Room();
+    const roomOptions = data.audioContext ? {
+      webAudioMix: {
+        audioContext: data.audioContext,
+      },
+    } : undefined;
+
+    this.room = new Room(roomOptions);
+
     this.streamUrl = data.streamUrl;
     this.accessToken = data.accessToken;
     this.inputStream = data.inputStream;
@@ -48,12 +64,13 @@ export class PalabraWebRtcTransport extends PalabraBaseEventEmitter implements R
     this.setupRoomEventHandlers();
   }
 
-  private handleRemoteAudioTrack(track: RemoteTrack, publication: TrackPublication, participant: RemoteParticipant): void {
+  private handleRemoteAudioTrack(track: RemoteAudioTrack, publication: TrackPublication, participant: RemoteParticipant): void {
     try {
       console.log('handleRemoteAudioTrack >>>>>> participant', participant, publication);
       console.log('we set sid', track.sid);
 
       this.remoteTracks.set(track.sid, {
+        remoteAudioTrack: track,
         track: track.mediaStreamTrack,
         language: publication.trackName?.split('_')[1] || 'unknown',
         participant: participant.identity,
@@ -73,10 +90,10 @@ export class PalabraWebRtcTransport extends PalabraBaseEventEmitter implements R
 
       await this.room.connect(this.streamUrl, this.accessToken, { autoSubscribe: true });
 
-      await this.setTask(this.configManager.getConfig());
-
       await this.publishInputAudio();
 
+      await this.setTask(this.configManager.getConfig());
+
       console.log('✅ Successfully connected and published audio');
     } catch (error) {
       console.error('❌ Failed to connect to LiveKit room:', error);
@@ -112,7 +129,7 @@ export class PalabraWebRtcTransport extends PalabraBaseEventEmitter implements R
 
   private createHashForAllowedMessageTypes(allowedMessageTypes: AllowedMessageTypes[]): void {
     allowedMessageTypes.forEach(type => {
-      this.allowedMessageTypesHash.set(type, this.allowedMessageTypesHash.get(type) || 0 + 1);
+      this.allowedMessageTypesHash.set(type, 1);
     });
   }
 
@@ -155,14 +172,14 @@ export class PalabraWebRtcTransport extends PalabraBaseEventEmitter implements R
       this.removeRemoteAudioSourceByParticipant(participant.identity);
     });
 
-    this.room.on(RoomEvent.TrackSubscribed, (track: RemoteTrack, publication: TrackPublication, participant: RemoteParticipant) => {
+    this.room.on(RoomEvent.TrackSubscribed, (track: RemoteAudioTrack, publication: TrackPublication, participant: RemoteParticipant) => {
       console.log(`🎵 Track subscribed: ${publication.trackName} ${publication.trackSid}`, track.sid, track, 'from', participant.identity);
       if (track.kind === Track.Kind.Audio) {
         this.handleRemoteAudioTrack(track, publication, participant);
       }
     });
 
-    this.room.on(RoomEvent.TrackUnsubscribed, (track: RemoteTrack, publication: TrackPublication, participant: RemoteParticipant) => {
+    this.room.on(RoomEvent.TrackUnsubscribed, (track: RemoteAudioTrack, publication: TrackPublication, participant: RemoteParticipant) => {
       console.log(`🔇 Track unsubscribed: ${publication.trackName} ${publication.trackSid} ${track.sid} ${track.kind} from ${participant.identity}`);
       if (track.kind === Track.Kind.Audio) {
         this.removeRemoteAudioSourceBySid(track.sid);
diff --git a/packages/lib/src/utils/browser-devices.ts b/packages/lib/src/utils/browser-devices.ts
index b174b9c..4353fde 100644
--- a/packages/lib/src/utils/browser-devices.ts
+++ b/packages/lib/src/utils/browser-devices.ts
@@ -1,4 +1,4 @@
-export async function getLocalAudioTrack(): Promise<MediaStreamTrack> {
+export async function getLocalAudioTrack(deviceId?: string): Promise<MediaStreamTrack> {
   const stream = await navigator.mediaDevices.getUserMedia({
     audio: {
       autoGainControl: true,
@@ -6,6 +6,7 @@ export async function getLocalAudioTrack(): Promise<MediaStreamTrack> {
       noiseSuppression: true,
       // @ts-expect-error needed property
       highpassFilter: true,
+      deviceId: deviceId || undefined,
     },
   });
 
@@ -15,6 +16,21 @@ export async function getLocalAudioTrack(): Promise<MediaStreamTrack> {
 }
 
 export async function getAudioOutputDevices(): Promise<MediaDeviceInfo[]> {
+  let stream: MediaStream | null = null;
+  try {
+    stream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        deviceId: 'default',
+      },
+    });
+  } catch (err) {
+    console.error(`Error enumerating devices: ${err.name}: ${err.message}`);
+    return [];
+  } finally {
+    if (stream) {
+      stream.getTracks().forEach(track => track.stop());
+    }
+  }
   const devices = await navigator.mediaDevices.enumerateDevices();
   return devices.filter((d) => d.kind === 'audiooutput');
 }
diff --git a/packages/lib/src/utils/index.ts b/packages/lib/src/utils/index.ts
new file mode 100644
index 0000000..458c585
--- /dev/null
+++ b/packages/lib/src/utils/index.ts
@@ -0,0 +1,7 @@
+export * from './browser-devices';
+export * from './data-filters';
+export * from './data-filters.model';
+export * from './source';
+export * from './target';
+export * from './track-from-file';
+export * from './utils';
\ No newline at end of file
diff --git a/packages/lib/src/utils/track-from-file.ts b/packages/lib/src/utils/track-from-file.ts
new file mode 100644
index 0000000..7e3191f
--- /dev/null
+++ b/packages/lib/src/utils/track-from-file.ts
@@ -0,0 +1,43 @@
+/**
+ * Create a track from a file
+ * @param audioBlob - file
+ * @param audioContext - audio context AudioContext
+ * @param options - options { loop: boolean, autoPlay: boolean }
+ * @returns Promise<{track: MediaStreamTrack, audioElement: HTMLAudioElement}>
+ */
+export const createTrackFromFile = async (
+  audioBlob: Blob,
+  audioContext: AudioContext,
+  options: { loop: boolean, autoPlay: boolean } = { loop: true, autoPlay: true },
+): Promise<{track: MediaStreamTrack, audioElement: HTMLAudioElement}> => {
+
+  const audioUrl = URL.createObjectURL(audioBlob);
+
+  const audioElement = new Audio(audioUrl);
+  audioElement.loop = options.loop;
+
+  await new Promise((resolve, reject) => {
+    audioElement.addEventListener('canplaythrough', resolve);
+    audioElement.addEventListener('error', reject);
+    audioElement.load();
+  });
+
+  const source = audioContext.createMediaElementSource(audioElement);
+  const destination = audioContext.createMediaStreamDestination();
+
+  source.connect(destination);
+
+  if (options.autoPlay) {
+    audioElement.play();
+  }
+
+  const audioTrack = destination.stream.getAudioTracks()[0];
+
+  if (!audioTrack) {
+    throw new Error('No audio track found');
+  }
+
+  URL.revokeObjectURL(audioUrl);
+
+  return { track: audioTrack, audioElement };
+};
\ No newline at end of file
diff --git a/packages/lib/src/utils/utils.ts b/packages/lib/src/utils/utils.ts
new file mode 100644
index 0000000..106b3e2
--- /dev/null
+++ b/packages/lib/src/utils/utils.ts
@@ -0,0 +1,3 @@
+export const supportsAudioContextSetSinkId = () => {
+  return 'setSinkId' in AudioContext.prototype;
+};
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d12ae54..c4b8fac 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -120,6 +120,9 @@ importers:
       '@typescript-eslint/parser':
         specifier: ^8.34.0
         version: 8.34.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
+      '@vitest/coverage-v8':
+        specifier: ^3.2.4
+        version: 3.2.4(vitest@3.2.3(@types/node@22.15.30)(jsdom@26.1.0)(lightningcss@1.30.1))
       eslint:
         specifier: ^9.28.0
         version: 9.28.0(jiti@2.4.2)
@@ -290,6 +293,10 @@ packages:
     resolution: {integrity: sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q==}
     engines: {node: '>=6.9.0'}
 
+  '@bcoe/v8-coverage@1.0.2':
+    resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
+    engines: {node: '>=18'}
+
   '@bufbuild/protobuf@1.10.1':
     resolution: {integrity: sha512-wJ8ReQbHxsAfXhrf9ixl0aYbZorRuOWpBNzm8pL8ftmSxQx/wnJD5Eg861NwJU/czy2VXFIebCeZnZrI9rktIQ==}
 
@@ -675,6 +682,10 @@ packages:
     resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
     engines: {node: '>=18.0.0'}
 
+  '@istanbuljs/schema@0.1.3':
+    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
+    engines: {node: '>=8'}
+
   '@jridgewell/gen-mapping@0.3.8':
     resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
@@ -1113,6 +1124,15 @@ packages:
       vite: ^5.0.0 || ^6.0.0
       vue: ^3.2.25
 
+  '@vitest/coverage-v8@3.2.4':
+    resolution: {integrity: sha512-EyF9SXU6kS5Ku/U82E259WSnvg6c8KTjppUncuNdm5QHpe17mwREHnjDzozC8x9MZ0xfBUFSaLkRv4TMA75ALQ==}
+    peerDependencies:
+      '@vitest/browser': 3.2.4
+      vitest: 3.2.4
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
+
   '@vitest/eslint-plugin@1.2.1':
     resolution: {integrity: sha512-JQr1jdVcrsoS7Sdzn83h9sq4DvREf9Q/onTZbJCqTVlv/76qb+TZrLv/9VhjnjSMHweQH5FdpMDeCR6aDe2fgw==}
     peerDependencies:
@@ -1344,6 +1364,9 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
+  ast-v8-to-istanbul@0.3.3:
+    resolution: {integrity: sha512-MuXMrSLVVoA6sYN/6Hke18vMzrT4TZNbZIj/hvh0fnYFpO+/kFXcLIaiPwXXWaQUPg4yJD8fj+lfJ7/1EBconw==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1747,6 +1770,9 @@ packages:
     resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
     engines: {node: '>=18'}
 
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -1846,6 +1872,22 @@ packages:
     resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
     engines: {node: '>=16'}
 
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+
+  istanbul-lib-source-maps@5.0.6:
+    resolution: {integrity: sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==}
+    engines: {node: '>=10'}
+
+  istanbul-reports@3.1.7:
+    resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
+    engines: {node: '>=8'}
+
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
@@ -2027,6 +2069,13 @@ packages:
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
+  magicast@0.3.5:
+    resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
+
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+
   memorystream@0.3.1:
     resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
     engines: {node: '>= 0.10.0'}
@@ -2434,6 +2483,10 @@ packages:
     resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
     engines: {node: '>=18'}
 
+  test-exclude@7.0.1:
+    resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
+    engines: {node: '>=18'}
+
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
@@ -3013,6 +3066,8 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.27.1
 
+  '@bcoe/v8-coverage@1.0.2': {}
+
   '@bufbuild/protobuf@1.10.1': {}
 
   '@csstools/color-helpers@5.0.2': {}
@@ -3249,6 +3304,8 @@ snapshots:
     dependencies:
       minipass: 7.1.2
 
+  '@istanbuljs/schema@0.1.3': {}
+
   '@jridgewell/gen-mapping@0.3.8':
     dependencies:
       '@jridgewell/set-array': 1.2.1
@@ -3669,6 +3726,25 @@ snapshots:
       vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)
       vue: 3.5.16(typescript@5.8.3)
 
+  '@vitest/coverage-v8@3.2.4(vitest@3.2.3(@types/node@22.15.30)(jsdom@26.1.0)(lightningcss@1.30.1))':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@bcoe/v8-coverage': 1.0.2
+      ast-v8-to-istanbul: 0.3.3
+      debug: 4.4.1
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.6
+      istanbul-reports: 3.1.7
+      magic-string: 0.30.17
+      magicast: 0.3.5
+      std-env: 3.9.0
+      test-exclude: 7.0.1
+      tinyrainbow: 2.0.0
+      vitest: 3.2.3(@types/node@22.15.30)(jsdom@26.1.0)(lightningcss@1.30.1)
+    transitivePeerDependencies:
+      - supports-color
+
   '@vitest/eslint-plugin@1.2.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)(vitest@3.2.3(@types/node@22.15.30)(jsdom@26.1.0)(lightningcss@1.30.1))':
     dependencies:
       '@typescript-eslint/utils': 8.34.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
@@ -3963,6 +4039,12 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
+  ast-v8-to-istanbul@0.3.3:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      estree-walker: 3.0.3
+      js-tokens: 9.0.1
+
   balanced-match@1.0.2: {}
 
   birpc@2.3.0: {}
@@ -4403,6 +4485,8 @@ snapshots:
     dependencies:
       whatwg-encoding: 3.1.1
 
+  html-escaper@2.0.2: {}
+
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.3
@@ -4476,6 +4560,27 @@ snapshots:
 
   isexe@3.1.1: {}
 
+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-report@3.0.1:
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+
+  istanbul-lib-source-maps@5.0.6:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      debug: 4.4.1
+      istanbul-lib-coverage: 3.2.2
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-reports@3.1.7:
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+
   jackspeak@3.4.3:
     dependencies:
       '@isaacs/cliui': 8.0.2
@@ -4653,6 +4758,16 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  magicast@0.3.5:
+    dependencies:
+      '@babel/parser': 7.27.5
+      '@babel/types': 7.27.6
+      source-map-js: 1.2.1
+
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.7.2
+
   memorystream@0.3.1: {}
 
   merge2@1.4.1: {}
@@ -5030,6 +5145,12 @@ snapshots:
       mkdirp: 3.0.1
       yallist: 5.0.0
 
+  test-exclude@7.0.1:
+    dependencies:
+      '@istanbuljs/schema': 0.1.3
+      glob: 10.4.5
+      minimatch: 9.0.5
+
   tinybench@2.9.0: {}
 
   tinyexec@0.3.2: {}