// import * as THREE from 'three'; // No longer needed for core game loop yet // import { setupScene } from 'sceneSetup'; // Removed // import { DrumInteraction } from 'drumInteraction'; // Removed // import * as THREE from 'three'; // No longer needed for core game loop yet // import { setupScene } from 'sceneSetup'; // Removed // import { DrumInteraction } from 'drumInteraction'; // Removed import * as Tone from 'https://esm.sh/tone@15.0.4?deps=react'; // Import Tone.js import { HandMarkers } from 'visualizers'; import { VisualScene } from 'visualScene'; // Import the visual scene export class Game { constructor(renderDiv, handTracker, gridCells, playButton, tokenPlaceholder, grabMeTextElement) { this.renderDiv = renderDiv; this.handTracker = handTracker; this.gridCells = gridCells; // Store the 2D array of step cell DOM elements this.playButton = playButton; this.tokenPlaceholder = tokenPlaceholder; // For future token interaction this.grabMeTextElement = grabMeTextElement; // Store the "grab me" text element this.clock = { getDelta: () => 0 }; // Basic clock mock for now // Initialize sequencer state (4 rows, 8 steps per row) this.sequencerState = Array(4).fill(null).map(() => Array(8).fill(false)); // this.gridCellShapes = Array(4).fill(null).map(() => Array(8).fill(null)); // Removed, no 3D shapes this.isPlaying = false; this.currentStep = 0; this.tempo = 120; // Beats per minute this.lastStepTime = 0; this.hitCooldown = 200; // Potentially reusable for token placement cooldown this.velocityThreshold = 0.4; // May not be directly used for sequencer interaction this.previousLandmarks = []; this.lastTimestamp = performance.now(); this.lastTriggeredInstrumentIndex = -1; // To tell visualScene which instrument played this.handMarkers = new HandMarkers(this.renderDiv); this.visualScene = new VisualScene(this.renderDiv); this.movementMultiplier = 1.0; // For hand marker movement this.tokenElement = tokenPlaceholder; // Store reference to the token DOM element this.isHandNearToken = [false, false]; // Tracks if hand 0 or hand 1 is near the token this.tokenProximityThreshold = 70; // Pixel distance threshold for proximity this.defaultTokenBorder = 'none'; // No border this.highlightTokenBorder = 'none'; // No border during highlight (could add a different effect like shadow) this.grabbedTokenBorder = 'none'; // No border when grabbed this.isTokenGrabbed = false; this.grabbedByHandIndex = -1; // 0 or 1, or -1 if not grabbed this.pinchThreshold = 35; // Pixel distance for initial pinch gesture detection this.pinchReleaseThreshold = 55; // Larger distance to release the token this.grabbedCellOrigin = null; // Stores {row, col} if a token is grabbed from a cell // Store original token position for resetting this.originalTokenTop = this.tokenElement.style.top; this.originalTokenLeft = this.tokenElement.style.left; this.originalTokenTransform = this.tokenElement.style.transform; // Store colors as [R, G, B] arrays for easier manipulation this.rowActiveColors = [ [57, 255, 20], // Neon Green for Kick (Row 0) [255, 0, 255], // Neon Pink/Magenta for Snare (Row 1) [0, 255, 255], // Neon Cyan/Aqua for Hi-Hat (Row 2) [253, 254, 2] // Neon Yellow for Clap (Row 3) ]; this.activeCellFillOpacity = 0.7; // Opacity for the cell's background this.activeCellGlowOpacity = 0.9; // Increased opacity for the glow this.activeCellGlowBlur = '15px'; // Increased blur radius this.activeCellGlowSpread = '5px'; // Increased spread distance this.playButtonInteractionState = { handInside: [false, false], // Tracks if hand 0 or 1 is inside the button cooldown: 200, // Cooldown in ms to prevent rapid toggling lastToggleTime: 0, }; this.setupEventHandlers(); this.setupAudio(); } setupAudio() { console.log("Setting up Audio Context for Sequencer..."); this.audioContext = new (window.AudioContext || window.webkitAudioContext)(); if (!this.audioContext) { console.error("Web Audio API not supported by this browser."); return; } Tone.setContext(this.audioContext); console.log("Tone.js context set."); this.analyser = this.audioContext.createAnalyser(); this.analyser.fftSize = 256; this.analyser.connect(this.audioContext.destination); this.frequencyData = new Uint8Array(this.analyser.frequencyBinCount); this.sounds = {}; // Will hold AudioBuffers for Kick, Snare, Hi-Hat, Clap } setupEventHandlers() { window.addEventListener('resize', this.onWindowResize.bind(this)); this.playButton.addEventListener('click', this.togglePlayback.bind(this)); // Event listeners for gridCells (for placing tokens) will be added in a future step. // For now, basic hover is handled in main.js this.gridCells.forEach((row, rowIndex) => { row.forEach((cell, colIndex) => { cell.addEventListener('click', () => this.toggleCellState(rowIndex, colIndex)); }); }); } toggleCellState(rowIndex, colIndex) { this.sequencerState[rowIndex][colIndex] = !this.sequencerState[rowIndex][colIndex]; const cell = this.gridCells[rowIndex][colIndex]; if (this.sequencerState[rowIndex][colIndex]) { const colorArray = this.rowActiveColors[rowIndex % this.rowActiveColors.length]; const r = colorArray[0]; const g = colorArray[1]; const b = colorArray[2]; cell.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${this.activeCellFillOpacity})`; cell.style.boxShadow = `0 0 ${this.activeCellGlowBlur} ${this.activeCellGlowSpread} rgba(${r}, ${g}, ${b}, ${this.activeCellGlowOpacity})`; cell.classList.add('active'); } else { cell.style.backgroundColor = 'transparent'; cell.style.boxShadow = 'none'; // Remove glow when inactive cell.classList.remove('active'); } console.log(`Cell [${rowIndex}, ${colIndex}] toggled to ${this.sequencerState[rowIndex][colIndex]}`); } onWindowResize() { console.log("Window resized (Sequencer Game)."); if (this.visualScene) { this.visualScene.onWindowResize(); } // Grid resizing is handled by CSS. } async start() { console.log("Sequencer game loop starting."); await this.loadSounds(); this.lastTimestamp = performance.now(); this.animate(); } animate() { requestAnimationFrame(this.animate.bind(this)); const now = performance.now(); const deltaTime = now - this.lastTimestamp; this.lastTimestamp = now; const handLandmarks = this.handTracker.getLandmarks(); this.handMarkers.updateMarkers(handLandmarks, this.movementMultiplier); // Sequencer playback logic if (this.isPlaying) { const stepDuration = (60 / this.tempo) * 1000 / 2; // 8th notes (2 per beat) if (now - this.lastStepTime > stepDuration) { this.playStep(this.currentStep); this.updatePlayheadVisual(this.currentStep); this.currentStep = (this.currentStep + 1) % 8; this.lastStepTime = now; } } else { // Clear playhead if not playing this.gridCells.forEach(row => row.forEach(cell => { if (!cell.classList.contains('active')) { // Don't clear active cells cell.style.outline = '1px solid rgb(180, 180, 180)'; } else { cell.style.outline = 'none'; // Ensure active cells don't get playhead outline when stopped } })); } this.updatePlayButtonVisuals(); let currentFrequencyData = null; if (this.analyser && this.frequencyData) { this.analyser.getByteFrequencyData(this.frequencyData); currentFrequencyData = this.frequencyData; } // For visualScene, we might not have a single "triggeredButtonIndex" anymore. // Instead, visualScene could react to the overall frequency data or specific instruments playing. // For now, pass -1 as no specific "button" is hit in the old sense. // We can enhance this later if visualScene needs to know which instruments are active in the current step. this.visualScene.update(currentFrequencyData, -1, deltaTime); this.updateTokenState(handLandmarks); // Combined proximity and grab logic this.updatePlayButtonInteraction(handLandmarks); // New method for play button interaction this.previousLandmarks = handLandmarks.map(hand => hand.map(lm => ({ ...lm }))); } updatePlayButtonInteraction(handLandmarks) { if (!this.playButton) return; const buttonRect = this.playButton.getBoundingClientRect(); const now = performance.now(); if (now - this.playButtonInteractionState.lastToggleTime < this.playButtonInteractionState.cooldown) { // Still in cooldown from last toggle, do nothing // But update handInside state to prevent immediate re-trigger after cooldown for (let i = 0; i < 2; i++) { if (handLandmarks && handLandmarks[i] && handLandmarks[i][8]) { const indexTip = handLandmarks[i][8]; const { screenX, screenY } = this.getScreenCoordinates(indexTip, i); const currentlyInside = screenX >= buttonRect.left && screenX <= buttonRect.right && screenY >= buttonRect.top && screenY <= buttonRect.bottom; this.playButtonInteractionState.handInside[i] = currentlyInside; } else { this.playButtonInteractionState.handInside[i] = false; } } return; } for (let i = 0; i < 2; i++) { // Check for up to two hands if (handLandmarks && handLandmarks[i] && handLandmarks[i][8]) { // Index fingertip const indexTip = handLandmarks[i][8]; const { screenX, screenY } = this.getScreenCoordinates(indexTip, i); const previouslyInside = this.playButtonInteractionState.handInside[i]; const currentlyInside = screenX >= buttonRect.left && screenX <= buttonRect.right && screenY >= buttonRect.top && screenY <= buttonRect.bottom; if (currentlyInside && !previouslyInside) { console.log(`Hand ${i} entered play button.`); this.togglePlayback(); this.playButtonInteractionState.lastToggleTime = now; // Set all hands to inside to prevent immediate re-trigger by other hand if also inside this.playButtonInteractionState.handInside[0] = currentlyInside; this.playButtonInteractionState.handInside[1] = currentlyInside; return; // Exit after one toggle to prevent double trigger if both hands enter simultaneously } this.playButtonInteractionState.handInside[i] = currentlyInside; } else { this.playButtonInteractionState.handInside[i] = false; // Hand not detected or no fingertip } } } updateTokenState(handLandmarks) { if (!this.tokenElement) return; const tokenRect = this.tokenElement.getBoundingClientRect(); const tokenCenterX = tokenRect.left + tokenRect.width / 2; const tokenCenterY = tokenRect.top + tokenRect.height / 2; let anyHandNear = false; let handCurrentlyPinchingNearToken = -1; for (let i = 0; i < 2; i++) { // Check for up to two hands this.isHandNearToken[i] = false; // Reset proximity for this hand if (handLandmarks && handLandmarks[i] && handLandmarks[i][4] && handLandmarks[i][8]) { // Check for hand, thumb tip (4), and index fingertip (8) const thumbTip = handLandmarks[i][4]; const indexTip = handLandmarks[i][8]; // Convert normalized landmarks to screen coordinates const { screenX: thumbScreenX, screenY: thumbScreenY } = this.getScreenCoordinates(thumbTip, i); const { screenX: indexScreenX, screenY: indexScreenY } = this.getScreenCoordinates(indexTip, i); // Check proximity of index finger to token (used for highlighting) const distanceToToken = Math.sqrt( Math.pow(indexScreenX - tokenCenterX, 2) + Math.pow(indexScreenY - tokenCenterY, 2) ); if (distanceToToken < this.tokenProximityThreshold) { this.isHandNearToken[i] = true; anyHandNear = true; } // Check for pinch: distance between thumb and index finger const pinchDistance = Math.sqrt( Math.pow(thumbScreenX - indexScreenX, 2) + Math.pow(thumbScreenY - indexScreenY, 2) ); if (pinchDistance < this.pinchThreshold) { // Check for pinch if (!this.isTokenGrabbed) { // Only allow grabbing if nothing is currently grabbed // Priority 1: Check if pinching over an active grid cell let grabbedFromCell = false; for (let r = 0; r < this.gridCells.length; r++) { if (grabbedFromCell) break; for (let c = 0; c < this.gridCells[r].length; c++) { if (this.sequencerState[r][c]) { // Is cell active? const cellElement = this.gridCells[r][c]; const cellRect = cellElement.getBoundingClientRect(); if (indexScreenX >= cellRect.left && indexScreenX <= cellRect.right && indexScreenY >= cellRect.top && indexScreenY <= cellRect.bottom) { // Pinching over an active cell this.isTokenGrabbed = true; this.grabbedByHandIndex = i; this.grabbedCellOrigin = { row: r, col: c }; this.toggleCellState(r, c); // Deactivate the cell (picking it up) // Make the main token element follow hand this.tokenElement.style.cursor = 'grabbing'; this.tokenElement.style.border = this.grabbedTokenBorder; this.tokenElement.style.zIndex = '30'; // Position token at fingertip immediately const tokenWidth = this.tokenElement.offsetWidth; const tokenHeight = this.tokenElement.offsetHeight; this.tokenElement.style.left = `${indexScreenX - tokenWidth / 2}px`; this.tokenElement.style.top = `${indexScreenY - tokenHeight / 2}px`; this.tokenElement.style.transform = 'none'; console.log(`Token lifted from cell [${r}, ${c}] by hand ${i}`); handCurrentlyPinchingNearToken = i; // Mark as pinching for this frame grabbedFromCell = true; break; } } } } // Priority 2: If not grabbed from cell, check if pinching near the main token if (!grabbedFromCell && this.isHandNearToken[i]) { handCurrentlyPinchingNearToken = i; this.grabbedCellOrigin = null; // Ensure no cell origin if grabbing main token } } else if (this.isTokenGrabbed && this.grabbedByHandIndex === i) { // If already grabbed by this hand, maintain grabbed state for dragging handCurrentlyPinchingNearToken = i; } } } } // Handle grabbing the main token (if not lifted from a cell) if (handCurrentlyPinchingNearToken !== -1 && !this.isTokenGrabbed && this.grabbedCellOrigin === null) { this.isTokenGrabbed = true; this.grabbedByHandIndex = handCurrentlyPinchingNearToken; this.tokenElement.style.cursor = 'grabbing'; this.tokenElement.style.border = this.grabbedTokenBorder; this.tokenElement.style.zIndex = '30'; // Bring token to front console.log(`Token grabbed (main) by hand ${this.grabbedByHandIndex}`); } // Handle dragging (applies if token is grabbed from anywhere) if (this.isTokenGrabbed && this.grabbedByHandIndex !== -1 && handLandmarks && handLandmarks[this.grabbedByHandIndex] && handLandmarks[this.grabbedByHandIndex][8]) { const indexTip = handLandmarks[this.grabbedByHandIndex][8]; const { screenX, screenY } = this.getScreenCoordinates(indexTip, this.grabbedByHandIndex); // Center the token on the fingertip const tokenWidth = this.tokenElement.offsetWidth; const tokenHeight = this.tokenElement.offsetHeight; this.tokenElement.style.left = `${screenX - tokenWidth / 2}px`; this.tokenElement.style.top = `${screenY - tokenHeight / 2}px`; this.tokenElement.style.transform = 'none'; // Remove translateX(-50%) during drag } // Handle releasing if (this.isTokenGrabbed && handCurrentlyPinchingNearToken === -1) { // Check if the hand that was grabbing is still pinching const grabbingHand = handLandmarks && handLandmarks[this.grabbedByHandIndex]; let stillPinchingByGrabbingHand = false; if (grabbingHand && grabbingHand[4] && grabbingHand[8]) { const thumbTip = grabbingHand[4]; const indexTip = grabbingHand[8]; const { screenX: thumbScreenX, screenY: thumbScreenY } = this.getScreenCoordinates(thumbTip, this.grabbedByHandIndex); const { screenX: indexScreenX, screenY: indexScreenY } = this.getScreenCoordinates(indexTip, this.grabbedByHandIndex); const pinchDistance = Math.sqrt(Math.pow(thumbScreenX - indexScreenX, 2) + Math.pow(thumbScreenY - indexScreenY, 2)); // Use pinchReleaseThreshold when checking if an already grabbed token should be released if (pinchDistance < this.pinchReleaseThreshold) { stillPinchingByGrabbingHand = true; } } if (!stillPinchingByGrabbingHand) { console.log(`Token released by hand ${this.grabbedByHandIndex}`); this.dropToken(); // Attempt to drop on grid this.isTokenGrabbed = false; this.grabbedByHandIndex = -1; this.grabbedCellOrigin = null; // Clear cell origin on drop this.tokenElement.style.cursor = 'grab'; this.tokenElement.style.zIndex = '25'; // Reset z-index // Reset position to original if not dropped on a cell, // or if it was lifted from a cell and dropped elsewhere. this.tokenElement.style.top = this.originalTokenTop; this.tokenElement.style.left = this.originalTokenLeft; this.tokenElement.style.transform = this.originalTokenTransform; if (this.grabMeTextElement) this.grabMeTextElement.style.display = 'block'; // Show grab me text } } // Update token visual style (border and cursor) and "grab me" text visibility if (!this.isTokenGrabbed) { if (anyHandNear) { this.tokenElement.style.border = this.highlightTokenBorder; } else { this.tokenElement.style.border = this.defaultTokenBorder; } this.tokenElement.style.cursor = 'grab'; if (this.grabMeTextElement) { this.grabMeTextElement.style.display = 'block'; this.grabMeTextElement.textContent = "<< grab me"; this.grabMeTextElement.style.color = 'rgb(0,0,255)'; // Ensure it's blue } } else { // Token is grabbed // Border and cursor are already set to 'grabbing' and grabbedTokenBorder if (this.grabMeTextElement) { this.grabMeTextElement.style.display = 'block'; // Ensure "place me" text is visible this.grabMeTextElement.textContent = "<< place me"; this.grabMeTextElement.style.color = 'rgb(0,128,0)'; // Change to darker green } } } dropToken() { if (!this.tokenElement || this.gridCells.length === 0) return; const tokenRect = this.tokenElement.getBoundingClientRect(); const tokenCenterX = tokenRect.left + tokenRect.width / 2; const tokenCenterY = tokenRect.top + tokenRect.height / 2; for (let r = 0; r < this.gridCells.length; r++) { for (let c = 0; c < this.gridCells[r].length; c++) { const cell = this.gridCells[r][c]; const cellRect = cell.getBoundingClientRect(); if (tokenCenterX >= cellRect.left && tokenCenterX <= cellRect.right && tokenCenterY >= cellRect.top && tokenCenterY <= cellRect.bottom) { console.log(`Token dropped on cell [${r}, ${c}]`); this.toggleCellState(r, c); // Play a sound effect for dropping if desired // e.g., this.playSFX('drop'); return; // Exit after finding the first cell } } } console.log("Token dropped, but not on a grid cell."); } // Helper function to convert normalized landmark to screen coordinates getScreenCoordinates(landmark, handIndex) { const clientWidth = this.renderDiv.clientWidth; const clientHeight = this.renderDiv.clientHeight; const videoAreaTopOffset = 0; // Title bar height removed const videoAreaHeight = clientHeight - videoAreaTopOffset; // Will be clientHeight const centerX = clientWidth / 2; const centerYInVideoArea = videoAreaHeight / 2; // Use handLandmarks[handIndex].handedness to decide mirroring if available // For now, assume right hand (index 0) is typically mirrored, left (index 1) might not be or also. // Sticking to consistent mirroring for now. const normalizedX = 1 - landmark.x; const screenX = centerX + (normalizedX - 0.5) * clientWidth * this.movementMultiplier; const screenYRelativeToVideo = centerYInVideoArea + (landmark.y - 0.5) * videoAreaHeight * this.movementMultiplier; const screenY = screenYRelativeToVideo + videoAreaTopOffset; return { screenX, screenY }; } // updateTokenProximity is now integrated into updateTokenState updatePlayheadVisual(stepIndex) { this.gridCells.forEach((row, rowIndex) => { row.forEach((cell, colIndex) => { // Reset previous playhead highlight and background unless it's an active cell if (!cell.classList.contains('active')) { cell.style.outline = '1px solid rgb(180, 180, 180)'; // Default border cell.style.backgroundColor = 'transparent'; // Reset background for non-active, non-current-step cells } else { // Active cells keep their look, but ensure playhead outline is removed if not current step if (colIndex !== stepIndex) { const colorArray = this.rowActiveColors[rowIndex % this.rowActiveColors.length]; cell.style.backgroundColor = `rgba(${colorArray[0]}, ${colorArray[1]}, ${colorArray[2]}, ${this.activeCellFillOpacity})`; } cell.style.outline = 'none'; } if (colIndex === stepIndex) { // Highlight current playhead column cell.style.outline = '2px solid rgb(0, 0, 255)'; // Blue outline for playhead if (!cell.classList.contains('active')) { // Only add blue fill if not already active with its own color cell.style.backgroundColor = 'rgba(173, 216, 230, 0.5)'; // Increased opacity for light blue fill } else { // If it is active, blend the playhead indication const colorArray = this.rowActiveColors[rowIndex % this.rowActiveColors.length]; // Slightly brighten the existing active color or add a subtle blueish tint as playhead passes // For simplicity, let's just ensure the outline is the primary indicator for active cells // The blue fill might obscure the active color too much, so we only apply to non-active cells. // An alternative could be a more complex blending or a different highlight for active cells under playhead. // For now, we keep active cell's original color and just add the outline. } } }); }); } playStep(stepIndex) { this.lastTriggeredInstrumentIndex = -1; // Reset for (let instrumentIndex = 0; instrumentIndex < 4; instrumentIndex++) { if (this.sequencerState[instrumentIndex][stepIndex]) { this.playDrumSound(instrumentIndex); // instrumentIndex corresponds to Kick, Snare, etc. this.lastTriggeredInstrumentIndex = instrumentIndex; // For visual feedback, if needed // console.log(`Playing sound for instrument ${instrumentIndex} at step ${stepIndex}`); } } } togglePlayback() { this.isPlaying = !this.isPlaying; if (this.isPlaying) { this.currentStep = 0; this.lastStepTime = performance.now(); // Start timing from now console.log("Playback started."); } else { console.log("Playback stopped."); // Reset playhead visual when stopping this.gridCells.forEach((row, rowIndex) => { row.forEach((cell, colIndex) => { if (!cell.classList.contains('active')) { cell.style.outline = '1px solid rgb(180, 180, 180)'; cell.style.backgroundColor = 'transparent'; // Also reset background on stop } else { cell.style.outline = 'none'; // Ensure active cell color is restored if playhead was over it const colorArray = this.rowActiveColors[rowIndex % this.rowActiveColors.length]; cell.style.backgroundColor = `rgba(${colorArray[0]}, ${colorArray[1]}, ${colorArray[2]}, ${this.activeCellFillOpacity})`; } }); }); } this.updatePlayButtonVisuals(); } updatePlayButtonVisuals() { const btn = this.playButton; const win98BorderLight = 'rgb(255, 255, 255)'; const win98BorderDark = 'rgb(128, 128, 128)'; const win98BorderVeryDark = 'rgb(0, 0, 0)'; if (this.isPlaying) { // "Pressed" or active state btn.textContent = 'Stop'; btn.style.borderTop = `2px solid ${win98BorderDark}`; btn.style.borderLeft = `2px solid ${win98BorderDark}`; btn.style.borderRight = `2px solid ${win98BorderLight}`; btn.style.borderBottom = `2px solid ${win98BorderLight}`; btn.style.boxShadow = 'none'; btn.style.padding = '13px 24px 11px 26px'; // Adjusted padding for pressed state to match increased size } else { // Default state btn.textContent = 'Play'; btn.style.borderTop = `2px solid ${win98BorderLight}`; btn.style.borderLeft = `2px solid ${win98BorderLight}`; btn.style.borderRight = `2px solid ${win98BorderDark}`; btn.style.borderBottom = `2px solid ${win98BorderDark}`; btn.style.boxShadow = `1px 1px 0px 0px ${win98BorderVeryDark}`; btn.style.padding = '12px 25px'; // Match default padding } } async loadAudioSample(url) { if (!this.audioContext) return null; try { const response = await fetch(url); if (!response.ok) throw new Error(`HTTP error! status: ${response.status} for ${url}`); const arrayBuffer = await response.arrayBuffer(); return await this.audioContext.decodeAudioData(arrayBuffer); } catch (error) { console.error(`Error loading audio sample ${url}:`, error); return null; } } async loadSounds() { console.log("Loading sequencer sounds..."); // Ensure these URLs match Kick, Snare, Hi-Hat, Clap in order const soundURLs = [ 'https://play.rosebud.ai/assets/rio - supreme 808.wav?0ABj', // Kick 'https://play.rosebud.ai/assets/juicy-808-snare-slap.wav?xID3', // Snare 'https://play.rosebud.ai/assets/808-closed-hi-hat.wav?rJx3', // Hi-Hat 'https://play.rosebud.ai/assets/808-clap-2.wav?iyfi' // Clap ]; const instrumentNames = ['Kick', 'Snare', 'Hi-Hat', 'Clap']; const loadPromises = soundURLs.map((url, index) => { return this.loadAudioSample(url).then(buffer => { if (buffer) { this.sounds[index] = buffer; // Store by index (0:Kick, 1:Snare, etc.) console.log(`${instrumentNames[index]} sound loaded.`); } }); }); await Promise.all(loadPromises); console.log("All sequencer sounds loaded."); } async playDrumSound(instrumentIndex) { if (!this.audioContext || !this.sounds[instrumentIndex] || !this.analyser) { // console.warn(`Sound not loaded or audio not ready for instrument ${instrumentIndex}`); return; } try { if (this.audioContext.state === 'suspended') { await this.audioContext.resume(); if (Tone.context.state !== 'running') { await Tone.start(); // Ensure Tone.js context is also running } } const source = this.audioContext.createBufferSource(); source.buffer = this.sounds[instrumentIndex]; source.connect(this.analyser); source.start(0); } catch (error) { console.error(`Error playing sound for instrument ${instrumentIndex}:`, error); } } }

Other games like this

About 808 drum sequencer