Sync videojs-wavesurfer with SpectrogramPlugin and waveform

[Iquebal]

Hi,

I want to sync with three thing together. Sync videojs-wavesurfer with SpectrogramPlugin and waveform
I am not able to sync three things together. I am able to sync audio and video together but Spectrogram not able to bind three things. Please help me ASAP.
Here is the example two things bind together videojs and wavesurffer. I also want to bind Spectrogram. Three things in Sync.
https://collab-project.github.io/videojs-wavesurfer/demo/video.html

--
Thanks,
Iquebal

[thijstriemstra]

@Iquebal take a look at this example: https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/plugin.html

And mix it with the video example. What code do you have so far?

[Iquebal]

Hi,
I also want to bind Spectrogram.

thanks

[thijstriemstra]

I also want to bind Spectrogram.

What does that mean? videojs-wavesurfer should add a spectrogram below the player when you enable the plugin, like this: https://wavesurfer-js.org/plugins/spectrogram.html

[mayurshinde4590]

Hi thijstriemstra ,
i am also working with iquebal we stucked in below problem.
we need help in binding videojs and wavesurefer.js and spectogram,

example :- when i play video both spectogram and wavesurfer should play,and when i pause video all should pause.meanse all should in sync
please help us above problem .
thanks & regards
Mayur

[mayurshinde4590]

How we can add spectogram in below code can you please help use.

plugins: [
// timeline
WaveSurfer.timeline.create({
container: '#wave-timeline'
}),
// regions
WaveSurfer.regions.create({
regions: [
{
start: 1.123,
end: 5,
color: 'rgba(255, 255, 205, 0.7)',
drag: false
}, {
start: 6.5,
end: 8,
color: 'rgba(205, 255, 255, 0.6)',
drag: false
}
]
})
]

[thijstriemstra]

See https://github.com/katspaugh/wavesurfer.js/tree/master/example/spectrogram and https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/plugin.html

Use

WaveSurfer.spectrogram.create({
                container: '#wave-spectrogram',
                labels: true
            })

[mayurshinde4590]

Thanks for your reply,

but it seems not working in aur code can you please check below code that we have written and find mistake that we done.

this.config = {
controls: true,
bigPlayButton: false,
autoplay: false,
fluid: false,
loop: false,
width: 600,
height: 200,
plugins:
{
// configure videojs-wavesurfer plugin
wavesurfer: {
backend: 'MediaElement',
displayMilliseconds: true,
debug: true,
waveColor: 'lightblue',
progressColor: 'darkblue',
cursorColor: 'navy',

      hideScrollbar: true,
      container: '#waveform',
     plugins:[
      WaveSurfer.spectrogram.create({
      container: '#wave-spectrogram',
      labels: true
    }),
     ],

      loaderColor: 'purple',
      barHeight: 7,
      barMinHeight: 5,
      barRadius: 5,
      forceDecode: true,
      height: 170,
      interact: true,
    
      
      minPxPerSec: 100,
     
      responsive: true,
    },

  
  },
};

}

[mayurshinde4590]

this.config = {
controls: true,
bigPlayButton: false,
autoplay: false,
fluid: false,
loop: false,
width: 600,
height: 200,
plugins:
{
// configure videojs-wavesurfer plugin
wavesurfer: {
backend: 'MediaElement',
displayMilliseconds: true,
debug: true,
waveColor: 'lightblue',
progressColor: 'darkblue',
cursorColor: 'navy',

      hideScrollbar: true,
      container: '#waveform',
     plugins:[
      WaveSurfer.spectrogram.create({
      container: '#wave-spectrogram',
      labels: true
    }),
     ],

      loaderColor: 'purple',
      barHeight: 7,
      barMinHeight: 5,
      barRadius: 5,
      forceDecode: true,
      height: 170,
      interact: true,
    
      
      minPxPerSec: 100,
     
      responsive: true,
    },

  
  },
};

}

[mayurshinde4590]

Hi thijstriemstra Sir,

actually we took help from many of aur engineers but not able to find solution ,Sir If you have time then please connect with us on hangout .

[thijstriemstra]

actually we took help from many of aur engineers but not able to find solution ,Sir If you have time then please connect with us on hangout .

i can provide paid consulting services. where can i email you?

[mayurshinde4590]

please find my email id below

mgshinde007@gmail.com

[mayurshinde4590]

Hi Sir, Can we have call once you free. Thanks & Regards Mayur shinde

…

On Wed, Feb 17, 2021, 6:49 PM Thijs Triemstra ***@***.***> wrote: See https://github.com/katspaugh/wavesurfer.js/tree/master/example/spectrogram and https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/plugin.html Use WaveSurfer.spectrogram.create({ container: '#wave-spectrogram', labels: true }) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#127 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANV4WFCLOH7GJG4D7CPTHMLS7O655ANCNFSM4XYGWZVQ> .

[thijstriemstra]

I sent you an email earlier today.