Side-by-side audio comparison

Take a look at the example: there are two audio tracks and buttons to choose an answer. Note that validation, keyboard shortcuts, and task layout are already configured in this example.

View example

Components used in the example
Note. You can add media files from your own server, Yandex.Disk, or cloud storage, such as Yandex.Cloud, Google Cloud, or Amazon AWS.

What else can be configured

If this template doesn't meet your needs, see other examples in this section.

Add a response field

If you need comments from the performer, add a text field using field.textarea. In this example, additional validation is set up that requires entering a text if one of two audio tracks is selected.

View example

Arrange audio tracks vertically

Audio tracks can be arranged in a single column, top to bottom. This interface is better suited for comparing more than two audio recordings.

View example

Add a source text

You can add a field with a source text using the view.text component. For example, this might be useful if you want to find out which of the audio recordings best matches the description.

View example

Add a layout

To enhance the user experience, you can also highlight different types of data with colors using view.alert. In this example, the source text is highlighted with a blue border, and the buttons are highlighted with a yellow one.

View example