Wavesurfer.js: Colour the spectrogram

[feng-x-w]

I want to color the language spectrum, so it might look better, right?I don't know where to start. I hope you can help me

[jamesshannon]

The most straightforward (and consistent with, e.g., opencv) would be to allow the user to pass a colormap array of 256 3-tuples (representing RGB). Then the current code could simply pull the value at the appropriate index.

Furthermore, there are javascript libraries which have preconfigured colormaps.

[jamesshannon]

FWIW, I implemented this locally. It works great for me, but I don't think it's solid enough for a PR request. For one, it should be configurable. But, I might as well share what I have.

Add this line to the top:

var  jet = [[0,0,128],[0,0,132],[0,0,136],[0,0,141],[0,0,145],[0,0,149],[0,0,155],[0,0,159],[0,0,164],[0,0,168],[0,0,173],[0,0,177],[0,0,182],[0,0,187],[0,0,191],[0,0,195],[0,0,200],[0,0,204],[0,0,209],[0,0,214],[0,0,219],[0,0,223],[0,0,227],[0,0,232],[0,0,237],[0,0,241],[0,0,245],[0,0,250],[0,0,254],[0,0,255],[0,0,255],[0,0,255],[0,1,255],[0,5,255],[0,8,255],[0,12,255],[0,17,255],[0,20,255],[0,24,255],[0,28,255],[0,32,255],[0,36,255],[0,41,255],[0,45,255],[0,48,255],[0,53,255],[0,57,255],[0,60,255],[0,65,255],[0,69,255],[0,72,255],[0,77,255],[0,80,255],[0,84,255],[0,88,255],[0,93,255],[0,96,255],[0,100,255],[0,105,255],[0,108,255],[0,112,255],[0,117,255],[0,121,255],[0,124,255],[0,129,255],[0,133,255],[0,136,255],[0,141,255],[0,145,255],[0,148,255],[0,152,255],[0,157,255],[0,160,255],[0,164,255],[0,169,255],[0,172,255],[0,176,255],[0,181,255],[0,185,255],[0,188,255],[0,193,255],[0,197,255],[0,200,255],[0,205,255],[0,209,255],[0,212,255],[0,216,255],[0,221,254],[0,224,251],[0,228,248],[2,233,244],[6,236,241],[9,240,238],[12,245,235],[15,249,232],[19,252,228],[22,255,225],[25,255,222],[28,255,219],[31,255,215],[35,255,212],[38,255,209],[41,255,206],[44,255,202],[48,255,199],[51,255,196],[54,255,193],[57,255,189],[60,255,186],[64,255,183],[67,255,180],[70,255,177],[73,255,173],[77,255,170],[80,255,167],[83,255,164],[86,255,160],[90,255,157],[93,255,154],[96,255,151],[99,255,148],[103,255,144],[106,255,141],[109,255,138],[112,255,135],[115,255,131],[119,255,128],[122,255,125],[125,255,122],[128,255,119],[131,255,115],[135,255,112],[138,255,109],[141,255,106],[144,255,103],[148,255,99],[151,255,96],[154,255,93],[157,255,90],[160,255,86],[164,255,83],[167,255,80],[170,255,77],[173,255,73],[177,255,70],[180,255,67],[183,255,64],[186,255,60],[189,255,57],[193,255,54],[196,255,51],[199,255,48],[202,255,44],[206,255,41],[209,255,38],[212,255,35],[215,255,31],[219,255,28],[222,255,25],[225,255,22],[228,255,19],[232,255,15],[235,255,12],[238,255,9],[241,252,6],[244,248,2],[248,245,0],[251,241,0],[254,237,0],[255,234,0],[255,230,0],[255,226,0],[255,222,0],[255,219,0],[255,215,0],[255,211,0],[255,208,0],[255,204,0],[255,200,0],[255,197,0],[255,193,0],[255,189,0],[255,185,0],[255,182,0],[255,178,0],[255,174,0],[255,171,0],[255,167,0],[255,163,0],[255,159,0],[255,156,0],[255,152,0],[255,148,0],[255,145,0],[255,141,0],[255,137,0],[255,134,0],[255,130,0],[255,126,0],[255,122,0],[255,119,0],[255,115,0],[255,111,0],[255,107,0],[255,104,0],[255,100,0],[255,96,0],[255,93,0],[255,89,0],[255,85,0],[255,82,0],[255,78,0],[255,74,0],[255,71,0],[255,67,0],[255,63,0],[255,59,0],[255,56,0],[255,52,0],[255,48,0],[255,45,0],[255,41,0],[255,37,0],[255,33,0],[255,30,0],[255,26,0],[255,22,0],[254,18,0],[250,15,0],[245,11,0],[241,8,0],[237,4,0],[232,0,0],[227,0,0],[223,0,0],[219,0,0],[214,0,0],[209,0,0],[204,0,0],[200,0,0],[195,0,0],[191,0,0],[187,0,0],[182,0,0],[177,0,0],[173,0,0],[168,0,0],[164,0,0],[159,0,0],[155,0,0],[149,0,0],[145,0,0],[141,0,0],[136,0,0],[132,0,0],[128,0,0]];

Then replace the const colorValue and fillStyle lines (currently 455-463) with:

var colorValue = 255 - pixels[i][j],
            rgb = jet[pixels[i][j]];

          my.spectrCc.fillStyle = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;

[mehdi78800]

FWIW, I implemented this locally. It works great for me, but I don't think it's solid enough for a PR request. For one, it should be configurable. But, I might as well share what I have.

Add this line to the top:

