#Wavesurfer play button how to#
#Wavesurfer play button code#

The correct video and audio are now showing. I thought this was because the switch statement didn’t call next(null, srcObj) so I added that line in as well. Unfortunately, when I do that, it doesn’t load the video. This has something to do with how that switch statement is constructed. I had to specify to use the “WebAudio” backend to get it to load it. Technically, the new audio is much longer than the old audio it is replacing, but I know from my other testing that even with audio of identical length, the bug remains.ĭo you think it is possible to fix this and make the two remain synced?Īlso, I hacked away at the compiled JS file and tested the fix I was asking about originally (passing in a custom “src” argument).

Observe that the new audio plays but the video does not.

Paste into dev console: player.wavesurfer().ay().

Observe that playback position of the wavesurfer waveform does not change.

Click on the video file slider to change the playback position.

Paste the following into the dev console: player.wavesurfer().surfer.load('').

Here is a simple demonstration of the bug:

#Wavesurfer play button code#

That was much easier than having to make a code pen.

#Wavesurfer play button how to#

(Although to test it I’d need to figure out how to build this – Thanks for the suggestion to use your demo page.

I’m happy to help with testing or a pull request if you can confirm there is no current workaround and that my suggested change would probably work. So if there is some workaround that will work with the current code but not with MediaElement, that would be fine.Īny help or advice you can give would be appreciated. That being said, I’m happy if you can help provide a resolution to this for either backend type. In my case, I’m actually using MediaElement because of this bug in wavesurfer. Note that I think this code should be above the switch case because it might apply to both backend types. It might look something like this where you could check for a “url” property on the wavesurfer config object and use that to override the “src” being used with the video:

I looked at the code and it does seem like it might be a fairly minor change to support this, if you’re willing to offer a “url” config option to support this. This does work but it seems to break the playback link between the video.js and wavesurfer so they are no longer in sync. I tried to use player.wavesurfer().surfer.load(url) after video.js loaded to swap in a new audio file. I know I can do this by editing the original video to splice in the new audio, but I’m hoping to be able to avoid that approach. But I need wavesurfer itself to show the splitChannel file. I assume it would be the audio from the original non-split video, which is fine. It doesn’t matter which version of the audio file is actually played back. I then want to be able to use videojs-wavesurfer to display the original video while showing wavesurfer with the results of the splitChannel audio file. I want to be able to extract audio from a video file of two people speaking and process it to separate it into two channels: Person 1 on the left, and Person 2 on the right. This is probably a very niche request but I need to use videojs-wavesurfer to display wavesurfer where the contents of the waveform are pulled from a different file/URL than is used for the video.įWIW, I’ll briefly explain why I need this.