1313 <!-- Add VAD-Web dependency -->
1414 < script src ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/ort.js "
> </ script > 1515 < script src ="
https://cdn.jsdelivr.net/npm/@ricky0123/[email protected] /dist/bundle.min.js "
> </ script > 16+
17+ < script src ="https://openfpcdn.io/fingerprintjs/v5/iife.min.js "> </ script >
1618 < style >
1719 .recording-pulse {
1820 animation : pulse 1s ease-in-out infinite alternate;
@@ -117,6 +119,11 @@ <h1 class="card-title text-2xl justify-center mb-6">Voice Chat</h1>
117119 </ div >
118120
119121 < script >
122+ FingerprintJS . load ( ) . then ( fp => fp . get ( ) ) . then ( result => {
123+ window . visitorId = result . visitorId ;
124+ console . log ( "FingerprintJS Visitor ID:" , window . visitorId ) ;
125+ } ) ;
126+
120127 class AudioRecorder {
121128 constructor ( ) {
122129 this . isRecording = false ;
@@ -176,6 +183,11 @@ <h1 class="card-title text-2xl justify-center mb-6">Voice Chat</h1>
176183 this . recordingMode = e . target . checked ;
177184 const modeText = this . recordingMode ? 'Recording mode' : 'Chat mode' ;
178185 this . addServerMessage ( `🔄 Switched to ${ modeText } ` ) ;
186+
187+ // Stop listening when switching modes
188+ if ( this . isVadActive ) {
189+ this . toggleRecording ( ) ;
190+ }
179191 } ) ;
180192
181193 // Add spacebar shortcut
@@ -234,27 +246,33 @@ <h1 class="card-title text-2xl justify-center mb-6">Voice Chat</h1>
234246 if ( this . isConnected ) {
235247 this . disconnectWebSocket ( ) ;
236248 } else {
237- this . connectWebSocket ( ) ;
249+ // Pass recording mode state to determine whether to add record parameter
250+ this . connectWebSocket ( this . recordingMode ) ;
238251 }
239252 }
240253
241- connectWebSocket ( ) {
254+ connectWebSocket ( addRecordParam = false ) {
242255 let url = this . wsUrlInput . value . trim ( ) ;
243256 if ( ! url ) {
244257 this . addServerMessage ( 'Please enter WebSocket URL' ) ;
245258 return ;
246259 }
247260 url = url . endsWith ( '/' ) ? url : url + '/' ;
248- let uuid = crypto . randomUUID ( ) ;
249- url = url + uuid ;
261+ let id = window . visitorId || crypto . randomUUID ( ) ;
262+ url = url + id ;
263+
264+ // If need to add recording parameter
265+ if ( addRecordParam ) {
266+ url = url + '?record=true' ;
267+ }
250268
251269 try {
252270 this . websocket = new WebSocket ( url ) ;
253271 this . websocket . binaryType = 'arraybuffer' ; // Set to receive binary data
254272
255273 this . websocket . onopen = ( ) => {
256274 this . isConnected = true ;
257- this . updateConnectionStatus ( 'connected' , 'Connected: ' + uuid ) ;
275+ this . updateConnectionStatus ( 'connected' , 'Connected: ' + id ) ;
258276 this . connectBtn . textContent = 'Disconnect' ;
259277 this . connectBtn . classList . remove ( 'btn-primary' ) ;
260278 this . connectBtn . classList . add ( 'btn-error' ) ;
@@ -336,16 +354,12 @@ <h1 class="card-title text-2xl justify-center mb-6">Voice Chat</h1>
336354 // Handle string events
337355 switch ( data ) {
338356 case 'HelloStart' :
339- this . addServerMessage ( `👋 Hello started` , debugInfo ) ;
340357 break ;
341358 case 'HelloEnd' :
342- this . addServerMessage ( `👋 Hello ended` , debugInfo ) ;
343359 break ;
344360 case 'BGStart' :
345- this . addServerMessage ( `🎵 Background music started` , debugInfo ) ;
346361 break ;
347362 case 'BGEnd' :
348- this . addServerMessage ( `🎵 Background music ended` , debugInfo ) ;
349363 break ;
350364 case 'EndAudio' :
351365 // Handle complete audio data
@@ -475,8 +489,32 @@ <h1 class="card-title text-2xl justify-center mb-6">Voice Chat</h1>
475489 this . myvad . pause ( ) ;
476490 this . isVadActive = false ;
477491 this . addServerMessage ( '⏹️ VAD stopped' ) ;
492+
493+ // Disconnect from server when stopping VAD listening
494+ if ( this . isConnected ) {
495+ this . disconnectWebSocket ( ) ;
496+ this . addServerMessage ( '🔌 Server connection closed' ) ;
497+ }
478498 } else {
479499 try {
500+ // In recording mode, reconnect to server with record=true parameter
501+ if ( this . recordingMode ) {
502+ if ( this . isConnected ) {
503+ this . addServerMessage ( '🔄 Recording mode: Reconnecting to server...' ) ;
504+ this . disconnectWebSocket ( ) ;
505+ // Wait for disconnection to complete
506+ await new Promise ( resolve => setTimeout ( resolve , 100 ) ) ;
507+ }
508+ this . connectWebSocket ( true ) ; // Add record=true parameter
509+ // Wait for connection to establish
510+ await new Promise ( resolve => setTimeout ( resolve , 1000 ) ) ;
511+ } else {
512+ // In chat mode, ensure connection is established
513+ this . connectWebSocket ( false ) ;
514+ // Wait for connection to establish
515+ await new Promise ( resolve => setTimeout ( resolve , 1000 ) ) ;
516+ }
517+
480518 await this . myvad . start ( ) ;
481519 this . isVadActive = true ;
482520 const modeText = this . recordingMode ? 'Recording mode' : 'Chat mode' ;
@@ -797,4 +835,4 @@ <h1 class="card-title text-2xl justify-center mb-6">Voice Chat</h1>
797835 </ script >
798836</ body >
799837
800- </ html >
838+ </ html >
0 commit comments