Hugging Face's logo

Spaces:
jorisvaneyghen
/
loop_maestro
Sleeping

App Files Community
loop_maestro / index.html
jorisvaneyghen's picture
jorisvaneyghen
refactor bars data struct; first and last bar fixing
34bac53
raw
history blame contribute delete
72.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="Upload a song, detect beats and bars, then loop any part">
 <title>Loop Maestro</title>
 <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"/>
 <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
 <link rel="shortcut icon" href="/favicon.ico"/>
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
 <link rel="manifest" href="/site.webmanifest"/>
 <link rel="stylesheet" href="css/styles.css"/>
 <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
 <script src="https://cdn.jsdelivr.net/pyodide/v0.29.0/full/pyodide.js"></script>
</head>
<body>
<div class="container">
 <header>
 <div class="header-top">
 <h1>Loop Maestro</h1>
 <button id="menuButton" class="menu-button" aria-label="About this app">
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>
 </button>
 </div>
 <p class="subtitle">Upload a song, detect beats and bars, then loop any part</p>
 </header>
<div id="appMenu" class="app-menu" style="top:0; left:0">
 <div class="menu-item" data-action="about">About Loop Maestro</div>
 <div class="menu-item" data-action="recent">Recent Songs</div>
 </div>
<div id="recentFilesPopup" class="popup-overlay">
 <div class="recent-files-content">
 <div class="recent-files-header">
 <h3>🎵 Recent Songs</h3>
 <button id="closeRecentMenu" class="close-recent-menu">×</button>
 </div>
<div id="recentFilesBody" class="recent-files-body">
 <div style="font-size: 3rem; margin-bottom: 10px;">🎵</div>
 <p style="margin: 0; font-size: 1.1rem;">No recent files</p>
 <p style="margin: 10px 0 0 0; font-size: 0.9rem; opacity: 0.7;">Files you open will appear here</p>
 </div>
 </div>
 </div>
<!-- Info Popup -->
 <div id="infoPopup" class="popup-overlay">
 <div class="info-popup-content">
 <div class="info-popup-header">
 <h2>About Loop Maestro</h2>
 <button id="closePopup" class="close-button">&times;</button>
 </div>
 <div class="info-popup-body">
 <p><strong>Loop Maestro</strong> is a Progressive Web App that allows you to:</p>
 <ul>
 <li>Upload audio files</li>
 <li>Automatically detect beats and bars</li>
 <li>Loop any section of your audio</li>
 <li>Adjust playback parameters in real-time</li>
 </ul>
 <p>Simply upload a song, wait for beat detection to complete, and start looping!</p>
<div class="tech-details">
 <p>Loop Maestro leverages cutting-edge audio processing technology:</p>
 <ul>
 <li><strong>Beat Detection:</strong> Powered by the AI model <a
 href="https://github.com/CPJKU/beat_this">"Beat This!"</a> for precise beat and bar
 detection
 </li>
 <li><strong>Time & Pitch Processing:</strong> Utilizes the <a
 href="https://signalsmith-audio.co.uk">Signalsmith Stretch Library</a> for high-quality
 time stretching and pitch shifting
 </li>
 </ul>
 </div>
<div class="popup-footer">
 <small>Made with ❤️ for musicians</small>
 </div>
 </div>
 </div>
 </div>
<div class="app-grid">
 <div class="card">
 <h2>Upload & Loop any part</h2>
<div id="serverStatus" class="server-status" style="display: none;">
 Checking server status...
 </div>
<!-- Initialization Progress -->
 <div id="initProgress" class="init-progress">
 <h3>Initializing Beat Detector</h3>
 <div class="progress-bar">
 <div id="initProgressFill" class="progress-fill"></div>
 </div>
 <div class="progress-text">
 <span id="initProgressText">0%</span>
 <span id="initProgressMessage">Loading models...</span>
 </div>
 </div>
<!-- Initialization Complete Message -->
 <div id="initComplete" class="init-complete">
 ✓ Beat detector initialized successfully! You can now upload audio files.
 </div>
<div id="uploadArea" class="upload-area disabled">
 <div class="upload-icon">🎵</div>
 <p>Initializing beat detector... Please wait</p>
 <input type="file" id="audioFile" class="file-input" accept="audio/*" disabled>
 </div>
<div id="fileInfo" class="file-info" style="margin-bottom: 10px"></div>
<div id="loading" class="loading" style="display: none;">
 <h3>Detecting Beats</h3>
 <div class="progress-bar">
 <div id="progressFill" class="progress-fill"></div>
 </div>
 <div class="progress-text">
 <span id="progressText">0%</span>
 <span id="progressMessage">Initializing...</span>
 </div>
 <button id="cancelButton" class="cancel-button">Cancel</button>
 </div>
<div id="player-container"></div>
 </div>
<div class="card">
 <h2>Beat Detection Results</h2>
<div id="results" class="results">
 <div class="results-grid">
 <div class="result-item">
 <div class="result-label">Estimated BPM</div>
 <div id="estimatedBPM" class="result-value">--</div>
 </div>
 <div class="result-item">
 <div class="result-label">Detected Beats Per Bar</div>
 <div id="detectedBeatsPerBar" class="result-value">--</div>
 </div>
 </div>
<div id="barsResults" style="display: none; margin-top: 20px;">
 <h3>Detected Bars</h3>
 <div class="bars-list" id="barsList"></div>
<div class="section-player">
 <h3>Play Section</h3>
 <div class="bar-selection">
 <div class="form-group">
 <label for="startBar">Start Bar</label>
 <div class="button-input-group">
 <button id="prevBar" class="action-button" style="padding: 8px 12px;">◀</button>
 <input type="number" id="startBar" value="0" min="0" style="text-align: center;">
 <button id="nextBar" class="action-button" style="padding: 8px 12px;">▶</button>
 <button id="countIn" class="choice-button" data-value="0">
 <div class="count-in-container">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.9237001 2"
 width="32" height="13">
 <rect style="fill:currentColor" ry="0.08" height="2" width="0.2"
 y="0" x="0"/>
 <rect style="fill:currentColor" ry="0.08" height="2" width="0.2"
 y="0" x="4.7237"/>
 <rect style="fill:currentColor" ry="0.08" height="0.66"
 width="4.5237" y="0.67" x="0.2"/>
 </svg>
 <span class="count-in-number"></span>
 </div>
 </button>
 </div>
 </div>
<div class="form-group">
 <label>#Bars to Play</label>
 <div class="button-input-group">
 <div class="button-group">
 <button class="choice-button" data-value="1">1</button>
 <button class="choice-button" data-value="2">2</button>
 <button class="choice-button active" data-value="4">4</button>
 <button class="choice-button" data-value="8">8</button>
 <button class="choice-button" data-value="16">16</button>
 </div>
 <p>...</p>
 <input type="number" id="barsToPlay" value="4" min="1" max="1000"
 class="custom-input">
 </div>
 </div>
