2020.07.30/modules/archive | roadmap


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:

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




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:

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)


folder structure:

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

| 1_originals

markdown file

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

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



inverting images (pd screenshots)

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


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



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.


a collection of file managment bash scripts, meant to be run in a folder of raw files. requires ffmpeg.
renames *.wav to file creation timestamp and compresses to mp3, returns list of mp3 files
renames *.mov to file creation timestamp and compresses to mp4, returns list of mp4 files
renames *.jpg to file created timestamp, compresses and resizes jpg images for web, returns list of jpg files

toggle waveform
zoom: 0:00 / 0:00