AudioWaveform visuals

[WannaBeGUD]

How can I better define the visuals of the audio waveform? - Sorry if i've missed anything obvious but I can't find how to change the AudioWaveform into something nice.

My main issues are the 2 waves for 1 sound and the resolution. Feel free to let me know if I've just take the wrong approach using the AudioWaveform. For the type of output I'm after, whilst not exact is something like;

Thanks for any help

[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