search

music-practice-tools / bbs-mixer

A simple web audio mixer
https://mixer.musicpracticetools.net
Other
0 stars 0 forks source link

May be switch meter drawing to CSS from canvas #22

Closed SteveALee closed 2 months ago

SteveALee commented 2 months ago

This will help scaling as well as possibly more efficient.

The technique in this repo might help.


 gradient: ['red 1%', '#ff0 16%', 'lime 45%', '#080 100%'],
  maskTransition:  '0.1s', 

const barDiv = document.createElement('div');
  barDiv.style.transition = `clip-path ${maskTransition}`;
barDiv.style.backgroundImage = `linear-gradient(to bottom, ${gradient.join(', ')})`;

        const tempPeak = dbFromFloat(this.tempPeaks[i]);
        const clipPath = audioClipPath(tempPeak, dbRangeMin, dbRangeMax, vertical);
        barDiv.style.clipPath = clipPath;
 `inset(${clipPercent}% 0 0)`

https://css-tricks.com/clipping-masking-css/

See #21