Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add Support for Loading Audio Separate From Video

See original GitHub issue

Issue Description

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.

FWIW, I’ll briefly explain why I need this. 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. I already have this part working.

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. It doesn’t matter which version of the audio file is actually played back. I assume it would be the audio from the original non-split video, which is fine. But I need wavesurfer itself to show the splitChannel 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.

I tried to use player.wavesurfer().surfer.load(url) after video.js loaded to swap in a new audio file. 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 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.

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:


Note that I think this code should be above the switch case because it might apply to both backend types. In my case, I’m actually using MediaElement because of this bug in wavesurfer.

That being said, I’m happy if you can help provide a resolution to this for either backend type. So if there is some workaround that will work with the current code but not with MediaElement, that would be fine.

Any help or advice you can give would be appreciated. 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. (Although to test it I’d need to figure out how to build this project)

Thanks, Dan

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:25 (12 by maintainers)

github_iconTop GitHub Comments

dan24678commented, Oct 7, 2020

I was using player.load() and not player.src() so let me try that and see if it works. If it does, then I should be all set. I am using 3.x.

dan24678commented, Nov 11, 2020

Using player.src() to swap in a different audio file results in the Video playback window resetting its duration counter to 00:00/00:00 and no longer playing the video when my wavesurfer play button is clicked, so this isn’t a working solution for me.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to separate audio from video | Clipchamp Blog
Separate the audio from your video​​ Click on the detach audio button. Your audio file should now be separated from your video and...
Read more >
How to Separate Audio from Video[2021] - Wondershare Filmora
2. Separate audio from video in a click. Now right-click the video file you want to extract the audio track, and select "Detach...
Read more >
Extract Audio From Video With These 7 Apps - Online Tech Tips
To extract audio from a video file, open the app and click Add Files. Choose one or multiple videos that you'd like to...
Read more >
Separate Audio From Video | Audacity & Windows 10 - YouTube
Separate Audio From Video | Audacity & Windows 10Learn how to convert video to audio in Audacity.NOTE: This is for the Windows 10...
Read more >
Audio Extractor: Extract Audio from Video Online - Movavi
With an easy-to-use interface, streaming support, integrations, and a massive library of add-ons, VLC makes it easy for you to extract and tweak ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found