var  jet = [[0,0,128],[0,0,132],[0,0,136],[0,0,141],[0,0,145],[0,0,149],[0,0,155],[0,0,159],[0,0,164],[0,0,168],[0,0,173],[0,0,177],[0,0,182],[0,0,187],[0,0,191],[0,0,195],[0,0,200],[0,0,204],[0,0,209],[0,0,214],[0,0,219],[0,0,223],[0,0,227],[0,0,232],[0,0,237],[0,0,241],[0,0,245],[0,0,250],[0,0,254],[0,0,255],[0,0,255],[0,0,255],[0,1,255],[0,5,255],[0,8,255],[0,12,255],[0,17,255],[0,20,255],[0,24,255],[0,28,255],[0,32,255],[0,36,255],[0,41,255],[0,45,255],[0,48,255],[0,53,255],[0,57,255],[0,60,255],[0,65,255],[0,69,255],[0,72,255],[0,77,255],[0,80,255],[0,84,255],[0,88,255],[0,93,255],[0,96,255],[0,100,255],[0,105,255],[0,108,255],[0,112,255],[0,117,255],[0,121,255],[0,124,255],[0,129,255],[0,133,255],[0,136,255],[0,141,255],[0,145,255],[0,148,255],[0,152,255],[0,157,255],[0,160,255],[0,164,255],[0,169,255],[0,172,255],[0,176,255],[0,181,255],[0,185,255],[0,188,255],[0,193,255],[0,197,255],[0,200,255],[0,205,255],[0,209,255],[0,212,255],[0,216,255],[0,221,254],[0,224,251],[0,228,248],[2,233,244],[6,236,241],[9,240,238],[12,245,235],[15,249,232],[19,252,228],[22,255,225],[25,255,222],[28,255,219],[31,255,215],[35,255,212],[38,255,209],[41,255,206],[44,255,202],[48,255,199],[51,255,196],[54,255,193],[57,255,189],[60,255,186],[64,255,183],[67,255,180],[70,255,177],[73,255,173],[77,255,170],[80,255,167],[83,255,164],[86,255,160],[90,255,157],[93,255,154],[96,255,151],[99,255,148],[103,255,144],[106,255,141],[109,255,138],[112,255,135],[115,255,131],[119,255,128],[122,255,125],[125,255,122],[128,255,119],[131,255,115],[135,255,112],[138,255,109],[141,255,106],[144,255,103],[148,255,99],[151,255,96],[154,255,93],[157,255,90],[160,255,86],[164,255,83],[167,255,80],[170,255,77],[173,255,73],[177,255,70],[180,255,67],[183,255,64],[186,255,60],[189,255,57],[193,255,54],[196,255,51],[199,255,48],[202,255,44],[206,255,41],[209,255,38],[212,255,35],[215,255,31],[219,255,28],[222,255,25],[225,255,22],[228,255,19],[232,255,15],[235,255,12],[238,255,9],[241,252,6],[244,248,2],[248,245,0],[251,241,0],[254,237,0],[255,234,0],[255,230,0],[255,226,0],[255,222,0],[255,219,0],[255,215,0],[255,211,0],[255,208,0],[255,204,0],[255,200,0],[255,197,0],[255,193,0],[255,189,0],[255,185,0],[255,182,0],[255,178,0],[255,174,0],[255,171,0],[255,167,0],[255,163,0],[255,159,0],[255,156,0],[255,152,0],[255,148,0],[255,145,0],[255,141,0],[255,137,0],[255,134,0],[255,130,0],[255,126,0],[255,122,0],[255,119,0],[255,115,0],[255,111,0],[255,107,0],[255,104,0],[255,100,0],[255,96,0],[255,93,0],[255,89,0],[255,85,0],[255,82,0],[255,78,0],[255,74,0],[255,71,0],[255,67,0],[255,63,0],[255,59,0],[255,56,0],[255,52,0],[255,48,0],[255,45,0],[255,41,0],[255,37,0],[255,33,0],[255,30,0],[255,26,0],[255,22,0],[254,18,0],[250,15,0],[245,11,0],[241,8,0],[237,4,0],[232,0,0],[227,0,0],[223,0,0],[219,0,0],[214,0,0],[209,0,0],[204,0,0],[200,0,0],[195,0,0],[191,0,0],[187,0,0],[182,0,0],[177,0,0],[173,0,0],[168,0,0],[164,0,0],[159,0,0],[155,0,0],[149,0,0],[145,0,0],[141,0,0],[136,0,0],[132,0,0],[128,0,0]];

Then replace the const colorValue and fillStyle lines (currently 455-463) with:

var colorValue = 255 - pixels[i][j],
            rgb = jet[pixels[i][j]];

          my.spectrCc.fillStyle = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;

Thank you, really helpfull, it works for me

[Stoyvo]

Thanks @jamesshannon!

Can someone point me in a direction to instead color the waveforms using this frequency data instead of generating the spectrum? I would be more than happy to make this PR, just not sure where to start. I was considering adding logic to https://github.com/katspaugh/wavesurfer.js/blob/master/src/drawer.canvasentry.js#L141

CC: @thijstriemstra because you have deep knowledge, to avoid back and forth PR comments...

IMO This feature would have be a great addition

[thijstriemstra]

yes this looks cool. doing something with setFillStyles looks like a good start, you'll just need to dig in @Stoyvo, PRs and questions are welcome.

[shershey]

Hey all, let me know if my pull request looks good. If it's on the right track but requires changes, let me know. Thanks @jamesshannon for getting an implementation started.