Toloka documentation

Audio comparison (Side-by-side)

For this type of project, you can use the Audio comparison (Side-by-side) preset.

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.

Components used in the example

  • view.audio: An audio player.

    Show code
    {
  "type": "view.audio",
  "url": {
    "type": "data.input",
    "path": "url_1"
  },
  "label": "Audio 1",
    "validation": {
    "type": "condition.played",
    "hint": "Listen to the audio recording"
  }
}

  • layout.columns: Arranges audio tracks side by side.

    Show code
    {
  "type": "layout.columns",
  "items": []
}

  • condition.played: Checks if a Toloker has started listening to the audio.

    Show code
    {
  "type": "condition.played",
  "hint": "Listen to the audio recording"
}

  • field.button-radio-group: Buttons for answer options.

    Show code
    {
  "type": "field.button-radio-group",
  "label": "Whose voice sounds more natural?",
  "options": [],
  "validation": {
    "type": "condition.required",
    "hint": "Choose an answer."
  },
  "data": {
    "type": "data.output",
    "path": "result"
  }
}

  • condition.required: Checks if at least one option is selected.

    Show code
    {
  "type": "condition.required",
  "hint": "Choose an answer."
}

  • plugin.toloka: Customizes the task layout.

    Show code
    {
  "type": "plugin.toloka",
  "layout": {
    "kind": "scroll",
    "taskWidth": 800
  }
}

  • plugin.hotkeys: Keyboard shortcuts.

    Show code
    {
  "1": {
    "type": "action.set",
    "data": {
      "type": "data.output",
      "path": "result"
    },
    "payload": "audio_1"
  },
  "2": {
    "type": "action.set",
    "data": {
      "type": "data.output",
      "path": "result"
    },
    "payload": "audio_2"
  },
  "3": {
    "type": "action.set",
    "data": {
      "type": "data.output",
      "path": "result"
    },
    "payload": "error"
  },
  "type": "plugin.hotkeys"
}

Note

You can add media files (audio files, videos, images) from your own server, Yandex Disk, or a cloud storage like Yandex Cloud, Google Cloud, or Amazon AWS.

What else can be configured

  • To check whether a Toloker listened to the whole audio, replace the condition.played component with condition.played-fully.

    Show code
    {
  "type": "condition.played-fully",
  "hint": "Listen to the audio recording"
}

  • To put a short audio track on repeat, change the properties of the view.audio component by adding loop: true.

    Show code
    {
  "type": "view.audio",
  "url": {
    "type": "data.input",
    "path": "url_1"
  },
  "label": "Audio 1",
  "loop": true,
  "validation": {
    "type": "condition.played",
    "hint": "Listen to the audio recording"
  }
}

  • Add shortcuts for playing and pausing audio tracks using the plugin.hotkeys plugin.

    Show code
    {
  "q": {
    "type": "action.play-pause",
    "view": {
      "$ref": "view.items.0.items.0"
    }
  },
  "w": {
    "type": "action.play-pause",
    "view": {
      "$ref": "view.items.0.items.1"
    }
  },
  "type": "plugin.hotkeys"
}

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

Add a response field

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

Show code
{
  "type": "field.textarea",
  "label": "Please explain why you chose it.",
  "data": {
    "type": "data.output",
    "path": "text"
  },
  "validation": {
    "type": "condition.required",
    "hint": "Enter text."
  }
}

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.

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.

Show code
{
  "type": "view.text",
  "content": "A joyful, inspiring melody.",
  "label": "Overview"
}

Add a layout

To enhance Toloker's experience, you can 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.

Show code
{
  "type": "view.alert",
  "theme": "info",
  "content": {
    "type": "view.text",
    "content": "A joyful, inspiring melody."
  }
},
{
  "type": "view.alert",
  "theme": "warning",
  "content": {
    "type": "field.button-radio-group",
    "label": "Which audio recording best fits the description?",
    "options": [],
    "validation": {
      "type": "condition.required",
      "hint": "Choose an answer."
    },
    "data": {
      "type": "data.output",
      "path": "result"
    }
  }
}

In this article: