Changeset 34809 for gs3-extensions

Timestamp:

2021-02-05T01:01:52+13:00 (3 years ago)

Author:

davidb

Message:

Proof of concept stage reached, where AV values are used to drive the width and alpha value of the progress-bar displayed when playing a song

Location:

gs3-extensions/mars-src/trunk/src

Files:

• wavesurfer-player/wavesurfer-player.js (modified) (1 diff)
• wavesurfer-renderer/drawer.spectrummulticanvas.js (modified) (3 diffs)
• wavesurfer-renderer/wavesurfer.js (modified) (1 diff)

gs3-extensions/mars-src/trunk/src/wavesurfer-player/wavesurfer-player.js

@@ -17 +17 @@
     //renderer: SpectrumMultiCanvas, // class name does not appear to be in scope (resorted to chaning default in wavesurfer.js)
         colorMap: viridisColorMap,
+    avDataUrl: gs.collectionMetadata['httpPath']+'/index/assoc/'+gs.documentMetadata["assocfilepath"] + '/av.json', 
         plugins: [
 

gs3-extensions/mars-src/trunk/src/wavesurfer-renderer/drawer.spectrummulticanvas.js

@@ -255 +255 @@
                 this.colorMap.push([val, val, val, 1]);
             }
-        }   
-    }
-
+        }
+
+    if (params.avDataUrl) {
+        this.avDataUrl = params.avDataUrl;
+    }
+    }
+
+    /**
+     * Initialize the drawer
+     */
+    init() {
+    super.init();
+
+    if (this.avDataUrl) {
+        this.loadFrequenciesData(this.avDataUrl);
+        } else {
+        console.error("No Arousal+Valence (AV) Data URL provided");
+        }
+    }
+
+    normaliseAVVals(vals)
+    {
+    var norm_vals = new Array(vals.length);
+
+    var max_val = 0;
+    for (var i=0; i<vals.length; i++) {
+        var abs_val = Math.abs(vals[i]);
+        if (abs_val > max_val) {
+        max_val = abs_val;
+        }
+    }
+
+    var scale_factor = (max_val < 0.8) ? 0.8 : max_val;
+    
+    for (var i=0; i<vals.length; i++) {
+        var val = vals[i];
+        var norm_val = scale_factor * val / max_val;
+        norm_vals[i] = norm_val;
+    }
+
+    return norm_vals;
+    }
+    
+    createAVProgressTimelineData(arousal_vals,valence_vals, my)
+    {
+    console.log("**** createAVProgressTimelineData");
+    var canvas_width = this.canvases[0].wave.width;
+    console.log("canvas width = " + canvas_width);
+
+    //this.arousal_vals = arousal_vals;
+    //this.valence_vals = valence_vals;
+
+    this.arousal_vals.unshift(0);
+    this.valence_vals.unshift(0);
+
+    this.norm_arousal_vals = this.normaliseAVVals(arousal_vals);
+    this.norm_valence_vals = this.normaliseAVVals(valence_vals);
+
+    const time_slice    = 6; // 6 secs
+    const frame_overlap = 3; // 3 secs
+
+    this.timeline_steps = new Array();
+    this.timeline_steps.unshift(0);
+
+    var num_vals = arousal_vals.length;
+    var t = time_slice;
+    var n = 1;
+
+    while (n<num_vals) {
+        this.timeline_steps[n] = t;
+        t += frame_overlap;
+        n++;
+    }
+    const total_duration = t;
+    console.log("*** total duration = " + total_duration);
+    
+    this.timeline_steps[n] = total_duration;
+    this.norm_arousal_vals[n] = 0;
+    this.norm_valence_vals[n] = 0;
+    num_vals++;
+    
+    this.arousal_progress_timeline = new Array();
+    this.valence_progress_timeline = new Array();
+
+    for (var i=1; i<num_vals; i++) {
+        const start_t = this.timeline_steps[i-1];
+        const end_t   = this.timeline_steps[i];
+
+        const start_ts = Math.round((start_t / total_duration) * canvas_width);
+        const end_ts   = Math.round((end_t   / total_duration) * canvas_width);
+          
+        const start_arousal = this.norm_arousal_vals[i-1];
+        const start_valence = this.norm_valence_vals[i-1];
+
+        const end_arousal = this.norm_arousal_vals[i];
+        const end_valence = this.norm_valence_vals[i];
+
+        const ts_diff = end_ts - start_ts;
+        const arousal_diff = end_arousal - start_arousal;
+        const valence_diff = end_valence - start_valence;
+
+        var local_ts = 0;
+        console.log("*** start_ts = " + start_ts +  ", end_ts = " + end_ts + " (ts_diff = " + ts_diff +")");
+        console.log("*** start_arousal = " + start_arousal +  ", end_arousal = " + end_arousal);
+        
+        for (var ts=start_ts; ts<end_ts; ts++) {
+        var local_proportion = local_ts / ts_diff;
+        var interpolated_arousal = start_arousal + (local_proportion * arousal_diff);
+        var interpolated_valence = start_valence + (local_proportion * valence_diff);
+
+        this.arousal_progress_timeline[ts] = interpolated_arousal;
+        this.valence_progress_timeline[ts] = interpolated_valence;
+
+        local_ts++;
+        }
+    }
+
+    console.log(this);
+    console.log("*** done interpolated AV progress timeline");
+    }
+
+    loadFrequenciesData(url) {
+    //var that = this; 
+
+        const request = this.wavesurfer.util.fetchFile({ url: url });
+    
+        request.on('success', data => {
+        console.log("loadFrequenceisData: Retrieved AV URL data");
+        console.log(data);
+        //console.log("*** this = ");
+        //console.log(this);
+        //console.log("*** that = ");
+        //console.log(that);
+        this.arousal_vals = data.arousal;
+        this.valence_vals = data.valence;
+
+        //this.createAVProgressTimelineData(arousal_vals, valence_vals, this); // **** need to pass in 'this' ??
+    });
+    
+        request.on('error', e => this.fireEvent('error', e));
+
+        return request;
+    }
 
     /**
@@ -397 +537 @@
             }
         }
+
+    my.createAVProgressTimelineData(my.arousal_vals, my.valence_vals, my); // **** need to pass in 'this' ??
     }
 
@@ -504 +646 @@
         this.style(this.progressWave, { width: position + 'px' });
     }
-*/
+    */
+
+    /**
+     * Render the new progress
+     *
+     * @param {number} position X-offset of progress position in pixels
+     */
+    updateProgress(position) {
+    var canvas_width = this.canvases[0].wave.width;
+    console.log("position = " + position + "/" + canvas_width);
+    console.log(this);
+    var arousal_val = this.arousal_progress_timeline[position];
+    var valence_val = this.valence_progress_timeline[position];
+    
+    console.log("position = " + position + ", arousal = " + arousal_val + ", valence = " + valence_val);
+
+    // shift [-1,1] scale
+    var css_arousal_alpha = 0.5 + (arousal_val + 1.0)/4.0;
+    var css_valence_width = (arousal_val + 1.0) * 20;
+    
+        this.style(this.progressWave, {
+            borderRightWidth: css_valence_width+'px',
+            borderRightColor: 'rgba(255,255,255,'+css_arousal_alpha+')'
+        });
+    
+    super.updateProgress(position);
+    }
+
 }

gs3-extensions/mars-src/trunk/src/wavesurfer-renderer/wavesurfer.js

@@ -260 +260 @@
         progressColor: '#555',
         removeMediaElementOnDestroy: true,
-        renderer: SpectrumMultiCanvas,
+        renderer: SpectrumMultiCanvas,  // **** GS3 mod
         responsive: false,
         rtl: false,