Play audio region from sidebar

[kaustuk]

Is your feature request related to a problem? Please describe.
Consider a scenario, we have an ASR system that provides the transcript per audio region basically it's able to find a speech and transcribe it. Now we want to give it out to the annotator for transcript corrects. And in this case, we will create a pre-annotated label studio task at the region level.

As per the current label studio version annotation flow would look like below

1. Select the audio region which we want to label from the sidebar.
2. After selecting the region to play that particular region, he needs to go to audio and double click on it
3. After hearing that region he will have to correct the transcript

Feature requested annotation flow look like

1. Select the audio region which we want to label from the sidebar, and double click on sidebar to play that particular audio region
2. Hear the audio played and correct the transcript

With this feature, it would have a lot less effort for the user for labeling

Additional context
Here is the screenshot explaining the feature request

[kaustuk]

I would like to contribute to this feature, If someone can give out some pointer on where should I look for in label studio codebase, and after that I can pick it up 😄

[makseq]

@kaustuk https://github.com/heartexlabs/label-studio-frontend/blob/master/src/components/Entities/RegionItem.js --- I think the play button could be here.

[kaustuk]

Hi @makseq, I actually went through the code whatever you have mentioned. So here is the implementation I was thinking of.

Implementation:

1. Add a new button in the region tag similar to the hideable Beside the mic button. Here is the code snippet

          {item.playable && (
            <Elem tag={Button} name="playable" size="small" type="text" onClick={item._ws_region.play()} > 
              {<LsVisible/>}
            </Elem>
          )}

Here LsVisible would be replaced by some other play button.

The problem/unknown for me

1. Getting some error and not able to assign item._ws_region.play() to on click?
2. Where do I add a playable flag I mean where can I refer to item code?
3. Also how do we made changes to pause and play?

PS: Sorry to ask such a silly question 🙈 . But I am completely new to react framework.

[makseq]

@kaustuk Sorry for the delay. Do you have an opened PR with this feature? Are you still in progress?

@Gondragos could you assist with 1-3 questions please?

[kaustuk]

Hi @makseq, Nope I don't have open PR. It's still in progress. I am still exploring and learning react.

The above question answer would be helpful.

[hlomzik]

Hi, @kaustuk ! Thanks a lot that you are willing to improve audio labeling!
You are doing it right, but onClick is a handler, so it accepts functions:
onClick={() => item._ws_region.play()
This code should work.

Weird thing that regions have only play() method, all other stuff are inside Wavesurfer component, it's reachable from audio region: item._ws_region.wavesurfer and it has all the things you need:

• play()/pause() methods
• playPause() method to toggle playing
• isPlaying flag

Hope this helps!