wavesurfer.js icon indicating copy to clipboard operation
wavesurfer.js copied to clipboard

Need to know how to capture the location of the cursor when using the cursor plugin.

Open SteveC00k opened this issue 4 years ago • 7 comments

NOTE: This isn't an issue like a bug but rather I am trying to figure out how to use values from the JS to create a separate canvas(s) to make my own markers above. I do not know where else to ask. Apologies if this is not where I need to ask these things.

Current version of hosted plugin. Brave and Chrome and windows 10 and 8.1

Code using is the Main plugin wavesurfer.js, and plugins timeline, cursor

There is no issue other than I am trying to capture the cursor location. Basically what I am trying to do is take the same area that the waveform is in and capture the location of the cursor to place points in a separate container above the waveform to create my own markers in a separate container. (Not ranges) I have been working on this for a few days and its hard because the plugins are in minified format. Also I have to figure out how they are handling more than one container to allow scrolling. Any info would be greatly appreciated. Thanks.

SteveC00k avatar Jan 07 '22 00:01 SteveC00k

Just an FYI for others attempting to do similar. I have found the value I needed to place a box just above the cursor . wavesurfer.params.pixelRatio Use this for the X value and it will be the same location of the cursor even if you zoom. I am still working on this and will update here on things I find. Perhaps the author(s) can then later make a new plugin or similar to allow this to be integrated. Thanks again.

SteveC00k avatar Jan 07 '22 03:01 SteveC00k

Next I am going to try to figure out how to retain position when zooming in or out.

SteveC00k avatar Jan 07 '22 05:01 SteveC00k

Ok I am not sure why but the value I am using does not work in Chrome.

SteveC00k avatar Jan 07 '22 18:01 SteveC00k

I have been working on this for a few days and its hard because the plugins are in minified format.

Why not use the un-minified?

thijstriemstra avatar Jan 12 '22 11:01 thijstriemstra

After spending a lot of time in the code. I realize that what I need is to be able to create a duplicate container without the waveform. Then assign my own drawings in this new container matching the play location. The code uses a function/class to produce the "container" that has the canvas to produce a 2D drawing background for the graphics. I just need to tap into that and generate what I need.

SteveC00k avatar Jan 13 '22 22:01 SteveC00k

Would be great to have a roadmap for plugin development. Any other information that could help me would be appreciated. I really like this and would like to make something great. Just not as good as others at JS. (still learning)

SteveC00k avatar Jan 14 '22 07:01 SteveC00k

I have been trying to get the 2 canvases linked so when you zoom in/out they any created elements in the 2nd one will match the 1s one that has the waveform in it. I am not having any luck figuring out how to do that. The 2nd canvas does not even create new objects stacked like the 1st one does.

SteveC00k avatar Jan 15 '22 18:01 SteveC00k