AudioWaveform visuals

[rglides]

@WannaBeGUD

create a local LAF for the waveform component then use (here I name the laf LAF, you can name it how you want)

const var LAF = Content.createLocalLookAndFeel();

reg waveformPath = null;

LAF.registerFunction("drawThumbnailRange", function(g, obj)
{
    var a = obj.area;
});

LAF.registerFunction("drawThumbnailPath", function(g, obj) 
{
   var a = obj.area;
    waveformPath = obj.path;
});

LAF.registerFunction("drawThumbnailRuler", function(g, obj)
{
    var x = obj.xPosition;
});
Content.getComponent("AudioWaveform1").setLocalLookAndFeel(LAF);

[rglides]

@rglides Sorry, the drawTumbnailPath here is misleading. I'm using a null because I'm drawing the path data in a panel in my own project and 'forgot' when writing. Here is the right way

LAF.registerFunction("drawThumbnailPath", function(g, obj) 
{
   var a = obj.area;
   g.setColour(Colours.orangered);
   g.fillPath(obj.path, a);
});

Content.getComponent("WAVE_SP1").setLocalLookAndFeel(LAF);

[WannaBeGUD]

@rglides Thank you for posting this, is there any docs on what values I can change/effect with LAF? I can't find any anything referencing the audiowaveform that would help me say render just 1 wave line instead of the 2. - I realise I can just hide the 2nd channel with a panel, not sure if it's efficient too.

I also found this good snippet for getting started in LAF for audiowaveforms;

HiseSnippet 1391.3oc4W8taaTDDeu3bUXSAQKEo7wUQDIWv33yIkFDBQbRrasHo0JNDPJJpZycqsWx5cOs25Dag56Bek2FdT3MHL6d19tKboXLz9A3TTr2YmYueye1ey3NJoOMJRpPNEOYRHE4be2tSD5A6OfvDn1Gfb9P2iHQZpBGKZuIgjnHZ.xwovyLBbJtJx976e6dDNQ3SSDgPmJY9zCYCY5Doc186XbdKR.8D1vTZu8ts8kh8kb4H.OEbqgBI9WR5SeAwn1JtHm60LfokptZhlFgbVcOYvjtCjWKh0+TVD6BN0rvC0ENnXwsj7.ChMeGs+.FOnyL+NBgbb6jDEJDGEdj6Qr.1b4IQiOxtANwhzwCmUxBuBYfm2cAubfjSJHsZLjdfaWeEKTmriAOuuaaAjb5QfvdZnDqKZkesf69RPCgt5PxkzVJXwbKJucsZUv0qU6wecoRPnORiuhnvbRO72faJ5yDzp9JJ3LOiKufviOzCkxKaHBZQo7xFCA0qpn8YlhjViD9ZlTTd8.E45SFLZ3EBBieLQzmtdEbuYa2uBVdwO8X7OWpXIL7zuZOnjnAmW1fEb7i8SCfFCvATuZnLhYLG+Y1kD.ZmU+b.BwGQDUGW7Tt13VspWm.UXSOs9UM34PvgJOtBF9qVkjiXqyqf8pUs1bcydPwOK7AU8ISUMmCqWuacXvlsfLR40OkpBHBBDi7pmBIlWVCNqufFbBcLnGTZoz3N50qb1X7mCv1Bh5w4Q30uNm1Sudr8kdsI8rPInND8fEL+LtVZ+yjdHSSOlXPJG6YJR.CJ7ZAVV9LaJ4q1Yqc7pfImYfJ4LO3+F46Dr8S2IvHotU9VmedlHfAcksE.vWRh2URh0w36NzaVEkMdLyEwRwKjZ5KEkebIiW95R3auUud4tm49jRx4TUtaa3zTuICKKffNUUAhc7Qz4JBWzyxdbuEi8vO95cJEkh1Bl9kgzoqSn+7xgqAMkevv5LEgv6Va4b9jobNMFEvj+.4JZOoZHhEX3AyHyCYclzL+ADMA4rs6lGxtPQTS1zZvlMBC4TLvgDFE+8Mq4geNKD+bY3lM7pdM4JjxPWXqzAxYGygYkzTDXWO5gHz229.y4OEy.7AWJjpzLSjy4.5UPamXdyhtGPitTKCs5NLTJLNqy8+a6giS2oZR5EgyBmsCLsNr1YcQbGNYBU4ghHCAWssHfNNNqcMKPOv3MC.+a.k0ef0W+E37zvE8YMAKduat4F6agooCSjt1ZqYkFAYc390zNjNEtnehNarwFwl9m6k.cwjAi3Dc1Val94S2.pXyzOwzyP.ruSR2u+186V8tqXqka63bqGWP39.2NLs+f7w6J4fWnX4sMdmN8vG31rWOpuNArq515GeiiJ7uNT93YPwVMZJFowSLja84cOU2usnS0EtvS0ACX5CoMZ5RIat7DELuGSzO8qx.ylBBDKBRK9XoTaHoSOUYW6kLKuAb7YzldEUEk8DRt1rTbTCMAoXxogjwy3k3fMYHt3V3Om2xovBm1Sywm8hYJ8yYzwUeaMM66za2+yIiJrXv8uX36hyvXWlo3po3JJGtJYw3CgNK8Hi35YRydO5HoPFNPJX9YKE0JV+9TUZrmqC0PqgqCIRdztGS4TRTpZ9OcWyjnD0suM8V8Ghja9ZM2X3hMW9w+2nIRg+e1D4X4HMPBeDAJTMDauXzvt.2sOEPhPP4QFxrULCNFut1LtttTQfcALyxMS2zyr1Y5ldy17cx6XHwWIeke7HslZ42yJA7agk1un6Ql034yt55B+HPfXOf8JeeS39K7Pn7so9RXyVKgMauD17jkvlubIr4oKgM67FswzLpwHsbX7UQPPml1w7cblOBfSAzePGgCDL

