...

annotator

annotator _ presents recordings with possibly defined start position, end position, highlighted/annotate regions, and regions marked for removal (which are skipped over), offering an easy and potentially collaborative in-browser possibility of annotatating and non-destructively presenting snippets in the context of their longer recordings. regions made can be exported to a reaper project.

how to use:

• click on recording to load soundfile, waveform, and start playing
• click and drag on waveform to create and select region
• type to annotate (some commands are interpreted):
• start
  • sets start position, fades in length of region
• end
  • sets end position, fades out length of region
• rm
  • skips region with fade-in/fade-out
  • currently set to 500 ms fade
  • [ ] add variable fade-in/fade-out times
    • eg. rm 500
  • [ ] add crossfade

note: adding/changing annotations is currently password-protected
- [ ] add guest user login

roadmap

• [ ] offline mode
• [ ] video player - annotate video
• [ ] add highlight/star/rating capability
• [ ] fix sometimes being overwritten bug
• [ ] add play/pause button next to waveform
• [ ] display file length
• [ ] mark recordings for removal (syntax: rename with 'rm' at start of )
• [ ] for slomo videos: option to change playback speed and set+save default playspeed. how to deal with the slow-motion recordings (120fps captured on iPhone 5s)? maybe the annotator shows the fps and exposes the option to change playback speed, with the last-selected setting sticking?
• how to display multitude of files connecting to single recording moment? small mixer between mic input and sound output with preset setting?

website

the website is built on pelican, a static generator that converts folders of markdown files to a static site. this allows the entire structure of the site to exist simply as text files with minimal markup. it is mostly used as is, aside for the addition of the annotator javascript app, the flow of which is as follows:

add session entry, all fields optional:

YYYY-MM-DD_test-entry.md

---
title: no title
date: YYYY-MM-DD
media: *.mp3, *.mp4, *.mp3
cover: *.jpg
---

some description

the list of media files specified in the yaml metadata output a list of divs:

<div class="sfplayer" id="soundfile-1.mp3"></div>
<div class="sfplayer" id="soundfile-2.mp3"></div>
<div class="sfplayer" id="soundfile-3.mp3"></div>
<script src="app.js"></script>

app.js on page load fills in each div with a sound file player interface. then it checks if there exist annotations for the soundfile, which are saved simply as .json files on a (currently separate) PHP server. if there are, a list of (labeled) regions and a title are filled in.

the title is content-editable, meaning it can be edited directly on the page, and any changes made are saved live back to the soundfile.json file. any changes to the annotations are similarly auto-saved to the server. the php scripts that handle this are placed in a password-protected folder on the server, making for a crude but functional at this scale authentication-required to make changes to the annotations.

archiving workflow (current status)

currently:

• recordings are made on phone (in _ app), videos, voice memos, olympus field recorder
• after session, files saved to 0_process folder on computer
• running process.sh script inside this folder:
  • prepends/renames files with creation timestamp
• converts/compresses each file to the relevant filetype for the web-friendly archive
  • mov: mp4
  • wav, aac: mp3
• moves the original files to 1_originals
• moves the compressed files to {static}/media folder
• generates a markdown session file

folder structure:

| 0_process
  | *.mov
  | *.wav
  | *.aac
  | process.sh

| 1_originals

markdown file

---
title: (insert title here)
date: YYYY-MM-DD
media: *.mp3, *.mp4, *.mp3
---

(insert description/related notes/ideas here, before forgetting)

ideally:

• save to dropbox/google drive folder
• server-side watcher auto converts and generates entry?

inverting images (pd screenshots)

tiny markup in markdown allows for easy client-side image-inverting

CSS:

img[src$='#pd-screenshot'] {
  filter: invert();
  mix-blend-mode: screen;
}

Markdown:

![alt]({static}/patches/demo.pd.png#pd-screenshot)

managing recordings

Generally, the archive/annotator displays a light, web-friendly version of the files for viewing, with the originals stored elsewhere, as the raw files quickly fill up storage space.

The files are timestamped with their creation date (YYYY-MM-DD_HHMMSS.*) to enable easy sorting and individuality and reinforce that they were created at that time and not edited afterwards.

scripts

a collection of file managment bash scripts, meant to be run in a folder of raw files. requires ffmpeg.

wav-to-mp3.sh
renames *.wav to file creation timestamp and compresses to mp3, returns list of mp3 files

mov-to-mp4.sh
renames *.mov to file creation timestamp and compresses to mp4, returns list of mp4 files

jpg-to-web.sh
renames *.jpg to file created timestamp, compresses and resizes jpg images for web, returns list of jpg files