comparison src/app/waveform/waveform.component.ts @ 254:ff71da632fbb

Add highlight layer

   private _audioBuffer: AudioBuffer;
   private _isSubscribedToAudioService: boolean;
   private _isOneShotExtractor: boolean;
   private _isSeeking: boolean;
   private cursorLayer: any;
+  private highlightLayer: any;
   private layers: Layer[];
   private featureExtractionSubscription: Subscription;
   private playingStateSubscription: Subscription;
   private seekedSubscription: Subscription;
   private onAudioDataSubscription: Subscription;

     this.isSeeking = true;
     this.layers = [];
     this.audioBuffer = undefined;
     this.timeline = undefined;
     this.cursorLayer = undefined;
+    this.highlightLayer = undefined;
     this.isPlaying = false;
     this.isLoading = true;
   }
 
   ngOnInit() {

           );
 
         const plotData = [...featureData].map((feature, i) => {
           return {
             cx: i * stepDuration,
-            cy: feature * normalisationFactor
+            cy: feature * normalisationFactor,
+            value: feature
           };
         });
 
         const lineLayer = new wavesUI.helpers.LineLayer(plotData, {
           color: colour,
           height: height
         });
         this.addLayer(
           lineLayer,
+          waveTrack,
+          this.timeline.timeContext
+        );
+        this.highlightLayer = new wavesUI.helpers.HighlightLayer(lineLayer, {
+          color: colour,
+          opacity: 0.7,
+          height: height
+        });
+        this.addLayer(
+          this.highlightLayer,
           waveTrack,
           this.timeline.timeContext
         );
         break;
       }

       const updateSeekingCursor = () => {
         const currentTime = this.audioService.getCurrentTime();
         this.cursorLayer.currentPosition = currentTime;
         this.cursorLayer.update();
 
+        if (typeof(this.highlightLayer) !== 'undefined') {
+          this.highlightLayer.currentPosition = currentTime;
+          this.highlightLayer.update();
+        }
+
         const currentOffset = this.timeline.timeContext.offset;
         const offsetTimestamp = currentOffset
           + currentTime;
 
         const visibleDuration = this.timeline.timeContext.visibleDuration;