Still not sure where any documentation for this is however.

[rglides]

@WannaBeGUD This snippet is plenty. You can do most if not all that you could do in a paintRoutine with lookAndFeel, @d-healey videos on youtube have everything you need. In terms of showing a single channel, I just put the waveform in a panel and set the height to double. No performance issues

HiseSnippet 1498.3oc2W80aaTDDeu3bU0lVDEJRg2VYQEtfw3yIkF.gvtI1UVDmZYmVPJMpZycqOuj618zcqcrUUkPpeA3IDeb3i.eT3AdOL68mb203z5ZQQTNYY6c1Yl827mcl456KLoAABejVwCl6QQZWSe3btb7NiILNp6tHs2UuGIPR8wQjt2bORP.0BooU39JBZEWGE97me28HNDtIMkDB8HAyjtGykISo1u42ybb5PrnGvbyv8VM6ZJ36HbDS.7TPuNxiXdBwltOQw1Z5Hsqz1hIE9CkDIM.os98DVyGNVbJOh+GwBXG6PUKLPCAEEQtivwRgXEUzNiYNV8Sr6.DRSuepWnPjW3l58XVryom5MduvMvoRj0ensVd3UHG7LxBu5Yf2BfjVFHsdDjtg9PSelmLcGEddG8tbH3Lh.t8rPIhWzZ+5556H.N3xZtjSnc7gEmKQkspWuJtQ8529aJUBb8AR7ThO1gLB+s3DwL8of0rmvj3rmPbRKtUGJ0ohRDfwZ9TalJ8nyDtojI3UJa4SN8fwSbOlSXNCHbaZ4p3QIaaWEKN9mtM9okJVBCO10FAICsbbpnPAN5I7WETlA.AXulmHfoDG+ogKI.lNrwQ.DhTQ.UFk1To9rNcZzf.4VwZytlBO6w3zJyphgO0qlphMOpJ1nds5myadEE8rzJp1chYcAJaznWPYvlc.ObkxOh5aQ3DvGYzHCRTGVKGlMmZc.cFvGjT4Kw8kkqd3L7mAvNDDMhhfvwW1gNRVNR9ROaICO8IxwKYzYV8rVmJ3PhCNJOPFy599DKFj4zAjrxggAjuZ6M21nJlbnBnjCMfuUz21Zq6tskhRiP5adzQ4reE5pDF9g+j5sql5oiv2kvWR9zR6MFLwg5u.2QomdgDxY8iyHWPNXzOAvENavMPxA0ATSYEH.94XiboOeQCHLVEucckGHDuI2+rU500SvoprkVSrXhefLkNR36ZT91pi8B2MASUogRkRLDrfuuPRe.uhxVJV5Ykvu3ViFsv8TnvW3.9kEtsp.t+KSvJbv2R8qBNOmIzyYDppkuTo9kWpLakbyHmRFFE7tbl7AdT9kUeGE6IUkUiQEzHQFVT8CiKplyshXVpB84c0nPCHaqMKhjfz9D8ge8iG1pW+8ZO7wC51oyCG18A6+XPsTJGuGydrr1ojoHeUgvv6vfwp8Wa8QQTZysTq+sm+bD5gc2UoxXXBHFrBOpujobPZ6RmBsRi5ETTeWZvIRgWHuwIGHsRQF00S5TP3TmPi4p5g+2.MKqALOcwtMOkYIGqfxungPioJbqV0G17X6jdxEuxYmcVn.LI0MkZhFSo1HKYIT.6hpHGzu1qc7XV1AGxXJG76dIA+tVpN4gxgg6Gd39Nj4TeCTrwFKxOOsYhAmnDqlKFy4M6M1XiPpAP5HTsKdNEsBYcX25V2JTTO3hNWlwhOOlftXudXJCg0DGhL+nGp4sh2.tjkqeupmNGpHMO67X+iMOxxBwan2mIMGuXLt1BvHjE7l.iwSwcc81iFAEbSA355c9w2Lirk83+fjiOL0Sk4QilVagIiW9D0+wxNQs2ROQMLbuIDdnYSSBiYG3CyZy31YOJELayIf8akk7.gPp5Yjch9gDWOmn5af5ywMcJ0OHuFRurrrkOcU9kn5ltjYIkLc..lqlpSHhOujpVgW16KXrhuuv5+m68EdKnDRtWooXBFGxToMs4SoNvkjPL99PusQjINxDp4ugzSvEdiEblY9jLoOy1l5mE6KzfZIkPhdJka1b.0gRBxjM+wMUS4S7ew6IuF9BiW6WuagwqMzifKVcsF+1ao+B++tz+.wDIT5rGARBU0l1eh6PnhqIENcNziWMeq1ZpIQiVWWsV4AFR4VgKf4KNKdSC0Zs3MMR17ekyvkX5KdhYzLxp7zqFRAradXw5h58TqwKXXXWnJ2SLMyqpKHXiUUvMWUA2ZUE7Nqpfe4pJ3cWUA29UKnpITqIRgazUSDpW+1gurgl14M30Jf9a.sbDehB

[rglides]

There is also a good zoom example for waveforms in the example browser

[WannaBeGUD]

@rglides Thanks for these, all really useful! The snippet and zoom examples help a ton.

[DanH]

Oooh I'd love to be able to colour a looped section differently to the rest. Doesn't look possible just yet

[rglides]

@DanH it should be possible if drawing the waveform in a panel and using the sample start and end data, but I haven't found a way to push the data by adjusting the start and end in real-time, perhaps with a timer

[DanH]

@rglides the post loading callback should be able to do this since it gets called every time to adjust the loop / load a sample map

[rglides]

Might not even need to use a panel actually, I might have a think about this

[rglides]

@DanH does that work with other stuff, besides the loop or load? I'm working with the range but not the loop range

[DanH]

@rglides not if you use the start point modulator but if you're changing anything in the sample map itself it should be called

[rglides]

@DanH ah yeah, but pushing data when changing the range via an audioWaveform would be nice, if that could be done