A collection of digital instruments and collaborative music-making tools for the web.
This resource was developed in collaboration with National accessArts Centre as part of their Digital Now project (accessartsmusic.ca), through online collaboration and a series of workshops (2021-2023).
There are three main components to this repository:
- a front-facing gallery of instruments and tools
- a GitHub repo (this one) containing the code for the instruments and links for the relative libraries/modules
- a wiki containing notes on the development process and links to relevant resources
Depending on your needs, you may wish to start with the gallery, or with the wiki.
The gallery is a suitable entry point if you are interested in the instruments themselves. The wiki is a good place to start if you are primarily interested in the code and/or the development process (for example, if you have found this through a related research project).
Through our experience in mixed in-person/long-distance workshops, we found QR codes to be the best way to share links to the instruments.
We have included QR codes for each instrument in the gallery which can also be downloaded and printed. A demonstration of how these can be generated automatically is available on the custom instrument page.
On the gallery page, the user can switch between the QR Codes and icons/thumbnails using a drop-down menu at the top of the page.
Many of the instruments included started life during workshops with National accessArts Centre and Blurring the Boundaries Arts, using web socket connections to allow multiple users to collaborate in real time. For the time being, we have removed the web socket connections and replaced them with a single user interface.
Each instrument represents a template for use by artists at the NaAC and beyond.
We have included embeddable versions of the instruments to be used within other websites (e.g. the NaAC website, Wordpress), and a gallery page to showcase the individual instruments.
We've used pug templates to generate the HTML, and a combination of vanilla JS and jQuery for the front-end functionality. Files should be compiled with webpack and/or our custom compile script.
The JavaScript portion relies heavily on libraries developed by Charles Matthews during the project and during our CAMIN research. For an overview, go to https://www.npmjs.com/~matthewscharles.
We had initially used P5.js for the visual elements, but have since moved to manipulating SVGs as this was more flexible for our current working methods.
Please see the wiki for more information along these lines.
- Home
- Gallery
- Note player (with custom overlays, will feature artwork by NaAC artists)
- Chord player
- Faders
- Instrument customisation page
- Chord sequencer (with MIDI export) -- uses a temporary interface
- Drum machine (with MIDI export)
- Mixer / crossfader for sound files
- Sound painting
- Interactive music video (based on YouTube clip)
In addition to screen-based instruments, we are also using custom boards (mostly Arduino-based) to facilitate physical interaction and alternative outputs including DMX. These are not currently included in this repository, but we are happy to share details on request.
Future pages should include a random ID so that users can invite others to join.
Please note: since this is a project-specific repo with content generated by artists from BtB Arts and the NaAC, we have chosen not to include an open source license at this stage.
Instead, as much as possible, we have developed the back-end code as a set of open-source libraries/modules, available in some shape or form on NPM.
This is still a work in progress. At present we are using the repository for testing and communicating with our collaborators. We recognise that instruments may have limited functionality or accessibility issues during testing, and may fail automated accessibility checkers in part due to our custom touch screen interfaces. Our preference is to work directly with testers with lived experience!
If you encounter any barriers while using any of the pages, please let us know and we will do our best to fix them. If possible, please use the issues page.
- To increase font size, please use your browser's zoom function.
- We are looking into a high contrast option for the site.
Some icons have been used from Noun Project as indicated by the noun prefix in the relevant filenames.
We have incorporated these through a paid license, but they may also be licensed through the original artists under a Creative Commons license.
Please check the Noun Project site for details.
Some sound files within the instrument demos have been used from Freesound, as indicated by the freesound prefix in the relevant filenames.
Relevant attributions and licenses will be uploaded alongside the files.
- Guitar samples by Kyster, provided with the Creative Commons Attribution 3.0 license. The sounds have been edited for timing.
Example guitar chords used in the chord sequencer demo are taken from chords-db (guitar.json).
We are grateful to acknowledge the support of Canada Council for the Arts / Conseil des arts du Canada in the dvelopment of this project.
Special thanks to Joanne Cox whose project Define Your Journey formed the starting point for some of the instruments presented here.
This project draws upon some code libraries developed during sessions for CAMIN (Canadian Accessible Musical Instruments Network), with thanks to our screen reader and music technology consultants Jason Dasent (Voiceover) and Joël Dazé (JAWS).
The chord player builds on ideas developed by John Kelly for the Kellycaster.
We are also grateful to projects that have started development in parallel to this one, including Joel Dazé's Pitch-Colour Assembly, and Elinor Rowlands' Biodivergent Sites and Sounds. As open source endeavours, we have been able to share benefits across projects, and we look forward to continuing this process.