This website demonstrates how to build a neume sampler website and was created for the FCT-funded research project Echoes from the Past: Unveiling a Lost Soundscape with Digital Analysis (ECHOES) (2022.01957.PTDC) running from 03/2023-02/2026, run by co-PIs Elsa de Luca and Manuel Pedro Ferreira at the Centro de estudios de sociologia e estética musical (CESEM) in Lisbon, Portugal.

There are three steps to build the website which are outlined below. These steps are covered in more detail in the slides of a workshop held 19 & 20 July 2023 at Lost & Found: Traces of Early Music: An International Colloquium on Fragmentology in Cascais, Portugal.

(1) A manuscript source needs to be available on the web hosted on a IIIF server. For the demo neume sampler, an antiphonal from the parish at Santa Maria sopra Porta (Florence, Italy, c.1430) scanned at Stanford University Libraries was used. At the bottom of the image viewer on that page is a link to a IIIF manifest should be dragged-and-dropped onto the website iiif.humdrum.org. Annotation boxes can then be drawn around neumes or other interesting graphical items, and the annotations can be copied and placed into a spreadsheet.

(2) A demo Google Spreadsheet was created to store the annotations created on iiif.humdrum.org:

Annotations from iiif.humdrum.org are copied into the IIIF summary column, and along with the Image URL column link, the image of the neume (or interesting notational element) can be displayed automatically in the Image column. Data entry is done in the columns, while white columns are automatically generated with spreadsheet equations.

(3) Data from the spreadsheet can be converted to JSON data using a Google Apps Script (source code is given in the workshop slides along with the steps to install it). This will allow accessing the spreadsheet data from a JSON URL, which can be used to generate samples of neumes on the website.

(4) This sample website is hosted on Github Pages, with all files for the website stored in this Github repository, which can also be copied and adapted for your own neume sampler website. In addition, the website files can be downloaded and run on your local computer. JSON data from the Google Spreadsheet is loaded directly by the website, so if you make changes to the spreadsheet, reloading the website will display the updates immediately. Javascript is used to dynamically generate content for the website based on the JSON data of the neume data.

For faster loading (after data entry has finished), the JSON data can be downloaded to the website repository to be inserted directly into the Javascript code. This will avoid the time it takes to convert the spreadsheet into JSON data.