Region scaling

[Dethorhyne]

I'd just like to preface this by saying that I'm fully aware of how niche this concept is, but I'd still like to share it.
I was wondering whether it'd be possible to implement a functionality that would scale regions of the waveform depending on some conditions.

My reasoning for this is visual representation of beat charts (think guitar hero or similar), where different stages are played at different speeds. Representing that visually, along with the audio, would only be possible if different sections scaled differently.
Alternative to this would be to build each section separately with different widths, but as I don't see a way to "cut" only a portion of the audio track, it's not possible to do it using n waveform elements.

[katspaugh]

Not sure what you mean by scaling. Can you sketch an example?

[Dethorhyne]

Thank you for the response, I'll try to clarify further: Imagine an audio track that lasts 20 seconds. It has 2 stages. First stage is scaled 1x, second one is 2x. Both stages of the track are played at same speed, but the wave below them is scaled and the wave of second stage is 2x wider and progresses faster (to put it in "gamey guitar hero" terms, it's like speeding up notes so they come down faster, but looked at it from afar, they're just 2x spaced and camera is 2x faster. Here is a visual example (normal 1x): Stage 1. Stage 2 |---------------|---------------| Scaled stage 1 1x, stage 2 2x |----------|--------------------| Full width of the container doest change, but each section is scaled differently and both middle lines mark the 10 second. I hope that makes it more clear what the goal is. sub, 8. tra 2023. 13:20 katspaugh ***@***.***> je napisao:

…

Not sure what you mean by scaling. Can you sketch an example? — Reply to this email directly, view it on GitHub <#2758 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADNF77ZSXYZUDV2YRRCABADXAFCYTANCNFSM6AAAAAAWVWSFJ4> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[katspaugh]

Oh, I see. Sounds cool!
I think that would be quite difficult to achieve with a single instance of wavesufer without rewriting a lot of the rendering logic. Could be a custom renderer though.

[Dethorhyne]

I've been looking a bit into that, but frankly I'm having trouble just even finding the right files to see what's what. Is there a doc or a reference that I can look into for as an example? (When I can see an example I could work from there, I just suffer from the initial "what is this source code" syndrome 😄 )

Alternative question/request though, as I haven't seen this mentioned in the documentatione, is there a way to "cut" a portion of the audio track? ie, if track is 5 minutes, set wavesurfer to be from 0:50 - 2:20 from start to end?

[katspaugh]

Yeah, I know the feeling. I recommend starting with the new version aka wavesurfer-ts.
You would basically have to reimplement this function: https://github.com/katspaugh/wavesurfer.ts/blob/main/src/renderer.ts#L256
It calculates the width of the waveform based on the minPxPerSec parameter (or just fills the container if minPxPerSec is not set)., and then renders a waveform graphic on multiple canvases.

An alternative approach would be to use multiple completely separate instances of wavesurfer put next to each other using CSS. Each of them would have its own zoom (minPxPerSec) and they would play in sequence.
I guess your question about cutting a potion of a waveform is related to this alternative approach. One way to chop audio is via a Web Audio buffer. See this StackOverflow answer.
Another way would be to render the entire audio but mask parts of it using CSS (e.g. a container with overflow: hidden + shift the position of the waveform), and then jump to the right timestamp when that portion starts playing.

[Dethorhyne]

Thank you for the response.

I've looked into your answer on StackOverflow and that seems like a good fit for what I'm trying to accomplish. Most of my code for the chart is already segregated by stages, so playing each stage individually audio wise seems like a good fit as well, I'll try to implement it that way!

[Dethorhyne]

Update: Seems to be working fine. I'm currently using one wavesurfer to init the whole chart (to access the backend buffer), then from the main one I've created a new buffer and initatied a new wavesurfer object which is placed properly. (I'm not using the minPxPerSec at all, as I know the chart layout, so I'm just using note1.offset - note0.offset to calculate width of the container).

I successfully made this hardcoded one stage, now it's a question whether I can implement a loop for this, but it'll require some additional code changes and can't be tested quicky but I don't see it as impossible. Thank you again for the help and suggestions.

I would love to send you a link to see where/why will this be used, but I wouldn't want to advertise openly, is there a way I can reach you directly? (if you're interested, that is)

[katspaugh]

That's great!
Sure, I'd love to see it, feel free to shoot me an email at [email protected].