Server Browser Precision Select Ops Standard Ops Annotate: OTF Annotate: ML Docs α wιρ Σ ♥


Remote Audio Annotator

Provide the category ids, one per line, that you would like quick access to when adding new instances. This is convenient when the total number of categories is large, but the current annotation task is for a small subset of categories.
Should the category ids be converted to integers, or left as strings, when matching with the category ids found in categories.json?


This is a tool to annotate images with boxes and category labels. The utility of this tool is that you don't need to run a server, you can create the annotations on your local machine. Once you have finished annotating the images, you can download the annotations and use them to train or evaluate a machine learning system.


  1. This tool requires the Google Chrome Browser.
  2. Image files should be jpegs or pngs.

Quick Start with Example Data

  1. Annotate a bird photo and a spectrogram image by clicking the Browse button above and choosing the annotation_task folder 📁, found in the same directory as this index.html file.
    • Note, you should select the annotation_task folder 📁, not an individual file.

Instructions for Customizing

  1. Create a folder in the same directory as the index.html file, call it annotation_task.
    • index.html is this file, the one you are currently reading.
    • The name annotation_task is not required, call the directory whatever you'd like. It just needs to be in the same directory as index.html.
  2. Inside the annotation_task folder, create a JSON file called categories.json
    • This file should contain the list of categories you would like to annotate, having the following format:
                                                      "id" : 1,
                                                      "name" : "Bird",
                                                      "supercategory" : "Animal"
                                                      "id" : 2,
                                                      "name" : "Man",
                                                      "supercategory" : "Person"
                                                      "id" : 3,
                                                      "name" : "Bicycle",
                                                      "supercategory" : "Machine"
  3. Add images to the annotation_task folder in one of two ways:
    1. Simply inlcude jpeg or png image files. The image name (without the file extension) will be used as the image id. You can place these in their own directory (e.g. annotation_task/images)
    2. Create a JSON file called images.json, containing a list of images to annotate, having the following format:
                                                      "id" : "2044008b9b424bf98d1635251a0802c8",
                                                      "url" : ""
    3. You cannot have both image files and a images.json. It must be one or the other.
  4. OPTIONAL: If you have an existing annotation file for the images you will annotate, then you can include it in the annotation_task folder. It must be named annotations.json.
  5. OPTIONAL: Configure the tool using the options found at the top of the page.
  6. Start annotating the images by clicking the Browse button above and choosing the annotation_task folder 📁.
    • Note, you should select the annotation_task folder 📁, not an individual file.
    • The browser will ask your permission to "upload" the files. Click the Upload button.
    • If the images don't render, then make sure that the annotation_task folder is in the same directory as index.html.
  7. Once you have finished annotating, you can scroll to the bottom of the page and press the Export Annotations button to download an annotations.json file.
    • You can copy and paste the annotations.json file from your downloads folder to the annotation_task folder in order to review or edit your annotations at a later time.

Tips and Tricks

  • After drawing one box on an image, you can right click to duplicate that box at the current cursor location. This is convenient when annotating several instances of the same category.
Basic Instructions (Detailed Protocol Here)
  • Annotate 5-10 vocalizations of the target species per audio file. When possible, annotate diverse vocalizations (song variation, calls, overlaps with other acoustic events, etc.).
  • Annotate around each target. For each annotation of the target species, also annotate all other natural sounds visible in the editor when the target species vocalization is centered. Use the arrow keys (or Focus button) to center the target box at the dark red line in the middle of the spectrogram window. Then annotate all other vocalizations in the window.
  • Unknown birds - Use “Unknown Bird” if you are not sure of the identification, but try to identify the bird if you can! A labeled box is more valuable than “unknown.”
  • Mammal and amphibians - Also annotate mammals and amphibians when they are in the 5 second window of a target species annotation. Use “Unknown Animal” if you are not sure of the species, or if the species is not an option when you search.
  • Separate vocals with >1s of spacing. If there is at least one second of space between vocalizations, annotate them separately. The faint vertical lines are one second apart.
  • Frequency and time are both important, make the box tight to the vocalization (include harmonics).
  • Background Boxes - When possible, annotate a "Background No Bird" box that is at least one second long and doesn't contain any animal vocalizations. These boxes allow us to learn how to separate ambient background noise and animal vocalizations.
  • Annotations are saved when you click Next or Previous or use the Go To File option. You can close the window or reload if you want to revert any changes you made