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