refactor bars data struct; first and last bar fixing

README.md

@@ -19,11 +19,11 @@ python app.py
 open in browser: http://localhost:5000/
 
 ## Todo's
-- Fix first and last measure length
 - Save loop to file
 - Custom Bar fix (half time, double time, time measure, force constant tempo/time measure)
 - Add custom labels to bars (intro, chorus1) 
 - Implement cancel
 - highlight loop section in bar list + higlight current played bar
 - adjust available choice buttons on tempo and time signature
-- alternative loop sections selection based on labeled bars (then click bar in list will not change start loop section, but current played bar)
+- alternative loop sections selection based on labeled bars (then click bar in list will not change start loop section, but current played bar)
+- share the same audio context in AudioStretchPlayer as in BeatDetectorApp (SR fixed on 44100). And avoid needless endcode / decode for the audio buffer 

index.html

@@ -274,7 +274,7 @@
             this.stepSize = 2;
             this.upbeat = 0;
             this.countIn = 0;
-            this.barsArray = [];
+            this.barsMap = {};
 
             // Cache storage key
             this.CACHE_STORAGE_KEY = 'beatDetectionCache';
@@ -469,7 +469,13 @@
 
         getCachedResults(file) {
             const fileKey = this.generateFileKey(file);
-            return this.cache[fileKey] || null;
+            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) {
@@ -778,7 +784,7 @@
 
             startBarInput.addEventListener('change', (e) => {
                 let barNum = parseInt(e.target.value)
-                this.currentStartBar = this.barsArray.findIndex(bar => bar.barNum === barNum);
+                this.currentStartBar = this.barsMap[barNum];
                 this.updateAudioPlayer();
             });
 
@@ -1251,7 +1257,7 @@
             detectedBeatsPerBar.textContent = this.detectedBeatsPerBar !== null ? this.detectedBeatsPerBar : '--';
 
             // Display bars if available and initialize destroy
-            if (this.bars && Object.keys(this.bars).length > 0) {
+            if (this.bars && this.bars.length > 0) {
                 this.displayBars();
                 document.getElementById('barsResults').style.display = 'block';
 
@@ -1287,7 +1293,7 @@
             const barsList = document.getElementById('barsList');
             barsList.innerHTML = '';
 
-            if (!this.bars || Object.keys(this.bars).length === 0) {
+            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
@@ -1297,20 +1303,21 @@
                 return;
             }
 
-            // Convert bars object to array and sort by bar number
-            this.barsArray = Object.entries(this.bars)
-                .map(([barNum, time]) => ({barNum: parseInt(barNum), time: parseFloat(time)}))
-                .sort((a, b) => a.barNum - b.barNum);
+            // 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.barsArray.length + 1 - this.barsToPlay);
+            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.barsArray.forEach((bar, index) => {
+            this.bars.forEach((bar, index) => {
                 const barItem = document.createElement('div');
                 barItem.className = 'bar-item';
                 barItem.style.cursor = 'pointer';
@@ -1318,8 +1325,8 @@
                 barItem.style.borderRadius = '4px';
                 barItem.style.transition = 'background-color 0.2s';
                 barItem.innerHTML = `
-            <span>Bar ${bar.barNum}</span>
-            <span>${this.formatTime(bar.time)}</span>
+            <span>Bar ${bar.nb}</span>
+            <span>${this.formatTime(bar.start)}</span>
         `;
 
                 // Highlight current selected bar
@@ -1386,7 +1393,7 @@
         }
 
         initializeAudioPlayer() {
-            if (!this.audioBuffer || this.barsArray.length === 0) return;
+            if (!this.audioBuffer || this.bars.length === 0) return;
 
             // Create or update the AudioStretchPlayer
             if (!this.audioPlayer) {
@@ -1403,23 +1410,23 @@
         }
 
         updateAudioPlayer() {
-            if (!this.audioPlayer || !this.audioBuffer || this.barsArray.length === 0) return;
+            if (!this.audioPlayer || !this.audioBuffer || this.bars.length === 0) return;
 
             const startBar = this.currentStartBar;
-            const endBar = Math.min(startBar + this.barsToPlay, this.barsArray.length - 1);
+            const endBar = Math.min(startBar + this.barsToPlay - 1, this.bars.length - 1);
 
-            if (startBar >= this.barsArray.length || endBar >= this.barsArray.length) {
+            if (startBar >= this.bars.length || endBar >= this.bars.length) {
                 console.warn('Invalid bar selection');
                 return;
             }
 
-            let startTime = this.barsArray[startBar].time;
-            let endTime = this.barsArray[endBar].time;
+            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.barsArray[startBar + 1].time - startTime;
+                const durationFirstBar = this.bars[startBar].end - startTime;
                 const upbeatDuration = durationFirstBar * this.upbeat / this.detectedBeatsPerBar;
 
                 // Adjust startTime and endTime by subtracting the upbeatDuration
@@ -1438,7 +1445,8 @@
 
             // Append countIn
             if (this.countIn > 0) {
-                const beat_duration = duration / ((endBar - startBar) * this.detectedBeatsPerBar)
+                const nb_beats = (endBar + 1 - startBar) * this.detectedBeatsPerBar;
+                const beat_duration = duration / nb_beats;
                 audioSegment = this.appendCountIn(audioSegment, beat_duration, this.countIn);
             }
 
@@ -1569,10 +1577,9 @@
         }
 
         selectBar(barIndex) {
-            if (barIndex >= 0 && barIndex < this.barsArray.length) {
+            if (barIndex >= 0 && barIndex < this.bars.length) {
                 this.currentStartBar = barIndex;
-                let barNum = this.barsArray[this.currentStartBar].barNum
-                document.getElementById('startBar').value = barNum;
+                document.getElementById('startBar').value = this.bars[this.currentStartBar].nb;
                 this.updateAudioPlayer();
             }
         }
@@ -1581,21 +1588,19 @@
             const newStartBar = Math.max(0, this.currentStartBar - this.stepSize);
             if (newStartBar !== this.currentStartBar) {
                 this.currentStartBar = newStartBar;
-                let barNum = this.barsArray[this.currentStartBar].barNum
-                document.getElementById('startBar').value = barNum;
+                document.getElementById('startBar').value  = this.bars[this.currentStartBar].nb;
                 this.updateAudioPlayer();
             }
         }
 
         nextBar() {
             const newStartBar = Math.min(
-                this.barsArray.length - this.barsToPlay,
+                this.bars.length - this.barsToPlay,
                 this.currentStartBar + this.stepSize
             );
             if (newStartBar !== this.currentStartBar && newStartBar >= 0) {
                 this.currentStartBar = newStartBar;
-                let barNum = this.barsArray[this.currentStartBar].barNum
-                document.getElementById('startBar').value = barNum;
+                document.getElementById('startBar').value = this.bars[this.currentStartBar].nb;
                 this.updateAudioPlayer();
             }
         }
@@ -1669,10 +1674,13 @@
         }
 
         formatTime(seconds) {
-            const mins = Math.floor(seconds / 60);
-            const secs = Math.floor(seconds % 60);
-            const ms = Math.floor((seconds * 1000) % 1000);
-            return `${mins}:${secs.toString().padStart(2, '0')}:${ms.toString().padStart(3, '0')}`;
+            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) {

logits_to_bars.py

@@ -507,7 +507,60 @@ def logits_to_bars(beat_logits: List[float], downbeat_logits: List[float],
         print(f"[logits] estimated_bpm={estimated_bpm:.2f}, detected_beats_per_bar={detected_bp}")
         print(f"[logits] corrected_downbeats count={len(corrected_downbeats)}")
 
-    bars = {i + 1: t for i, t in enumerate(corrected_downbeats)}
+    # bars = {i + 1: t for i, t in enumerate(corrected_downbeats)}
+    bars = []
+    nb = 1
+    idx = 0
+    for i, t in enumerate(corrected_downbeats):
+        start = t
+        if i < len(corrected_downbeats) - 2:
+            end = corrected_downbeats[i+1]
+        else:
+            end = beats[-1]
+        nb_beats = len([b for b in beats if start <= b < end])
+
+        if nb == 1:
+            if i==0 and nb_beats < detected_bp :
+                # skip fist bar if it has not all beats
+                continue
+            else:
+                # if there are beats before the first bar, we start with an upbeat bar (bar nb = 0)
+                nb_up_beats = len([b for b in beats if 0 <= b < start])
+                if nb_up_beats > 0:
+                    if nb_beats == detected_bp:
+                        # if first bar has all his beats, we use its duration to guess the position of the downbeat of the upbeat bar (can be negative)
+                        start_bar_0 = start - (end - start)
+                        nb_beats_0 = detected_bp
+                    else:
+                        start_bar_0 = beats[0]
+                        nb_beats_0 = nb_up_beats
+                    end_bar_0 = start
+                    bpm = 60 * nb_up_beats / (end_bar_0 - start_bar_0)
+                    bar = {
+                        'idx': idx,
+                        'nb': 0,
+                        'start': start_bar_0,
+                        'end': end_bar_0,
+                        'bpm': bpm,
+                        'beats': nb_beats_0,
+                    }
+                    bars.append(bar)
+                    idx += 1
+
+
+        if nb_beats > 1:
+            bpm = 60 * nb_beats / (end - start)
+            bar = {
+                'idx': idx,
+                'nb': nb,
+                'start': start,
+                'end': end,
+                'bpm': bpm,
+                'nb_beats': nb_beats,
+            }
+            bars.append(bar)
+            idx += 1
+            nb += 1
 
     return {
         "bars": bars,

sw.js

@@ -1,5 +1,5 @@
 // Use a version that you can update with each release
-const APP_VERSION = '0.1.21';
+const APP_VERSION = '0.1.22';
 const CACHE_NAME = `my-pwa-cache-${APP_VERSION}`;
 
 // List of files to cache