2020.07.30

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.

toggle waveform
options
zoom: 0:00 / 0:00