// App.jsx import React, { useState, useRef, useEffect, useCallback } from 'react'; import ReactDOM from 'react-dom/client'; // Asset Loading System class AssetLoader { constructor() { this.cache = new Map(); this.loadingPromises = new Map(); this.loadingErrors = new Map(); } async preloadImage(url) { if (this.cache.has(url)) { return this.cache.get(url); } if (this.loadingPromises.has(url)) { return this.loadingPromises.get(url); } const loadPromise = new Promise((resolve, reject) => { const img = new Image(); img.onload = () => { this.cache.set(url, img); this.loadingPromises.delete(url); resolve(img); }; img.onerror = (error) => { this.loadingErrors.set(url, error); this.loadingPromises.delete(url); reject(error); }; img.src = url; }); this.loadingPromises.set(url, loadPromise); return loadPromise; } async preloadCharacterAssets(character, expression) { const assets = ASSETS.characters[character]?.[expression]; if (!assets) { throw new Error(`Invalid character or expression: ${character}_${expression}`); } const promises = Object.values(assets).map(url => this.preloadImage(url)); return Promise.all(promises); } async preloadAllAssets() { const promises = []; // Preload backgrounds Object.values(ASSETS.backgrounds).forEach(url => { promises.push(this.preloadImage(url)); }); // Preload character assets Object.entries(ASSETS.characters).forEach(([char, expressions]) => { Object.keys(expressions).forEach(expr => { promises.push(this.preloadCharacterAssets(char, expr)); }); }); // Preload UI assets Object.values(ASSETS.ui).forEach(url => { promises.push(this.preloadImage(url)); }); return Promise.all(promises); } getLoadedImage(url) { return this.cache.get(url); } isLoaded(url) { return this.cache.has(url); } hasError(url) { return this.loadingErrors.has(url); } getError(url) { return this.loadingErrors.get(url); } } /** * Manages all local storage operations for the application */ class LocalStorageManager { constructor() { if (LocalStorageManager.instance) { return LocalStorageManager.instance; } this.storageKey = 'monikasChatHistory'; LocalStorageManager.instance = this; } isAvailable() { try { localStorage.setItem('test', 'test'); localStorage.removeItem('test'); return true; } catch (e) { return false; } } saveChatState(description, messageHistory) { if (!this.isAvailable()) return false; try { console.group('💾 Saving Chat State to LocalStorage'); const chatState = { characterDescription: description, messageHistory: messageHistory, timestamp: new Date().toISOString() }; console.log('Chat State to Save:', chatState); localStorage.setItem(this.storageKey, JSON.stringify(chatState)); console.log('Save Successful'); console.groupEnd(); return true; } catch (e) { console.error('Failed to save to localStorage:', e); console.groupEnd(); return false; } } loadChatState() { if (!this.isAvailable()) return null; try { console.group('📂 Loading Chat State from LocalStorage'); const data = localStorage.getItem(this.storageKey); const chatState = data ? JSON.parse(data) : null; console.log('Loaded Chat State:', chatState); console.groupEnd(); return chatState; } catch (e) { console.error('Failed to load from localStorage:', e); console.groupEnd(); return null; } } clear() { if (!this.isAvailable()) return false; try { localStorage.removeItem(this.storageKey); return true; } catch (e) { console.error('Failed to clear localStorage:', e); return false; } } saveGameState(state) { return this.save({ gameState: state }); } loadGameState() { const data = this.load(); return data?.gameState || null; } } // Game States const GAME_STATES = { WAITING: 'waiting', PLAYING: 'playing' }; // Create a single instance of AssetLoader const globalAssetLoader = new AssetLoader(); const ASSETS = { backgrounds: { justMonika: 'https://play.rosebud.ai/assets/justMonika_bg.png?E61J', mainBg: 'https://play.rosebud.ai/assets/bg-main.png?Xrrp' }, characters: { monika: { '1': { left: 'https://play.rosebud.ai/assets/monika_1l.png?fhp9', right: 'https://play.rosebud.ai/assets/monika_1r.png?9sq5', top: 'https://play.rosebud.ai/assets/monika_a.png?ETdg' } }, sayori: { '1': { left: 'https://play.rosebud.ai/assets/sayori_1l.png?SwBq', right: 'https://play.rosebud.ai/assets/sayori_1r.png?HYbe', top: 'https://play.rosebud.ai/assets/sayori_a.png?T27s' } }, natsuki: { '1': { left: 'https://play.rosebud.ai/assets/natsuki_1l.png?ygzA', right: 'https://play.rosebud.ai/assets/natsuki_1r.png?glSA', top: 'https://play.rosebud.ai/assets/natsuki_1t.png?v2NN' } }, yuri: { '1': { left: 'https://play.rosebud.ai/assets/yuri_1l.png?5VjN', right: 'https://play.rosebud.ai/assets/yuri_1r.png?sKDz', top: 'https://play.rosebud.ai/assets/yuri_a.png?CoS7' } } }, ui: { dialogueBox: 'https://play.rosebud.ai/assets/dialogue_box_748x135.png?Vq2A' }, }; // LOCAL_DATA: Global variable to store application data // This array serves as the initial data structure for the application // and can be used as a fallback when localStorage is not available // Template for testing character movement sequences /** * Represents a single line of dialogue in a scene */ // Base class for all scene events class SceneEvent { constructor({ id, type }) { this.id = id; this.type = type; } } class BackgroundEvent extends SceneEvent { constructor({ id, background }) { super({ id, type: 'background' }); this.background = background; } toString() { return `[Background: ${this.background}]`; } } class ActionEvent extends SceneEvent { constructor({ id, actions }) { super({ id, type: 'action' }); this.actions = actions.map(action => ({ type: action.type, character: action.character, position: action.position })); } toString() { return `[Action: ${this.actions.map(a => `${a.type} ${a.character} ${a.position || ''}`).join(', ')}]`; } } class DialogueLine extends SceneEvent { constructor({ id, speaker, line }) { super({ id, type: 'dialogue' }); this.speaker = speaker; this.line = line; } toString() { return `${this.speaker}: ${this.line}`; } } /** * Represents a chat prompt event that initiates user interaction */ class ChatPromptEvent extends SceneEvent { constructor({ id, character, initialMessage, options = [] }) { super({ id, type: 'chatPrompt' }); this.character = character; this.initialMessage = initialMessage; this.options = options; } toString() { return `[Chat Prompt from ${this.character}: ${this.initialMessage}]`; } } /** * Represents a chat response event from the character */ class ChatResponseEvent extends SceneEvent { constructor({ id, character, response = null, audio = null }) { super({ id, type: 'chatResponse' }); this.character = character; this.response = response; this.audio = audio; } toString() { return `[Chat Response from ${this.character}${this.response ? `: ${this.response}` : ''}]`; } } /** * Represents a complete scene with multiple dialogue lines */ class DialogueScene { constructor(events = []) { this.events = events.map(event => { switch (event.type) { case 'background': return new BackgroundEvent(event); case 'action': return new ActionEvent(event); case 'dialogue': return new DialogueLine(event); case 'chatPrompt': return new ChatPromptEvent(event); case 'chatResponse': return new ChatResponseEvent(event); default: console.warn(`Unknown event type: ${event.type}`); return null; } }).filter(Boolean); } addEvent(event) { const dialogueEvent = event instanceof DialogueLine ? event : new DialogueLine(event); this.events.push(dialogueEvent); } getEventById(id) { return this.events.find(event => event.id === id); } getEventsByType(type) { return this.events.filter(event => event.type === type); } getEventsBySpeaker(speaker) { return this.events.filter(event => event.type === 'dialogue' && event.speaker === speaker); } static fromJSON(jsonData) { if (!Array.isArray(jsonData)) { throw new Error('Invalid scene data format'); } // Validate and transform the JSON data const validatedData = jsonData.map(event => { if (!event.id || !event.type) { throw new Error(`Invalid event format: Missing id or type`); } switch (event.type) { case 'background': if (!event.background) { throw new Error(`Invalid background event: Missing background URL`); } return event; case 'action': if (!Array.isArray(event.actions)) { throw new Error(`Invalid action event: Actions must be an array`); } event.actions.forEach(action => { if (!action.type || !action.character) { throw new Error(`Invalid action: Missing type or character`); } }); return event; case 'dialogue': if (!event.speaker || !event.line) { throw new Error(`Invalid dialogue event: Missing speaker or line`); } return event; case 'chatPrompt': if (!event.character) { throw new Error(`Invalid chat prompt event: Missing character`); } return event; case 'chatResponse': if (!event.character) { throw new Error(`Invalid chat response event: Missing character`); } return event; default: throw new Error(`Unknown event type: ${event.type}`); } }); return new DialogueScene(validatedData); } } // Global store for application data let GLOBAL_STORE = { currentScene: null, activeSceneKey: 'clubTest', audioResources: new Map() // Track audio resources for cleanup }; // App Settings const APP_SETTINGS = { controlVariables: { useLocalSceneData: true, useSpeechForDialogue: true, saveSpeechGeneration: true, allowSpeechGeneration: false, devMode: false, chatStorage: { clearOnInit: false, // Clear storage when chat manager initializes loadFromMemory: true, // Load existing chat history on initialization saveToMemory: true // Save chat updates to storage } }, api: { urls: { development: 'http://localhost:3000', production: 'https://hey-monika-26737d62f92b.herokuapp.com' }, headers: { 'Content-Type': 'application/json' } }, speechConfig: { characters: { Sayori: { voiceId: 'vGQNBgLaiM3EdZtxIiuY', volumeMultiplier: 0.3 }, Yuri: { voiceId: '3wZbmt7q1ZGa1v0w9nvu', volumeMultiplier: 0.8 }, Natsuki: { voiceId: '2bk7ULW9HfwvcIbMWod0', volumeMultiplier: 1.0 }, Monika: { voiceId: 'XiPS9cXxAVbaIWtGDHDh', volumeMultiplier: 1.0 // Adjusted from 1.5 to stay within valid range }, Internal: { voiceId: 'L55dxfJcuGgA6v2SWaAQ', volumeMultiplier: 0.7 }, Protagonist: { voiceId: 'L55dxfJcuGgA6v2SWaAQ', volumeMultiplier: 0.95 } }, defaultVoiceId: 'default_voice', // Fallback for undefined characters defaultVolumeMultiplier: 1.0, // Default volume multiplier for undefined characters }, // Remove duplicate api settings paths: { sceneData: 'https://play.rosebud.ai/assets/scene_justMonika_lines.json?Cpdd' }, // Helper function to get the API base URL getApiBaseUrl: () => { console.group('🌐 Getting API Base URL'); const isDevMode = APP_SETTINGS.controlVariables.devMode; const baseUrl = isDevMode ? APP_SETTINGS.api.urls.development : APP_SETTINGS.api.urls.production; console.log(`Using ${isDevMode ? 'development' : 'production'} API:`, baseUrl); console.groupEnd(); return baseUrl; }, scenes: { clubTest: { id: 'club_test', name: 'Club Test Scene', description: 'A test scene with Monika in the club room.', data: [ { "id": 1, "type": "background", "background": "https://play.rosebud.ai/assets/club.png?Gc50" }, { "id": 2, "type": "action", "actions": [ { "type": "enter", "character": "monika", "position": "middle" } ] }, { "id": 4, "type": "chatPrompt", "character": "Monika", "initialMessage": "I'm ready to chat with you! What would you like to talk about?", "options": [] } ], backgroundMusic: null, defaultBackground: "https://play.rosebud.ai/assets/club.png?Gc50" }, } }; // Initialize application data const initializeAppData = async () => { try { console.group('Initializing App Data'); const activeSceneKey = GLOBAL_STORE.activeSceneKey; const sceneConfig = APP_SETTINGS.scenes[activeSceneKey]; if (!sceneConfig) { throw new Error(`Invalid scene key: ${activeSceneKey}`); } let sceneData; if (sceneConfig.data) { console.log(`Using local scene data for: ${sceneConfig.name}`); sceneData = { scene: sceneConfig.data }; } else if (sceneConfig.remoteUrl) { console.log(`Fetching remote scene data for: ${sceneConfig.name}`); const response = await fetch(sceneConfig.remoteUrl); if (!response.ok) { throw new Error(`Failed to fetch scene data: ${response.statusText}`); } sceneData = await response.json(); } else { throw new Error(`No data source defined for scene: ${activeSceneKey}`); } GLOBAL_STORE.currentScene = new DialogueScene(sceneData.scene); console.log('Scene data loaded:', { sceneName: sceneConfig.name, sceneDescription: sceneConfig.description, currentScene: GLOBAL_STORE.currentScene }); console.groupEnd(); return GLOBAL_STORE.currentScene; } catch (error) { console.error('Error initializing app data:', error); console.groupEnd(); throw error; } }; // Local Storage Utilities const clearLocalStorageData = () => { if (APP_SETTINGS.controlVariables.clearLocalStorage) { try { localStorage.clear(); console.log('Local storage cleared successfully'); APP_SETTINGS.controlVariables.clearLocalStorage = false; return true; } catch (error) { console.error('Error clearing localStorage:', error); return false; } } return false; }; // Styles import baseStyles from 'https://play.rosebud.ai/assets/styles.js?ZTqv' let styles = baseStyles + ` .speaker-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .dev-note { color: white; font-style: italic; font-size: 0.8em; display: flex; flex-direction: column; line-height: 1.2; opacity: 0.7; } ` // Insert styles into document const styleSheet = document.createElement("style"); styleSheet.innerText = styles; document.head.appendChild(styleSheet); // ================================================== // ChatAIClass Definition // ================================================== // This module provides a class, ChatAIClass, which uses a ChatManager (provided externally) // to conduct a conversation with an AI. The AI's behavior is defined by a description string, // and the ChatAIClass offers a simple getResponse method to get AI responses. // // This is AI is powered by Rosebud AI and is Rosebud's method to add in-game AI features. // // IMPORTANT NOTE: // - Do not assume how ChatManager works beyond what is described here. // - We only know that: // 1. ChatManager is constructed by passing in a description string. // 2. We can add messages by calling chatManager.addMessage('user', prompt). // 3. We can get an AI-generated response by calling chatManager.getCharacterResponse('chat'). // - Any other assumptions about ChatManager internals or methods should not be made. // ////////////////////////////////////////////////////////////// // Defines how the AI should behave. This should change to match the project. import AI_BEHAVIOR_DESCRIPTION from 'https://play.rosebud.ai/assets/monika_chat.js?Pxh6'; /** * ChatAIClass: * * This class is intended for non-technical users who want to interact with an AI system. * * Usage: * 1. Create an instance of ChatAIClass: * const chat = new ChatAIClass(); * * 2. Call getResponse(prompt) to get a response from the AI: * const answer = await chat.getResponse("What is quantum computing?"); * console.log(answer); */ export class ChatAIClass { constructor() { if (ChatAIClass.instance) { return ChatAIClass.instance; } console.group('🔄 Initializing ChatAIClass'); this.storageManager = new LocalStorageManager(); this.chatManager = new ChatManager(AI_BEHAVIOR_DESCRIPTION); // Handle storage clearing if enabled if (APP_SETTINGS.controlVariables.chatStorage.clearOnInit) { console.log('Clearing chat storage on initialization'); this.storageManager.clear(); } // Load saved state if enabled if (APP_SETTINGS.controlVariables.chatStorage.loadFromMemory) { const savedState = this.storageManager.loadChatState(); if (savedState?.messageHistory) { console.log('Restoring chat history:', savedState.messageHistory); savedState.messageHistory.forEach(msg => { this.chatManager.addMessage(msg.role, msg.content); }); } } else { console.log('Chat history loading disabled'); } console.groupEnd(); ChatAIClass.instance = this; } /** * Generates a response from the AI based on the given prompt. * * @param {string} prompt - The user's input or question. * @returns {Promise} - The AI's response as text. */ async getResponse(prompt) { console.group('💬 Getting AI Response'); try { // Add the user's message to the conversation this.chatManager.addMessage('user', prompt); // Get AI response const response = await this.chatManager.getCharacterResponse('chat'); // Add the AI's message to the conversation this.chatManager.addMessage('assistant', response); // Save updated state if enabled if (APP_SETTINGS.controlVariables.chatStorage.saveToMemory) { console.log('Saving chat state to storage'); this.storageManager.saveChatState( this.getCharacterDescription(), this.getChatHistory() ); } return response; } catch (error) { console.error('Error getting AI response:', error); throw error; } finally { console.groupEnd(); } } /** * Gets the current chat history * @returns {Array} Array of chat messages */ getChatHistory() { return this.chatManager.getChatHistory(); } /** * Gets the character description used by the AI * @returns {string} The character description */ getCharacterDescription() { return this.chatManager.characterDescription; } /** * Clears the chat history */ clearChatHistory() { this.chatManager.cleanChatHistory(); // Clear storage when history is cleared this.storageManager.clear(); console.log('Chat history and storage cleared'); } /** * Adds a message to the chat history * @param {string} role - The role of the message sender ('user' or 'assistant') * @param {string} content - The message content */ addMessage(role, content) { console.group('📝 Adding Message'); try { this.chatManager.addMessage(role, content); // Save after each message addition if enabled if (APP_SETTINGS.controlVariables.chatStorage.saveToMemory) { console.log('Saving updated chat state'); this.storageManager.saveChatState( this.getCharacterDescription(), this.getChatHistory() ); } } catch (error) { console.error('Error adding message:', error); throw error; } finally { console.groupEnd(); } } } // ================================================== // Main App Component with Three.js Scene // ================================================== const Background = () => (

); class TextToSpeechService { constructor(baseUrl = APP_SETTINGS.getApiBaseUrl()) { console.group('🎙️ TextToSpeechService Constructor'); console.log('Initializing with API configuration:', { baseUrl, devMode: APP_SETTINGS.controlVariables.devMode }); if (!baseUrl) { console.error('No baseUrl provided'); throw new Error('TextToSpeechService requires a baseUrl'); } this.baseUrl = baseUrl; // Set headers before logging this.headers = APP_SETTINGS.api.headers; console.log('Service initialized with:', { baseUrl: this.baseUrl, headers: this.headers }); console.groupEnd(); this.defaultVoiceId = "1SM7GgM6IMuvQlz2BwM3"; this.defaultModelId = "eleven_multilingual_v2"; this.activeAudioUrls = new Set(); } /** * Generates speech from text using direct API call * @param {string} text - Text to convert to speech * @param {string} voiceId - Voice ID to use * @returns {Promise} - Audio URL for playback */ async saveSpeech(sceneId, character, lineId, audioBlob) { console.group('TextToSpeech - Save Speech'); try { if (!APP_SETTINGS.controlVariables.saveSpeechGeneration) { console.log('Speech saving is disabled'); return null; } console.log('Saving speech:', { sceneId, character, lineId, blobSize: audioBlob.size }); // Convert blob to base64 const reader = new FileReader(); const base64Promise = new Promise((resolve, reject) => { reader.onload = () => resolve(reader.result.split(',')[1]); reader.onerror = reject; reader.readAsDataURL(audioBlob); }); const base64Audio = await base64Promise; const baseUrl = APP_SETTINGS.getApiBaseUrl(); console.log('Making API call to save speech:', `${baseUrl}/api/save-speech`); const response = await fetch(`${baseUrl}/api/save-speech`, { method: 'POST', headers: this.headers, body: JSON.stringify({ sceneId, character, lineId, audioData: base64Audio }) }); if (!response.ok) { throw new Error(`Failed to save speech: ${response.statusText}`); } const result = await response.json(); console.log('Speech saved successfully:', result); return result; } catch (error) { console.error('Error saving speech:', error); throw error; } finally { console.groupEnd(); } } async generateSpeech(text, voiceId = this.defaultVoiceId) { console.group('TextToSpeech - Direct Generation'); try { if (!APP_SETTINGS.controlVariables.allowSpeechGeneration) { console.log('Speech generation is disabled by settings'); throw new Error('Speech generation is disabled'); } // Enhanced input validation if (!text?.trim()) { console.error('Invalid text input for speech generation:', { receivedText: text, type: typeof text }); throw new Error('Invalid text input'); } console.group('Generating speech'); console.log('Text input:', text.trim()); console.log('Additional info:', { textLength: text.length, voiceId, timestamp: new Date().toISOString() }); console.groupEnd(); const baseUrl = APP_SETTINGS.getApiBaseUrl(); console.log('Making API call to generate speech:', `${baseUrl}/api/generate-speech`); const response = await fetch(`${baseUrl}/api/generate-speech`, { method: 'POST', headers: this.headers, body: JSON.stringify({ text, voiceId, modelId: this.defaultModelId }) }); if (!response.ok) { const errorText = await response.text(); throw new Error(`API Error (${response.status}): ${errorText}`); } const audioBlob = await response.blob(); if (!audioBlob?.size) { throw new Error('Received empty audio data'); } const audioUrl = URL.createObjectURL(audioBlob); this.activeAudioUrls.add(audioUrl); console.log('Speech generated successfully:', { size: audioBlob.size, type: audioBlob.type, url: audioUrl }); return audioUrl; } catch (error) { console.error('Speech generation failed:', error); throw error; } finally { console.groupEnd(); } } /** * Cleans up an audio URL * @param {string} url - URL to clean up */ cleanupAudioUrl(url) { if (this.activeAudioUrls.has(url)) { URL.revokeObjectURL(url); this.activeAudioUrls.delete(url); console.log('Cleaned up audio URL:', url); } } /** * Cleans up all active audio URLs */ cleanupAllAudioUrls() { console.group('Cleaning up all audio URLs'); this.activeAudioUrls.forEach(url => { URL.revokeObjectURL(url); console.log('Cleaned up:', url); }); this.activeAudioUrls.clear(); console.groupEnd(); } /** * Fetches speech audio for a specific scene, character, and line * @param {string} sceneId - The ID of the scene * @param {string} character - The name of the character * @param {number} lineId - The ID of the line * @returns {Promise} - Audio blob */ async fetchSpeech(sceneId, character, lineId) { console.group('TextToSpeech - Fetch Speech'); console.log('Request Parameters:\n' + JSON.stringify({ sceneId, character, lineId, baseUrl: this.baseUrl, endpoint: '/api/speech' }, null, 2)); try { if (!sceneId || !character || !lineId) { throw new Error('sceneId, character, and lineId are required'); } const params = new URLSearchParams({ sceneId, character, lineId: lineId.toString() }); console.log('Request Parameters:\n' + JSON.stringify({ sceneId, character, lineId }, null, 2)); console.log('API Endpoint:', `${this.baseUrl}/api/speech?${params}`); const baseUrl = APP_SETTINGS.getApiBaseUrl(); console.log('Making API call to fetch speech:', `${baseUrl}/api/speech?${params}`); const response = await fetch(`${baseUrl}/api/speech?${params}`, { method: 'GET' }); if (!response.ok) { if (response.status === 404) { console.log('404: Pre-generated audio not found, will attempt generation'); return null; } const errorData = await response.text(); console.error('API Error Response:', { status: response.status, statusText: response.statusText, errorData }); throw new Error(`API Error (${response.status}): ${errorData}`); } const blob = await response.blob(); console.log('Response received:\n' + JSON.stringify({ size: `${(blob.size / 1024).toFixed(2)}KB`, type: blob.type, timestamp: new Date().toISOString() }, null, 2)); if (!blob || blob.size === 0) { throw new Error('Received empty audio data'); } return blob; } catch (error) { console.error('Fetch Error:', error); throw new Error(`Speech fetch failed: ${error.message}`); } finally { console.groupEnd(); } } /** * Creates a URL for an audio blob * @param {Blob} audioBlob - The audio blob to create a URL for * @returns {string} - The created URL */ createAudioUrl(audioBlob) { return URL.createObjectURL(audioBlob); } /** * Revokes a previously created audio URL * @param {string} url - The URL to revoke */ revokeAudioUrl(url) { if (url) { URL.revokeObjectURL(url); } } } const AudioPlayer = ({ audioUrl, autoPlay = false, onEnded = () => { }, audioQueue = [], volumeMultiplier = 1.0 }) => { const audioRef = useRef(null); const queueRef = useRef(audioQueue); const volumeRef = useRef(volumeMultiplier); const playAudio = useCallback(() => { if (audioRef.current && !audioRef.current.playing) { audioRef.current.play().catch(error => { console.error('Error playing audio:', error); }); } }, []); const playNextInQueue = useCallback(() => { if (queueRef.current.length > 0) { const nextAudio = queueRef.current.shift(); audioRef.current.src = nextAudio; playAudio(); } }, [playAudio]); useEffect(() => { if (audioRef.current) { audioRef.current.src = audioUrl; // Clamp volume between 0 and 1 audioRef.current.volume = Math.min(1, Math.max(0, volumeRef.current)); if (autoPlay) { playAudio(); } } }, [audioUrl, autoPlay, playAudio]); useEffect(() => { const audio = audioRef.current; if (audio) { const handleEnded = () => { onEnded(); playNextInQueue(); }; audio.addEventListener('ended', handleEnded); return () => audio.removeEventListener('ended', handleEnded); } }, [onEnded, playNextInQueue]); return