Comments (16)
Do you need to turn on options: scrollable
?
from wfplayer.
Using this scrollable option is not making any difference.
from wfplayer.
I don't quite understand what effect you want, can you briefly describe?
from wfplayer.
Hi, @zhw2590582 Sorry for the delay.
Let me explain it with the help of screen recordings of your wfplayer and subplayer libraries.
As you can see, the scrolling of waveform is smooth in subplayer as compared to wfplayer. In subplayer, the waveform scrolls as the seeker scrolls, while in wfplayer, the waveform jumps at the interval of 10 seconds (0 to 10, then 10 to 20, then 20 to 30, and so on). So, what I am asking is how can we do the same smooth scrolling (as done in subplayer) in wfplayer?
from wfplayer.
I just turned on this option
var wf = new WFPlayer({
// Mount the audio waveform of the dom
container: '#waveform',
// Whether to use scroll mode
scrollable: true,
})
from wfplayer.
Thanks. Yes, I enabled this setting, and now the waveform on wfplayer.org scrolls as I prefer. Does this attribute also depend on other attributes? Because despite the fact that I passed this information to my code, the waveform does not scroll. Let me also add the code segment.
this.wf = new WFPlayer({
container: this.$waveform.current,
mediaElement: document.querySelector('#video'),
waveColor: 'rgba(255, 235, 59, 0.95)',
progressColor: 'rgba(255, 255, 255, 0.3)',
cors: true,
scrollable: true
});
where $waveform is ref attached to waveform div ( ).
Do you see anything that might be causing the scrollable attribute not to work?
from wfplayer.
I wrote a react demo for you:
https://codesandbox.io/s/zealous-bouman-ilouot?file=/src/App.js
from wfplayer.
Hi I saw your demo and tried to change it into class component. Here is the sample code. Feel free to make changes.
https://codesandbox.io/s/class-component-wfplayer-u7otwk
from wfplayer.
I have modified the code for you
https://codesandbox.io/s/class-component-wfplayer-forked-w5sys7?file=/src/App.js
from wfplayer.
Thanks a lot. I am doing the same in my local code but am not able to see any change. I guess I have to keep checking what segment of code is making the change.
1.) I'd like to know what browser you use because when I open the codesandbox in Google Chrome, the waveform does not appear, whereas the waveform appears fine in Mozilla. Any idea why this is happening?
2.) Can I add the contextmenu on the waveform the same way we are adding it on the subtitle?
from wfplayer.
- You can look at the chrome console, there is a high probability that fetch is wrong when pulling video data, such as cross-domain problems
- Yes, do you want to be a subtitle editor? you can refer to this: https://aimu.app
from wfplayer.
Hey, I have attached a screen recording of the subtitle editor you referred to.
aimu.mp4
As you can see in the recording, when I right click on the waveform area (not on the subtitle), the browser's contextmenu is opened. I tried adding a custom contextmenu on the waveform, same as the contextmenu on the subtitle, but no contextmenu event fires when I right click on the waveform. Any suggestions/advice/corrections?
from wfplayer.
Are you asking how to add a right-click menu?
You can refer to this: https://github.com/vkbansal/react-contextmenu
from wfplayer.
I am not asking how to add a right-click menu. I already have a right-click menu in my project (working fine on the subtitle part) . I just wanted to know if I could add the same right-click menu on my waveform as on the subtitle. I have tried using the same in my project but the right-click menu is not working on the div id="waveform" style="width: 1000px; height: 300px">/div> but it works perfectly on the subtitle over the waveform.
from wfplayer.
Why not?
https://codesandbox.io/s/zealous-bouman-ilouot?file=/src/App.js
from wfplayer.
I am literally exporting your codesandbox code and running it on my machine and it is behaving differently. Scrollable is not working. ContextMenu is not working. I guess I will have to keep checking why this is happening. Thanks for helping me.
from wfplayer.
Related Issues (20)
- Connect to audiocontext. HOT 1
- Waveform of large audio files HOT 3
- Is their any way i can show the horizontal scroll bar HOT 7
- Is there a way to remove the padding entirely? HOT 4
- How could I change the timestamp display to only minutes and seconds and not hours as well? HOT 1
- 这个能实现类似Y轴数值的波动吗 HOT 1
- Generate waveform while audio is playing HOT 2
- error: Uncaught (in promise) DOMException: Unable to decode audio data HOT 4
- preload option availability HOT 1
- Wave generation using json or dat file HOT 1
- 报错:AudioContext decoding get Wrong:Failed to execute 'decodeAudioData' on 'BaseAudioContext'..... HOT 10
- Using WFPlayer with ArtPlayer HOT 1
- Delete this issue, Accidently created from wrong account.
- Need help with setting up the subtitles on the waveform HOT 1
- Large file issue HOT 15
- Browser crash on loading video/audio of duration around 2 hours HOT 6
- with window.OffscreenCanvas to undefined, options will never be dispatched to drawer.config HOT 6
- Add option for cursor position HOT 2
- +1h audio file destroys the ram HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wfplayer.