zhw2590582 / WFPlayer

:ocean: WFPlayer.js is an audio waveform generator
https://wfplayer.js.org
MIT License
265 stars 33 forks source link

Is their any way i can show the horizontal scroll bar #20

Closed salmanAhmad143 closed 2 years ago

salmanAhmad143 commented 3 years ago

Hi @zhw2590582

I am stuck in a situation where i need to show the horizontal scroll bar at the bottom of the waveform. So the user can scroll and can easily see the rest portion of wave form by simply scroll left and right. So please tell me how can i do this?

Thanks Salman,

zhw2590582 commented 3 years ago

This does not have a scroll bar, but you can monitor the mouse wheel event

window.addEventListener("wheel", (event) => {
  const deltaY = Math.sign(event.deltaY);
  waveform.seek(waveform.currentTime + deltaY);
});
salmanAhmad143 commented 3 years ago

Thanks for your quick reply as always.

Actually my scenario is let me take the example of your subplayer. Suppose any one want to create subtitle at the end of the wave form like 00:00:05 to 00:00:08 then he can't be able to create this because wave form doesn't automatically move to the next segment. What he need to do is first he need to made the selection in visible area and then needs to adjust it by forward the video to the next segment. See below screen shot-

https://www.awesomescreenshot.com/image/9347254

So there are two possible solution of this problem -

  1. One is either we can give the horizontal scroll bar at the bottom of the wave form.
  2. Second one is when the user started the selection at the end of wave form then the wave should automatically move to the next segment.

First one not possible. I also tried the second one option. What i do is when the user started to drag the selection then i seek the video. But the problem is wave selection instantly reach to the end of the segment on wave form.

Please suggest the possible solution for this.

Thanks Salman,

zhw2590582 commented 3 years ago

I don’t understand it very well, and I can’t open your screenshot

salmanAhmad143 commented 3 years ago

Hey @zhw2590582 Sorry for my bad English because it's not my native language. This is the updated link see this- https://www.awesomescreenshot.com/image/9347254?key=d24265b135db6594142e2273c49e08c1

I want to create a subtitle by start dragging from the 00:00:05 to 00:00:08 and i am unable to do that because wave form not shifting to the next segment.

Please suggest.

zhw2590582 commented 3 years ago

You can refer to this project:https://subplayer.js.org

salmanAhmad143 commented 3 years ago

Hey @zhw2590582 You still not understand my query. I am talking about your https://subplayer.js.org project and my query is related for the same.

See i am start dragging on the wave form at you subplayer.org from 00:00:05 time and want to end dragging at 00:00:08 time . But i can't do that because 00:00:08 is coming after scrolling the wave form and i can't drag it with out leaving mouse.

I hope now you understand my problem.

zhw2590582 commented 3 years ago

I don’t understand what you said: But i can't do that because 00:00:08 is coming after scrolling the wave form and i can't drag it with out leaving mouse, When you drag and generate subtitles, the waveform graph will not scroll, and the player is also paused