count in

index.html

@@ -163,6 +163,7 @@
                                     <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">𝄩</button>
                                 </div>
                             </div>
 
@@ -216,8 +217,6 @@
         </div>
     </div>
 </div>
-</div>
-</div>
 
 <script type="module">
     // Check if the browser supports service workers
@@ -244,8 +243,12 @@
             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;
@@ -257,6 +260,7 @@
             this.barsToPlay = 4;
             this.stepSize = 2;
             this.upbeat = 0;
+            this.countIn = 0;
             this.barsArray = [];
 
             // Cache storage key
@@ -284,6 +288,14 @@
             // 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();
@@ -530,6 +542,7 @@
             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 () => {
@@ -567,6 +580,26 @@
 
             cancelButton.addEventListener('click', () => this.cancelProcessing());
 
+            // Count In button
+            countInButton.addEventListener('click', (e) => {
+                const value = parseInt(e.target.dataset.value);
+                if (value === 0) {
+                    this.countIn = 2;
+                    e.target.textContent = '𝄩²';
+                    e.target.dataset.value = '2';
+                } else if (value === 2) {
+                    this.countIn = 1;
+                    e.target.textContent = '𝄩¹';
+                    e.target.dataset.value = '1';
+                } else if (value === 1) {
+                    this.countIn = 0;
+                    e.target.textContent = '𝄩';
+                    e.target.dataset.value = '0';
+                }
+                e.target.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
@@ -1062,16 +1095,21 @@
                     });
                 };
 
-                this.audioContext = new AudioContext({sampleRate: 22050});
                 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,
+                    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...');
@@ -1132,7 +1170,6 @@
 
             // Load the audio file for playback (we still need the audio buffer)
             try {
-                this.audioContext = new AudioContext({sampleRate: 22050});
                 const arrayBuffer = await file.arrayBuffer();
                 this.audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
             } catch (error) {
@@ -1355,6 +1392,7 @@
 
             let startTime = this.barsArray[startBar].time;
             let endTime = this.barsArray[endBar].time;
+            const duration = endTime - startTime;
 
             // Calculate upbeat duration if upbeat is specified
             if (this.upbeat !== 0) {
@@ -1363,17 +1401,23 @@
 
                 // Adjust startTime and endTime by subtracting the upbeatDuration
                 startTime = Math.max(0, startTime - upbeatDuration);
-                endTime = Math.max(0, endTime - upbeatDuration);
-
+                if (!this.countIn) {
+                    endTime = Math.max(0, endTime - upbeatDuration);
+                }
                 console.log(`Upbeat adjustment: ${upbeatDuration.toFixed(2)}s applied`);
             }
 
-            const duration = endTime - startTime;
-
             console.log(`Loading audio from ${startTime.toFixed(2)}s to ${endTime.toFixed(2)}s (${duration.toFixed(2)}s)`);
 
             // Extract audio segment
-            const audioSegment = this.extractAudioSegment(startTime, endTime);
+            const overlay = !this.countIn
+            let audioSegment = this.extractAudioSegment(startTime, endTime, overlay);
+
+            // Append countIn
+            if (this.countIn > 0) {
+                const beat_duration = duration / ((endBar - startBar) * this.detectedBeatsPerBar)
+                audioSegment = this.appendCountIn(audioSegment, beat_duration, this.countIn);
+            }
 
             // Convert to WAV and create blob URL
             const wavBlob = this.audioBufferToWav(audioSegment);
@@ -1388,6 +1432,7 @@
 
         extractAudioSegment(startTime, endTime, overlay = true) {
             const sampleRate = this.audioBuffer.sampleRate;
+            console.log("sr=", sampleRate);
             const startSample = Math.floor(startTime * sampleRate);
             const endSample = Math.floor(endTime * sampleRate);
             const segmentLength = endSample - startSample;
@@ -1432,6 +1477,75 @@
             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.barsArray.length) {
                 this.currentStartBar = barIndex;
@@ -1546,6 +1660,11 @@
             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