<div class="form-group">
 <label>Step Size (#bars)</label>
 <div class="button-input-group">
 <div class="button-group">
 <button class="choice-button" data-value="1">1</button>
 <button class="choice-button active" data-value="2">2</button>
 <button class="choice-button" data-value="4">4</button>
 <button class="choice-button" data-value="8">8</button>
 <button class="choice-button" data-value="16">16</button>
 </div>
 <p>...</p>
 <input type="number" id="stepSize" value="2" min="1" max="32" class="custom-input">
 </div>
 </div>
 <div class="form-group">
 <label>Upbeat</label>
 <div class="button-input-group">
 <div class="button-group">
 <button class="choice-button note" data-value="0.5">&#x1D160;</button>
 <button class="choice-button note" data-value="1">&#x1D15F;</button>
 <button class="choice-button note" data-value="2">&#x1D15E;</button>
 </div>
 <p>...</p>
 <input type="number" id="upbeat" value="0" min="0" max="3.5" step="0.05"
 class="custom-input">
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>
<script type="module">
 // Check if the browser supports service workers
 if ('serviceWorker' in navigator) {
 // Wait for the window to load before registering
 window.addEventListener('load', () => {
 navigator.serviceWorker.register('/sw.js')
 .then((registration) => {
 // Registration was successful
 console.log('ServiceWorker registration successful with scope: ', registration.scope);
 })
 .catch((error) => {
 // Registration failed
 console.log('ServiceWorker registration failed: ', error);
 });
 });
 }
 import AudioStretchPlayer from '/js/AudioStretchPlayer.js';
 import BeatDetector from '/js/BeatDetector.js';
 class BeatDetectionApp {
 constructor() {
 this.detector = new BeatDetector();
 this.isProcessing = false;
 this.startTime = null;
 this.audioBuffer_22050 = null;
 this.audioBuffer = null;
 this.claves_low_audio_buffer = null;
 this.claves_high_audio_buffer = null;
 this.audioContext = null;
 this.audioContext_22050 = null;
 this.logits = null;
 this.bars = null;
 this.estimatedBPM = null;
 this.detectedBeatsPerBar = null;
 // New properties for AudioStretchPlayer and bar navigation
 this.audioPlayer = null;
 this.currentStartBar = 0;
 this.barsToPlay = 4;
 this.stepSize = 2;
 this.upbeat = 0;
 this.countIn = 0;
 this.barsMap = {};
 // Cache storage key
 this.CACHE_STORAGE_KEY = 'beatDetectionCache';
 this.cache = null;
 // File System Access API and IndexedDB
 this.RECENT_FILES_KEY = 'recentAudioFiles';
 this.MAX_RECENT_FILES = 10;
 this.recentFiles = [];
 this.init();
 }
 async init() {
 // Load cache and recent files first
 await this.loadCache();
 await this.loadRecentFiles();
 // Show initialization progress
 this.showInitProgress();
 let pyodide = await loadPyodide();
 // Initialize the detector with progress updates
 const success = await this.detector.init(pyodide, this.updateInitProgress.bind(this));
 this.audioContext = new AudioContext({sampleRate: 44100});
 const response_claves_low = await fetch('/claves_low.mp3');
 const arrayBuffer_claves_low = await response_claves_low.arrayBuffer();
 this.claves_low_audio_buffer = await this.audioContext.decodeAudioData(arrayBuffer_claves_low);
 const response_claves_high = await fetch('/claves_high.mp3');
 const arrayBuffer_claves_high = await response_claves_high.arrayBuffer();
 this.claves_high_audio_buffer = await this.audioContext.decodeAudioData(arrayBuffer_claves_high);
 if (success) {
 this.hideInitProgress();
 this.enableUploadComponent();
 this.setupEventListeners();
 console.log("App initialized successfully");
 } else {
 this.showInitError();
 }
 }
 // IndexedDB for file handles
 async openDB() {
 return new Promise((resolve, reject) => {
 const request = indexedDB.open('LoopMaestroDB', 1);
 request.onerror = () => reject(request.error);
 request.onsuccess = () => resolve(request.result);
 request.onupgradeneeded = (event) => {
 const db = event.target.result;
 if (!db.objectStoreNames.contains('fileHandles')) {
 db.createObjectStore('fileHandles', {keyPath: 'id'});
 }
 };
 });
 }
 async saveFileHandle(fileHandle, fileName, fileSize) {
 try {
 const db = await this.openDB();
 const transaction = db.transaction(['fileHandles'], 'readwrite');
 const store = transaction.objectStore('fileHandles');
 const fileRecord = {
 id: `${fileName}_${fileSize}_${Date.now()}`,
 handle: fileHandle,
 fileName: fileName,
 fileSize: fileSize,
 lastAccessed: Date.now()
 };
 await store.put(fileRecord);
 // Also add to recent files list
 await this.addToRecentFiles(fileRecord);
 return fileRecord.id;
 } catch (error) {
 console.error('Error saving file handle:', error);
 throw error;
 }
 }
 async getFileHandle(id) {
 try {
 const db = await this.openDB();
 const transaction = db.transaction(['fileHandles'], 'readonly');
 const store = transaction.objectStore('fileHandles');
 return new Promise((resolve, reject) => {
 const request = store.get(id);
 request.onerror = () => reject(request.error);
 request.onsuccess = () => resolve(request.result);
 });
 } catch (error) {
 console.error('Error getting file handle:', error);
 throw error;
 }
 }
 async getAllFileHandles() {
 try {
 const db = await this.openDB();
 const transaction = db.transaction(['fileHandles'], 'readonly');
 const store = transaction.objectStore('fileHandles');
 return new Promise((resolve, reject) => {
 const request = store.getAll();
 request.onerror = () => reject(request.error);
 request.onsuccess = () => resolve(request.result);
 });
 } catch (error) {
 console.error('Error getting all file handles:', error);
 throw error;
 }
 }
 // Recent files management
 async loadRecentFiles() {
 try {
 const recent = localStorage.getItem(this.RECENT_FILES_KEY);
 this.recentFiles = recent ? JSON.parse(recent) : [];
 } catch (error) {
 console.error('Error loading recent files:', error);
 this.recentFiles = [];
 }
 }
 async saveRecentFiles() {
 try {
 localStorage.setItem(this.RECENT_FILES_KEY, JSON.stringify(this.recentFiles));
 } catch (error) {
 console.error('Error saving recent files:', error);
 }
 }
 async addToRecentFiles(fileRecord) {
 // Remove if already exists
 this.recentFiles = this.recentFiles.filter(file =>
 file.id !== fileRecord.id
 );
 // Add to beginning
 this.recentFiles.unshift({
 id: fileRecord.id,
 fileName: fileRecord.fileName,
 fileSize: fileRecord.fileSize,
 lastAccessed: fileRecord.lastAccessed
 });
 // Keep only recent files
 if (this.recentFiles.length > this.MAX_RECENT_FILES) {
 this.recentFiles = this.recentFiles.slice(0, this.MAX_RECENT_FILES);
 }
 await this.saveRecentFiles();
 }
 async removeFromRecentFiles(fileId) {
 this.recentFiles = this.recentFiles.filter(file => file.id !== fileId);
 await this.saveRecentFiles();
 }
 // Cache management methods (existing, keep as is)
 async loadCache() {
 try {
 const cached = localStorage.getItem(this.CACHE_STORAGE_KEY);
 this.cache = cached ? JSON.parse(cached) : {};
 console.log('Loaded cache with', Object.keys(this.cache).length, 'entries');
 } catch (error) {
 console.error('Error loading cache:', error);
 this.cache = {};
 }
 }
 async saveCache() {
 try {
 localStorage.setItem(this.CACHE_STORAGE_KEY, JSON.stringify(this.cache));
 } catch (error) {
 console.error('Error saving cache:', error);
 }
 }
 generateFileKey(file) {
 // Create a unique key based on file name, size, and last modified date
 return `${file.name}_${file.size}_${file.lastModified}`;
 }
 getCachedResults(file) {
 const fileKey = this.generateFileKey(file);
 const cachedResults = this.cache[fileKey]
 //check bars is an array:
 if (cachedResults && Array.isArray(cachedResults.bars)){
 return cachedResults;
 } else{
 return null;
 }
 }
 async cacheResults(file, results) {
 const fileKey = this.generateFileKey(file);
 this.cache[fileKey] = {
 filename: file.name,
 fileSize: file.size,
 lastModified: file.lastModified,
 bars: results.bars,
 estimatedBPM: results.estimated_bpm,
 detectedBeatsPerBar: results.detected_beats_per_bar,
 timestamp: Date.now()
 };
 // Clean up old cache entries (keep only last 100 files)
 this.cleanupCache();
 await this.saveCache();
 console.log('Results cached for file:', file.name);
 }
 cleanupCache() {
 const entries = Object.entries(this.cache);
 if (entries.length > 100) {
 // Sort by timestamp and remove oldest entries
 const sorted = entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
 const toRemove = sorted.slice(0, sorted.length - 20);
 toRemove.forEach(([key]) => {
 delete this.cache[key];
 });
 console.log('Cleaned up cache, removed', toRemove.length, 'old entries');
 }
 }
 showInitProgress() {
 const initProgress = document.getElementById('initProgress');
 initProgress.style.display = 'block';
 const uploadArea = document.getElementById('uploadArea');
 uploadArea.classList.add('disabled');
 uploadArea.querySelector('p').textContent = 'Initializing beat detector... Please wait';
 }
 updateInitProgress(percent, message) {
 const initProgressFill = document.getElementById('initProgressFill');
 const initProgressText = document.getElementById('initProgressText');
 const initProgressMessage = document.getElementById('initProgressMessage');
 initProgressFill.style.width = `${percent}%`;
 initProgressText.textContent = `${percent}%`;
 initProgressMessage.textContent = message;
 }
 hideInitProgress() {
 const initProgress = document.getElementById('initProgress');
 const initComplete = document.getElementById('initComplete');
 initProgress.style.display = 'none';
 initComplete.style.display = 'block';
 }
 showInitError() {
 const initProgress = document.getElementById('initProgress');
 const initProgressFill = document.getElementById('initProgressFill');
 const initProgressMessage = document.getElementById('initProgressMessage');
 initProgressFill.style.background = '#f44336';
 initProgressMessage.textContent = 'Failed to initialize beat detector. Please refresh the page.';
 }
 enableUploadComponent() {
 const uploadArea = document.getElementById('uploadArea');
 uploadArea.classList.remove('disabled');
 uploadArea.querySelector('p').textContent = 'Click to upload or drag and drop an audio file';
 }
 setupEventListeners() {
 const uploadArea = document.getElementById('uploadArea');
 const cancelButton = document.getElementById('cancelButton');
 const prevBarButton = document.getElementById('prevBar');
 const nextBarButton = document.getElementById('nextBar');
 const barsToPlayInput = document.getElementById('barsToPlay');
 const stepSizeInput = document.getElementById('stepSize');
 const startBarInput = document.getElementById('startBar');
 const upbeatInput = document.getElementById('upbeat');
 const countInButton = document.getElementById('countIn');
 // File System Access API for file selection
 uploadArea.addEventListener('click', async () => {
 if ('showOpenFilePicker' in window) {
 try {
 await this.openFileWithFileSystemAPI();
 } catch (error) {
 // Check if the error is due to user cancellation (AbortError)
 if (error.name === 'AbortError') {
 console.log('File selection was canceled by user');
 // Don't fall back - just return silently
 return;
 }
 console.warn('File System Access API failed, falling back to traditional file input:', error);
 // Fallback to traditional file input
 this.openFileWithTraditionalInput();
 }
 } else {
 // Fallback to traditional file input
 this.openFileWithTraditionalInput();
 }
 });
 uploadArea.addEventListener('dragover', (e) => {
 e.preventDefault();
 uploadArea.classList.add('dragover');
 });
 uploadArea.addEventListener('dragleave', () => {
 uploadArea.classList.remove('dragover');
 });
 uploadArea.addEventListener('drop', (e) => {
 e.preventDefault();
 uploadArea.classList.remove('dragover');
 const files = e.dataTransfer.files;
 if (files.length > 0) {
 this.handleAudioFile(files[0]);
 }
 });
 cancelButton.addEventListener('click', () => this.cancelProcessing());
 // Count In button
 countInButton.addEventListener('click', (e) => {
 const button = e.currentTarget;
 const value = parseInt(button.dataset.value);
 const number = button.querySelector('.count-in-number');
 if (value === 0) {
 this.countIn = 2;
 number.textContent = '²';
 button.dataset.value = '2';
 } else if (value === 2) {
 this.countIn = 1;
 number.textContent = '¹';
 button.dataset.value = '1';
 } else if (value === 1) {
 this.countIn = 0;
 number.textContent = '';
 button.dataset.value = '0';
 }
 button.classList.toggle('active', this.countIn > 0);
 this.updateAudioPlayer();
 });
 // Bars to play buttons
 document.querySelectorAll('.button-group .choice-button[data-value]').forEach(button => {
 if (button.closest('.form-group:nth-child(2)')) { // Bars to play group
 button.addEventListener('click', (e) => {
 const value = parseInt(e.target.dataset.value);
 this.barsToPlay = value;
 // Update active state
 e.target.closest('.button-group').querySelectorAll('.choice-button').forEach(btn => {
 btn.classList.remove('active');
 });
 e.target.classList.add('active');
 // Update input field
 const barsToPlayInput = document.getElementById('barsToPlay');
 barsToPlayInput.value = value;
 barsToPlayInput.classList.remove('active');
 this.updateAudioPlayer();
 });
 }
 });
 // Step size buttons
 document.querySelectorAll('.button-group .choice-button[data-value]').forEach(button => {
 if (button.closest('.form-group:nth-child(3)')) { // Step size group
 button.addEventListener('click', (e) => {
 const value = parseInt(e.target.dataset.value);
 this.stepSize = value;
 // Update active state
 e.target.closest('.button-group').querySelectorAll('.choice-button').forEach(btn => {
 btn.classList.remove('active');
 });
 e.target.classList.add('active');
 // Update input field
 const stepSizeInput = document.getElementById('stepSize');
 stepSizeInput.value = value;
 stepSizeInput.classList.remove('active');
 });
 }
 });
 // Upbeat buttons - multi-select
 document.querySelectorAll('.button-group .choice-button[data-value]').forEach(button => {
 if (button.closest('.form-group:nth-child(4)')) { // Upbeat group
 button.addEventListener('click', (e) => {
 const buttonGroup = e.target.closest('.button-group');
 const buttons = buttonGroup.querySelectorAll('.choice-button');
 // Toggle the clicked button
 e.target.classList.toggle('active');
 // Get all active buttons and calculate total value
 const activeButtons = buttonGroup.querySelectorAll('.choice-button.active');
 const totalValue = this.calculateUpbeatValue(activeButtons);
 // Update the value and display
 this.updateUpbeatDisplay.call(this, totalValue, false);
 // Ensure custom input is not active when using buttons
 upbeatInput.classList.remove('active');
 this.updateAudioPlayer();
 });
 }
 });
 // Custom input listeners
 barsToPlayInput.addEventListener('change', (e) => {
 const value = parseInt(e.target.value);
 this.barsToPlay = value;
 const buttonGroup = barsToPlayInput.closest('.button-input-group').querySelector('.button-group');
 const buttons = buttonGroup.querySelectorAll('.choice-button');
 // Check if any button matches the current value
 const isCustom = !Array.from(buttons).some(btn =>
 parseInt(btn.dataset.value) === value
 );
 // Update button states
 buttons.forEach(btn => {
 btn.classList.toggle('active', parseInt(btn.dataset.value) === value);
 });
 barsToPlayInput.classList.toggle('active', isCustom);
 this.updateAudioPlayer();
 });
 stepSizeInput.addEventListener('change', (e) => {
 const value = parseInt(e.target.value);
 this.stepSize = value;
 // Update button active state
 const buttonGroup = stepSizeInput.closest('.button-input-group').querySelector('.button-group');
 const buttons = buttonGroup.querySelectorAll('.choice-button');
 // Check if any button matches the current value
 const isCustom = !Array.from(buttons).some(btn =>
 parseInt(btn.dataset.value) === value
 );
 // Update button states
 buttons.forEach(btn => {
 btn.classList.toggle('active', parseInt(btn.dataset.value) === value);
 });
 stepSizeInput.classList.toggle('active', isCustom);
 });
 upbeatInput.addEventListener('change', (e) => {
 const value = parseFloat(e.target.value);
 const buttonGroup = upbeatInput.closest('.button-input-group').querySelector('.button-group');
 const buttons = buttonGroup.querySelectorAll('.choice-button');
 // Check if value matches one of the predefined combinations
 const predefinedValues = {
 0: [],
 0.5: ['0.5'],
 1: ['1'],
 1.5: ['0.5', '1'],
 2: ['2'],
 2.5: ['0.5', '2'],
 3: ['1', '2'],
 3.5: ['0.5', '1', '2']
 };
 // Check if value is a predefined combination
 const isPredefinedValue = Object.keys(predefinedValues).some(key => parseFloat(key) === value);
 if (isPredefinedValue) {
 // Get the button values that should be active for this predefined value
 const activeButtonValues = predefinedValues[value];
 // Update button states
 buttons.forEach(btn => {
 const shouldBeActive = activeButtonValues.includes(btn.dataset.value);
 btn.classList.toggle('active', shouldBeActive);
 });
 // Deactivate custom input since we're using predefined combination
 this.updateUpbeatDisplay.call(this, value, false);
 upbeatInput.classList.remove('active');
 } else {
 // Custom value - deselect all buttons and activate custom input
 buttons.forEach(btn => {
 btn.classList.remove('active');
 });
 this.updateUpbeatDisplay.call(this, value, true);
 }
 this.updateAudioPlayer();
 });
 prevBarButton.addEventListener('click', () => this.previousBar());
 nextBarButton.addEventListener('click', () => this.nextBar());
 startBarInput.addEventListener('change', (e) => {
 let barNum = parseInt(e.target.value)
 this.currentStartBar = this.barsMap[barNum];
 this.updateAudioPlayer();
 });
 // Add click handler for bars list
 document.addEventListener('click', (e) => {
 if (e.target.closest('.bar-item')) {
 const barItem = e.target.closest('.bar-item');
 const barIndex = Array.from(barItem.parentNode.children).indexOf(barItem);
 this.selectBar(barIndex);
 }
 });
 document.addEventListener('dblclick', (e) => {
 if (e.target.closest('.bar-item')) {
 const barItem = e.target.closest('.bar-item');
 const barIndex = Array.from(barItem.parentNode.children).indexOf(barItem);
 this.selectBar(barIndex);
 this.audioPlayer.play()
 }
 });
 // Enhanced Info Popup functionality with menu
 this.menuButton = document.getElementById('menuButton');
 this.appMenu = document.getElementById('appMenu');
 this.infoPopup = document.getElementById('infoPopup');
 const closePopup = document.getElementById('closePopup');
 this.recentFilesPopup = document.getElementById('recentFilesPopup');
 const closeRecentMenu = document.getElementById('closeRecentMenu');
 // Menu item events
 const menuItems = this.appMenu.querySelectorAll('.menu-item');
 menuItems.forEach(item => {
 item.addEventListener('click', (e) => {
 e.stopPropagation();
 this.handleMenuAction(item.dataset.action);
 this.hideAppMenu();
 });
 });
 // Backdrop for closing
 this.recentFilesPopup.addEventListener('click', () => {
 this.hideAppMenu();
 });
 // Open popup
 this.menuButton.addEventListener('click', (e) => {
 e.stopPropagation();
 this.toggleAppMenu();
 });
 // Close popup
 closePopup.addEventListener('click', function () {
 document.getElementById('infoPopup').classList.remove('active');
 document.body.style.overflow = ''; // Restore scrolling
 });
 closeRecentMenu.addEventListener('click', function () {
 document.getElementById('recentFilesPopup').classList.remove('active');
 document.body.style.overflow = ''; // Restore scrolling
 });
 // Close popup when clicking outside content
 this.infoPopup.addEventListener('click', function (e) {
 const infoPopup = document.getElementById('infoPopup')
 if (e.target === infoPopup) {
 infoPopup.classList.remove('active');
 document.body.style.overflow = '';
 }
 });
 // Close popup when clicking outside content
 this.recentFilesPopup.addEventListener('click', function (e) {
 const recentFilesPopup = document.getElementById('recentFilesPopup')
 if (e.target === recentFilesPopup) {
 recentFilesPopup.classList.remove('active');
 document.body.style.overflow = '';
 }
 });
 // Close popup and menu with Escape key
 document.addEventListener('keydown', (e) => {
 if (e.key === 'Escape') {
 this.infoPopup.classList.remove('active');
 document.body.style.overflow = '';
 this.hideAppMenu();
 }
 });
 // Close menu when clicking outside
 document.addEventListener('click', () => {
 this.hideAppMenu();
 });
 }
 toggleAppMenu() {
 if (this.appMenu.style.display === 'block') {
 this.hideAppMenu();
 } else {
 this.showAppMenu();
 }
 }
 showAppMenu() {
 const rect = this.menuButton.getBoundingClientRect();
 const menuWidth = 150;
 // Position menu in final location
 this.appMenu.style.top = `${rect.bottom + window.scrollY}px`;
 this.appMenu.style.left = `${rect.right - menuWidth}px`;
 appMenu.classList.add('active');
 }
 hideAppMenu() {
 this.appMenu.classList.remove('active');
 }
 async handleMenuAction(action) {
 this.hideAppMenu();
 switch (action) {
 case 'about':
 this.infoPopup.classList.add('active');
 document.body.style.overflow = 'hidden';
 break;
 case 'recent':
 await this.showRecentFilesMenu();
 break;
 }
 }
 // Helper function to calculate total value from selected buttons
 calculateUpbeatValue(selectedButtons) {
 return Array.from(selectedButtons).reduce((total, btn) => {
 return total + parseFloat(btn.dataset.value);
 }, 0);
 }
 // Helper function to update the display
 updateUpbeatDisplay(value, isCustom = false) {
 this.upbeat = value;
 const upbeatInput = document.getElementById('upbeat');
 upbeatInput.value = value;
 // Update custom input active state
 upbeatInput.classList.toggle('active', isCustom);
 }
 async showRecentFilesMenu() {
 await this.loadRecentFiles();
 const recentFilesBody = document.getElementById('recentFilesBody');
 // Clear existing content first
 recentFilesBody.innerHTML = '';
 if (this.recentFiles.length === 0) {
 recentFilesBody.innerHTML = `
 <div style="text-align: center; padding: 40px 20px; opacity: 0.8;">
 <div style="font-size: 3rem; margin-bottom: 10px;">🎵</div>
 <p style="margin: 0; font-size: 1.1rem;">No recent files</p>
 <p style="margin: 10px 0 0 0; font-size: 0.9rem; opacity: 0.7;">Files you open will appear here</p>
 </div>
 `;
 } else {
 let filesHTML = '<div class="recent-files-list" style="display: flex; flex-direction: column; gap: 10px;">';
 for (const file of this.recentFiles) {
 filesHTML += `
 <div class="recent-file-item" data-file-id="${file.id}">
 <div style="flex: 1;">
 <div style="font-weight: bold; font-size: 1rem; margin-bottom: 4px;">${file.fileName}</div>
 <div style="font-size: 0.8rem; opacity: 0.8;">${this.formatFileSize(file.fileSize)}</div>
 </div>
 <button class="remove-recent-file">Remove</button>
 </div>
 `;
 }
 filesHTML += '</div>';
 recentFilesBody.innerHTML = filesHTML;
 }
 // Load file when clicked
 recentFilesBody.querySelectorAll('.recent-file-item').forEach(item => {
 item.addEventListener('click', async (e) => {
 if (!e.target.classList.contains('remove-recent-file')) {
 const fileId = item.dataset.fileId;
 await this.loadFileFromHandle(fileId);
 this.recentFilesPopup.classList.remove('active');
 document.body.style.overflow = ''; // Restore scrolling
 }
 });
 });
 // Remove file when remove button clicked
 recentFilesBody.querySelectorAll('.remove-recent-file').forEach(button => {
 button.addEventListener('click', async (e) => {
 e.stopPropagation();
 const fileId = button.closest('.recent-file-item').dataset.fileId;
 await this.removeFromRecentFiles(fileId);
 await this.showRecentFilesMenu(); // Refresh the menu
 });
 });
 this.recentFilesPopup.classList.add('active');
 document.body.style.overflow = 'hidden';
 }
 // handle the traditional file input
 openFileWithTraditionalInput() {
 const fileInput = document.createElement('input');
 fileInput.type = 'file';
 fileInput.accept = 'audio/*';
 fileInput.onchange = (e) => {
 if (e.target.files.length > 0) {
 this.handleAudioFile(e.target.files[0]);
 }
 };
 fileInput.click();
 }
 async openFileWithFileSystemAPI() {
 const [fileHandle] = await window.showOpenFilePicker({
 types: [{
 description: 'Audio Files',
 accept: {
 'audio/*': ['.mp3', '.wav', '.aac', '.ogg', '.flac', '.m4a']
 }
 }],
 multiple: false
 });
 const file = await fileHandle.getFile();
 const fileId = await this.saveFileHandle(fileHandle, file.name, file.size);
 await this.handleAudioFile(file, fileId);
 }
 async loadFileFromHandle(fileId) {
 try {
 const fileRecord = await this.getFileHandle(fileId);
 if (!fileRecord) {
 throw new Error('File not found in database');
 }
 // Verify we still have permission to read the file
 if (await fileRecord.handle.queryPermission({mode: 'read'}) !== 'granted') {
 const permission = await fileRecord.handle.requestPermission({mode: 'read'});
 if (permission !== 'granted') {
 throw new Error('Permission denied to read the file');
 }
 }
 const file = await fileRecord.handle.getFile();
 // Update last accessed time
 await this.addToRecentFiles(fileRecord);
 await this.handleAudioFile(file, fileId);
 } catch (error) {
 console.error('Error loading file from handle:', error);
 alert('Error loading file. It may have been moved or deleted.');
 // Remove from recent files if there's an error
 await this.removeFromRecentFiles(fileId);
 }
 }
 async handleAudioFile(file, fileId = null) {
 if (this.isProcessing) {
 alert('Already processing a file. Please wait.');
 return;
 }
 // Check for cached results first
 const cachedResults = this.getCachedResults(file);
 if (cachedResults) {
 console.log('Using cached results for file:', file.name);
 await this.loadFromCache(file, cachedResults);
 return;
 }
 this.isProcessing = true;
 this.startTime = Date.now();
 const loading = document.getElementById('loading');
 const results = document.getElementById('results');
 const progressFill = document.getElementById('progressFill');
 const progressText = document.getElementById('progressText');
 const progressMessage = document.getElementById('progressMessage');
 const fileInfo = document.getElementById('fileInfo');
 // Show loading with initial state
 loading.style.display = 'block';
 results.style.display = 'none';
 progressFill.style.width = '0%';
 progressFill.style.background = 'linear-gradient(90deg, #4CAF50, #45a049)';
 progressText.textContent = '0%';
 progressMessage.textContent = 'Detecting beats ...';
 // Show file info
 fileInfo.textContent = `File: ${file.name} (${this.formatFileSize(file.size)})`;
 try {
 const updateProgress = async (percent, message) => {
 // Clamp percentage to ensure it stays within valid range
 const clampedPercent = Math.max(0, Math.min(100, percent));
 const currentTime = Date.now();
 const elapsed = (currentTime - this.startTime) / 1000;
 // Add time estimation (only when we have meaningful progress)
 let enhancedMessage = message;
 if (clampedPercent > 5 && clampedPercent < 100 && elapsed > 0.5) {
 const estimatedTotal = (elapsed / clampedPercent) * 100;
 const remaining = Math.max(0, estimatedTotal - elapsed);
 enhancedMessage += ` | Est. ${Math.ceil(remaining)}s remaining`;
 }
 // Update UI elements atomically
 progressFill.style.width = `${clampedPercent}%`;
 progressText.textContent = `${Math.round(clampedPercent)}%`;
 progressMessage.textContent = enhancedMessage;
 // Force synchronous layout and repaint
 void progressFill.offsetWidth; // Trigger reflow
 // Yield to main thread more effectively
 await new Promise(resolve => {
 if (typeof requestAnimationFrame === 'function') {
 requestAnimationFrame(resolve);
 } else {
 setTimeout(resolve, 16); // ~60fps
 }
 });
 };
 const arrayBuffer = await file.arrayBuffer();
 this.audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
 //create audioBuffer with SR=22050 for beat detection
 const arrayBuffer_22050 = await file.arrayBuffer();
 this.audioContext_22050 = new AudioContext({sampleRate: 22050});
 this.audioBuffer_22050 = await this.audioContext_22050.decodeAudioData(arrayBuffer_22050);
 await updateProgress(5, 'Starting beat detection...');
 this.logits = await this.detector.processAudio(
 this.audioBuffer_22050,
 updateProgress
 );
 this.audioContext_22050 = null;
 this.audioBuffer_22050 = null;
 // Automatically run logits_to_bars after preprocessing is complete
 await updateProgress(95, 'Running bar detection...');
 await this.runAutomaticBarDetection();
 // Cache the results for future use
 await this.cacheResults(file, {
 bars: this.bars,
 estimated_bpm: this.estimatedBPM,
 detected_beats_per_bar: this.detectedBeatsPerBar
 });
 // Save file handle if using File System API
 if (!fileId && 'showOpenFilePicker' in window) {
 // This was a drag/drop or fallback upload, so we can't save a handle
 console.log('File uploaded via drag/drop or fallback - no file handle to save');
 }
 // Update UI with results
 this.updateResultsUI();
 // Show results section
 results.style.display = 'block';
 } catch (error) {
 console.error("Error processing audio:", error);
 if (error.message === "Processing cancelled") {
 progressMessage.textContent = "Processing cancelled by user";
 } else {
 progressMessage.textContent = `Error: ${error.message}`;
 }
 progressFill.style.background = '#f44336';
 // Keep error visible for a bit before hiding
 setTimeout(() => {
 loading.style.display = 'none';
 }, 3000);
 } finally {
 this.isProcessing = false;
 // Don't immediately hide loading - let user see completion for successful processing
 if (!this.detector.isCancelled) {
 setTimeout(() => {
 loading.style.display = 'none';
 }, 1000);
 }
 }
 }
 async loadFromCache(file, cachedResults) {
 const fileInfo = document.getElementById('fileInfo');
 const results = document.getElementById('results');
 // Show file info
 fileInfo.textContent = `File: ${file.name} (${this.formatFileSize(file.size)})`;
 // Load the audio file for playback (we still need the audio buffer)
 try {
 const arrayBuffer = await file.arrayBuffer();
 this.audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
 } catch (error) {
 console.error("Error loading audio for cached file:", error);
 return;
 }
 // Set the cached results
 this.bars = cachedResults.bars;
 this.estimatedBPM = cachedResults.estimatedBPM;
 this.detectedBeatsPerBar = cachedResults.detectedBeatsPerBar;
 // Update UI with cached results
 this.updateResultsUI();
 // Show results section
 results.style.display = 'block';
 console.log('Loaded from cache:', cachedResults);
 }
 async runAutomaticBarDetection() {
 const minBPM = 55.0;
 const maxBPM = 215.0;
 const beatsPerBar = 4;
 try {
 const result = await this.detector.logits_to_bars(
 this.logits.prediction_beat,
 this.logits.prediction_downbeat,
 minBPM,
 maxBPM,
 beatsPerBar
 );
 this.bars = result.bars;
 this.estimatedBPM = result.estimated_bpm;
 this.detectedBeatsPerBar = result.detected_beats_per_bar;
 console.log(`Automatic bar detection: BPM=${this.estimatedBPM}, BeatsPerBar=${this.detectedBeatsPerBar}`);
 } catch (error) {
 console.error('Error in automatic bar detection:', error);
 // Set default values if detection fails
 this.estimatedBPM = null;
 this.detectedBeatsPerBar = null;
 }
 }
 updateResultsUI() {
 // Update estimated BPM
 const estimatedBPM = document.getElementById('estimatedBPM');
 estimatedBPM.textContent = this.estimatedBPM !== null ? this.estimatedBPM.toFixed(1) : '--';
 // Update detected beats per bar
 const detectedBeatsPerBar = document.getElementById('detectedBeatsPerBar');
 detectedBeatsPerBar.textContent = this.detectedBeatsPerBar !== null ? this.detectedBeatsPerBar : '--';
 // Display bars if available and initialize destroy
 if (this.bars && this.bars.length > 0) {
 this.displayBars();
 document.getElementById('barsResults').style.display = 'block';
 // Initialize AudioStretchPlayer with the first segment
 this.initializeAudioPlayer();
 } else {
 // If no bars detected but we have audio, still initialize the player with full audio
 if (this.audioBuffer) {
 this.initializeFullAudioPlayer();
 }
 }
 }
 // Add this new method to handle cases where no bars are detected
 initializeFullAudioPlayer() {
 if (!this.audioPlayer) {
 this.audioPlayer = new AudioStretchPlayer(
 document.getElementById('player-container'),
 {
 showUpload: false,
 showControls: true
 }
 );
 }
 // Convert entire audio buffer to WAV and load into player
 const wavBlob = this.audioBufferToWav(this.audioBuffer);
 const audioUrl = URL.createObjectURL(wavBlob);
 this.audioPlayer.loadAudioFromUrl(audioUrl);
 }
 displayBars() {
 const barsList = document.getElementById('barsList');
 barsList.innerHTML = '';
 if (!this.bars || this.bars.length === 0) {
 barsList.innerHTML = '<div class="bar-item">No bars detected</div>';
 // Initialize player with full audio if no bars but audio exists
 if (this.audioBuffer) {
 this.initializeFullAudioPlayer();
 }
 return;
 }
 // Create barsMap that maps nb to idx for easy lookup
 this.barsMap = {};
 this.bars.forEach(bar => {
 this.barsMap[bar.nb] = bar.idx;
 });
 // Update start bar input max value
 const startBarInput = document.getElementById('startBar');
 const maxStartBar = Math.max(1, this.bars.length + 1 - this.barsToPlay);
 startBarInput.max = maxStartBar;
 this.currentStartBar = 0;
 startBarInput.value = 1;
 // Display bars in list
 this.bars.forEach((bar, index) => {
 const barItem = document.createElement('div');
 barItem.className = 'bar-item';
 barItem.style.cursor = 'pointer';
 barItem.style.padding = '8px';
 barItem.style.borderRadius = '4px';
 barItem.style.transition = 'background-color 0.2s';
 barItem.innerHTML = `
 <span>Bar ${bar.nb}</span>
 <span>${this.formatTime(bar.start)}</span>
 `;
 // Highlight current selected bar
 if (index === this.currentStartBar) {
 barItem.style.backgroundColor = 'rgba(33, 150, 243, 0.3)';
 }
 barsList.appendChild(barItem);
 });
 // Show the bars results section
 document.getElementById('barsResults').style.display = 'block';
 // Initialize audio player with the first segment
 this.initializeAudioPlayer();
 }
 async calculateBars() {
 const minBPM = parseFloat(document.getElementById('minBPM').value);
 const maxBPM = parseFloat(document.getElementById('maxBPM').value);
 const beatsPerBar = parseInt(document.getElementById('beatsPerBar').value);
 if (!this.logits) {
 alert('Please process an audio file first');
 return;
 }
 const calculateBarsButton = document.getElementById('calculateBars');
 calculateBarsButton.disabled = true;
 calculateBarsButton.textContent = 'Calculating...';
 try {
 const result = await this.detector.logits_to_bars(
 this.logits.prediction_beat,
 this.logits.prediction_downbeat,
 minBPM,
 maxBPM,
 beatsPerBar
 );
 this.bars = result.bars;
 this.estimatedBPM = result.estimated_bpm;
 this.detectedBeatsPerBar = result.detected_beats_per_bar;
 this.displayBars();
 // Update the displayed BPM and beats per bar
 const estimatedBPM = document.getElementById('estimatedBPM');
 estimatedBPM.textContent = this.estimatedBPM !== null ? this.estimatedBPM.toFixed(1) : '--';
 const detectedBeatsPerBar = document.getElementById('detectedBeatsPerBar');
 detectedBeatsPerBar.textContent = this.detectedBeatsPerBar !== null ? this.detectedBeatsPerBar : '--';
 // Show bars results section
 document.getElementById('barsResults').style.display = 'block';
 } catch (error) {
 console.error('Error calculating bars:', error);
 alert('Error calculating bars: ' + error.message);
 } finally {
 calculateBarsButton.disabled = false;
 calculateBarsButton.textContent = 'Calculate Bars';
 }
 }
 initializeAudioPlayer() {
 if (!this.audioBuffer || this.bars.length === 0) return;
 // Create or update the AudioStretchPlayer
 if (!this.audioPlayer) {
 this.audioPlayer = new AudioStretchPlayer(
 document.getElementById('player-container'),
 {
 showUpload: false,
 showControls: true
 }
 );
 }
 this.updateAudioPlayer();
 }
 updateAudioPlayer() {
 if (!this.audioPlayer || !this.audioBuffer || this.bars.length === 0) return;
 const startBar = this.currentStartBar;
 const endBar = Math.min(startBar + this.barsToPlay - 1, this.bars.length - 1);
 if (startBar >= this.bars.length || endBar >= this.bars.length) {
 console.warn('Invalid bar selection');
 return;
 }
 let startTime = this.bars[startBar].start;
 let endTime = this.bars[endBar].end;
 const duration = endTime - startTime;
 // Calculate upbeat duration if upbeat is specified
 if (this.upbeat !== 0) {
 const durationFirstBar = this.bars[startBar].end - startTime;
 const upbeatDuration = durationFirstBar * this.upbeat / this.detectedBeatsPerBar;
 // Adjust startTime and endTime by subtracting the upbeatDuration
 startTime = Math.max(0, startTime - upbeatDuration);
 if (!this.countIn) {
 endTime = Math.max(0, endTime - upbeatDuration);
 }
 console.log(`Upbeat adjustment: ${upbeatDuration.toFixed(2)}s applied`);
 }
 console.log(`Loading audio from ${startTime.toFixed(2)}s to ${endTime.toFixed(2)}s (${duration.toFixed(2)}s)`);
 // Extract audio segment
 const overlay = !this.countIn
 let audioSegment = this.extractAudioSegment(startTime, endTime, overlay);
 // Append countIn
 if (this.countIn > 0) {
 const nb_beats = (endBar + 1 - startBar) * this.detectedBeatsPerBar;
 const beat_duration = duration / nb_beats;
 audioSegment = this.appendCountIn(audioSegment, beat_duration, this.countIn);
 }
 // Convert to WAV and create blob URL
 const wavBlob = this.audioBufferToWav(audioSegment);
 const audioUrl = URL.createObjectURL(wavBlob);
 // Update UI highlights
 this.updateBarHighlights();
 // Load the segment into the AudioStretchPlayer
 this.audioPlayer.loadAudioFromUrl(audioUrl);
 }
 extractAudioSegment(startTime, endTime, overlay = true) {
 const sampleRate = this.audioBuffer.sampleRate;
 const startSample = Math.floor(startTime * sampleRate);
 const endSample = Math.floor(endTime * sampleRate);
 const segmentLength = endSample - startSample;
 // 50ms fade length
 const fadeMs = 0.050;
 const fadeSamples = Math.floor(fadeMs * sampleRate);
 const segmentBuffer = this.audioContext.createBuffer(
 this.audioBuffer.numberOfChannels,
 segmentLength,
 sampleRate
 );
 for (let channel = 0; channel < this.audioBuffer.numberOfChannels; channel++) {
 const sourceData = this.audioBuffer.getChannelData(channel);
 const seg = segmentBuffer.getChannelData(channel);
 // --- COPY BASE SEGMENT ---
 for (let i = 0; i < segmentLength; i++) {
 seg[i] = sourceData[startSample + i];
 }
 if (!overlay) continue;
 // END overlay:
 // segment[end-fade..end] crossfaded with original[startTime-fade..startTime]
 for (let i = 0; i < fadeSamples; i++) {
 const segIndex = segmentLength - fadeSamples + i;
 const fadeIn = i / fadeSamples; // 0→1
 const fadeOut = 1 - fadeIn; // 1→0
 const originalIndex = startSample - fadeSamples + i;
 if (originalIndex >= 0) {
 seg[segIndex] =
 seg[segIndex] * fadeOut +
 sourceData[originalIndex] * fadeIn;
 }
 }
 }
 return segmentBuffer;
 }
 appendCountIn(segmentBuffer, beatDuration, nbCountInBars = 2) {
 if (!this.claves_high_audio_buffer || !this.claves_low_audio_buffer) {
 console.warn('Claves audio buffers not available for countIn');
 return segmentBuffer;
 }
 const sampleRate = segmentBuffer.sampleRate;
 const beatDurationSamples = Math.floor(beatDuration * sampleRate);
 // Calculate number of beats to skip for upbeat
 const beatsToSkip = this.upbeat > 0 ? parseInt(this.upbeat) : 0;
 // Calculate total countIn beats
 const totalCountInBeats = nbCountInBars * this.detectedBeatsPerBar - beatsToSkip;
 if (totalCountInBeats <= 0) {
 console.warn('No countIn beats to add after upbeat adjustment');
 return segmentBuffer;
 }
 // Calculate the position where the original segment should starts
 const positionOriginal = (nbCountInBars * this.detectedBeatsPerBar - this.upbeat) * beatDuration;
 const positionOriginalSamples = Math.floor(positionOriginal * sampleRate);
 // Create new buffer with countIn + original segment
 const totalLength = positionOriginalSamples + segmentBuffer.length;
 const newBuffer = this.audioContext.createBuffer(
 segmentBuffer.numberOfChannels,
 totalLength,
 sampleRate
 );
 for (let channel = 0; channel < segmentBuffer.numberOfChannels; channel++) {
 const originalData = segmentBuffer.getChannelData(channel);
 const newData = newBuffer.getChannelData(channel);
 let currentPosition = 0;
 // Add countIn beats
 for (let beat = 0; beat < totalCountInBeats; beat++) {
 const isDownbeat = (beat % this.detectedBeatsPerBar) === 0;
 const clavesBuffer = isDownbeat ? this.claves_high_audio_buffer : this.claves_low_audio_buffer;
 // Copy claves sound at the beat position
 const clavesData = clavesBuffer.getChannelData(Math.min(channel, clavesBuffer.numberOfChannels - 1));
 const clavesLength = Math.min(clavesBuffer.length, beatDurationSamples);
 for (let i = 0; i < clavesLength; i++) {
 if (currentPosition + i < totalLength) {
 newData[currentPosition + i] += clavesData[i];
 }
 }
 currentPosition += beatDurationSamples;
 }
 // Copy original segment after countIn
 currentPosition = positionOriginalSamples
 for (let i = 0; i < originalData.length; i++) {
 if (currentPosition + i < totalLength) {
 newData[currentPosition + i] = originalData[i];
 }
 }
 }
 console.log(`Added ${totalCountInBeats} countIn beats (${nbCountInBars} bars, skipped ${beatsToSkip} upbeat beats)`);
 return newBuffer;
 }
 selectBar(barIndex) {
 if (barIndex >= 0 && barIndex < this.bars.length) {
 this.currentStartBar = barIndex;
 document.getElementById('startBar').value = this.bars[this.currentStartBar].nb;
 this.updateAudioPlayer();
 }
 }
 previousBar() {
 const newStartBar = Math.max(0, this.currentStartBar - this.stepSize);
 if (newStartBar !== this.currentStartBar) {
 this.currentStartBar = newStartBar;
 document.getElementById('startBar').value = this.bars[this.currentStartBar].nb;
 this.updateAudioPlayer();
 }
 }
 nextBar() {
 const newStartBar = Math.min(
 this.bars.length - this.barsToPlay,
 this.currentStartBar + this.stepSize
 );
 if (newStartBar !== this.currentStartBar && newStartBar >= 0) {
 this.currentStartBar = newStartBar;
 document.getElementById('startBar').value = this.bars[this.currentStartBar].nb;
 this.updateAudioPlayer();
 }
 }
 updateBarHighlights() {
 const barsList = document.getElementById('barsList');
 const barItems = barsList.querySelectorAll('.bar-item');
 barItems.forEach((item, index) => {
 if (index === this.currentStartBar) {
 item.style.backgroundColor = 'rgba(33, 150, 243, 0.3)';
 // Scroll the highlighted item into view
 item.scrollIntoView({
 behavior: 'smooth',
 block: 'nearest',
 inline: 'nearest'
 });
 } else {
 item.style.backgroundColor = 'transparent';
 }
 });
 }
 audioBufferToWav(buffer) {
 const numChannels = buffer.numberOfChannels;
 const sampleRate = buffer.sampleRate;
 const length = buffer.length;
 const data = new Float32Array(length * numChannels);
 for (let channel = 0; channel < numChannels; channel++) {
 const channelData = buffer.getChannelData(channel);
 for (let i = 0; i < length; i++) {
 data[i * numChannels + channel] = channelData[i];
 }
 }
 const wavBuffer = new ArrayBuffer(44 + data.length * 2);
 const view = new DataView(wavBuffer);
 // Write WAV header
 const writeString = (offset, string) => {
 for (let i = 0; i < string.length; i++) {
 view.setUint8(offset + i, string.charCodeAt(i));
 }
 };
 writeString(0, 'RIFF');
 view.setUint32(4, 36 + data.length * 2, true);
 writeString(8, 'WAVE');
 writeString(12, 'fmt ');
 view.setUint32(16, 16, true);
 view.setUint16(20, 1, true);
 view.setUint16(22, numChannels, true);
 view.setUint32(24, sampleRate, true);
 view.setUint32(28, sampleRate * numChannels * 2, true);
 view.setUint16(32, numChannels * 2, true);
 view.setUint16(34, 16, true);
 writeString(36, 'data');
 view.setUint32(40, data.length * 2, true);
 // Convert to 16-bit PCM
 let offset = 44;
 for (let i = 0; i < data.length; i++) {
 const sample = Math.max(-1, Math.min(1, data[i]));
 view.setInt16(offset, sample < 0 ? sample * 0x8000 : sample * 0x7FFF, true);
 offset += 2;
 }
 return new Blob([wavBuffer], {type: 'audio/wav'});
 }
 formatTime(seconds) {
 const absSeconds = Math.abs(seconds);
 const mins = Math.floor(absSeconds / 60);
 const secs = Math.floor(absSeconds % 60);
 const ms = Math.floor((absSeconds * 1000) % 1000);
 const sign = seconds < 0 ? '-' : '';
 return `${sign}${mins}:${secs.toString().padStart(2, '0')}:${ms.toString().padStart(3, '0')}`;
 }
 formatFileSize(bytes) {
 if (bytes === 0) return '0 Bytes';
 const k = 1024;
 const sizes = ['Bytes', 'KB', 'MB', 'GB'];
 const i = Math.floor(Math.log(bytes) / Math.log(k));
 return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 }
 cancelProcessing() {
 //todo
 return undefined;
 }
 }
 // Initialize the app when page loads
 window.addEventListener('load', () => {
 new BeatDetectionApp();
 });
</script>
</body>
</html>