Can I edit start-end time of a region using button.

I’ve been trying to make some button that allows the user to edit the already created region through input fields.

Something looks like the image above.

So what I want to do, whenever the user creates a region, he can set a new end/start time and press edit, so the region get edited to the new values.

Note: 1- if there are multiple regions, the user should be able to select anyone of them and edit it’s start/end time. 2- I tried to think of removing/deleting the selected region, and re-create the a new one with the new inputs, but I couldn’t remove a selected region using the button. (I tried clearRegions(), but it removes all the regions not a specific one)

I’m using ReactJS.

This is the code I’m using:

wavesurferConfigure = {
        ...wavesurferConfigure,
        plugins: [
          RegionsPlugin.create({
            dragSelection: {
              slop: 5, // slop
            },
          }),
          TimelinePlugin.create({
            container: "#timeline", // the element in which to place the timeline, or a CSS selector to find it
            primaryColor: "blue", // the color of the modulo-ten notch lines (e.g. 10sec, 20sec). The default is '#000'.
            secondaryColor: "blue", // the color of the non-modulo-ten notch lines. The default is '#c0c0c0'.
            primaryFontColor: "#000", // the color of the non-modulo-ten time labels (e.g. 10sec, 20sec). The default is '#000'.
            secondaryFontColor: "#000",
          }),
          CursorPlugin.create({
            wrapper: this.$waveform,
            showTime: true,
            opacity: 1,
          }),
        ],
      };
    }

    this.wavesurfer = WaveSurfer.create(wavesurferConfigure);

And this is the button I have where I don’t know what should be the input of onClick fn

                <Button style={{ marginLeft: '15px' }}
                  onClick={() => {
                  }}
                > Edit Region</Button>

[Winchester37]

@lxtadhamnawito https://wavesurfer-js.org/example/annotation/index.html

This example solves its job, and it will be useful for you.

[Winchester37]

I’m thinking 😃 But I have to get it done today and tomorrow. I will definitely share it here.