How to use inside a sophisticated react-js app
See original GitHub issueIssue Description
Description
I’m trying to use videojs-wavesurfer
inside a sophisticated react-js app. I have studied and followed these docs:
https://collab-project.github.io/videojs-wavesurfer/#/usage https://collab-project.github.io/videojs-wavesurfer/#/react
But I have a hard time integrating videojs-wavesurfer
into current code. I’m seeking help here. Can anybody help us figure out how videojs-wavesurfer
should be used?
Steps to reproduce
The exact steps taken to do the integration are available here: https://github.com/mediacms-io/mediacms/pull/403
Results
Expected
I expected to see the videojs-wavesurfer
effect while playing audio.
Actual
Unfortunately, videojs-wavesurfer
has no effect.
Versions
"videojs-wavesurfer": "^3.8.0"
video.js": {
"version": "7.12.3",
"wavesurfer.js": {
"version": "5.2.0",
Browsers
Any browser.
OSes
Linux.
Issue Analytics
- State:
- Created a year ago
- Comments:10 (3 by maintainers)
Top Results From Across the Web
Thinking in React
One of the many great parts of React is how it makes you think about apps as you build them. In this document,...
Read more >React JS Full Course 2022 | Build an App and ... - YouTube
Are you wondering how to become a React developer? Look no further, and get all the info in one video.The first 1000 people...
Read more >React JS— Architecture tutorial + Features + Folder structure + ...
A complete react js web application architecture. Boilerplate code for creating a new web application using react JS. Our app architecture ...
Read more >How to Use React.js and Complex JSON Objects | Pluralsight
Create two simple components to get started. First, the Colors component : ; Now create the Home component and render the Colors component...
Read more >A quick guide to help you understand and create ReactJS apps
The project can be created using create-react-app. Use the following command to create the project. ... first-react-app is the name of the ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thanks @thijstriemstra 😄
For some reason, this error is thrown before I can do any logs:
Simple demo
To better understand the error cause, I created this simple demo repository:
https://github.com/Megidd/videojs-wavesurfer-react
Based on this guide:
https://collab-project.github.io/videojs-wavesurfer/#/react
The simple demo code works fine:
So now, I will have to investigate further to figure out what I’m missing in the sophisticated React app…
@Megidd make sure the following code is working correctly, which prints all version numbers for the required javascript dependencies:
because it looks like you don’t have wavesurfer.js properly included.