Question

0

119

Views

Wavesurfer create region on event

I have a list of editable caption blocks - where users can add/remove caption blocks + in each block they can type/delete text too.

I want to:

create/delete a region in wavesurfer each time a user clicks the add/remove button
add/remove text in the region each time the user adds types/deletes the text

Here is a sample of my code.

    // Create a wavesurfer object
    var wavesurfer = WaveSurfer.create({
      container: document.getElementById("waveform"),

      // Visual preferences & settings
      waveColor: '#242844',
      progressColor: 'yellow',
      backgroundColor: "white",
      barWidth: 1,
      hideScrollbar: true,
      scrollParent: true,
      partialRender: true,
      interact: false,

      plugins: [
        WaveSurfer.timeline.create({
          container: document.getElementById("timeline")
        }),

        WaveSurfer.regions.create({
          regionsMinLength: 2,
          regions: []
        })
      ]
    });
    wavesurfer.load('https://ia800508.us.archive.org/15/items/LoveThemeFromTheGodfather/02LoveThemeFromTheGodfather.mp3');
    wavesurfer.regions.disableDragSelection()
    wavesurfer.setVolume(0)

How can I create this functionality?

about 4 years ago · Juan Pablo Isaza

Answer question

0

119

Wavesurfer create region on event

Find remote jobs

Andres GPT