Side-by-side audio comparison

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"
    }
  }
}