# HG changeset patch # User Chris Cannam # Date 1493307664 -3600 # Node ID 990b0fc68653e19340f46876185d6db01e65d281 # Parent f3ff5ee994a1a9d94c4407b8286beee2ccc86193 Add highlight layer diff -r f3ff5ee994a1 -r 990b0fc68653 src/app/waveform/waveform.component.ts --- a/src/app/waveform/waveform.component.ts Thu Mar 30 16:46:48 2017 +0100 +++ b/src/app/waveform/waveform.component.ts Thu Apr 27 16:41:04 2017 +0100 @@ -158,6 +158,7 @@ private _isOneShotExtractor: boolean; private _isSeeking: boolean; private cursorLayer: any; + private highlightLayer: any; private layers: Layer[]; private featureExtractionSubscription: Subscription; private playingStateSubscription: Subscription; @@ -178,6 +179,7 @@ this.audioBuffer = undefined; this.timeline = undefined; this.cursorLayer = undefined; + this.highlightLayer = undefined; this.isPlaying = false; this.isLoading = true; } @@ -582,7 +584,8 @@ const plotData = [...featureData].map((feature, i) => { return { cx: i * stepDuration, - cy: feature * normalisationFactor + cy: feature * normalisationFactor, + value: feature }; }); @@ -595,6 +598,16 @@ 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; } case 'list': { @@ -748,6 +761,11 @@ 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;