The XR Rhythms Player is a browser-based player for XR Rhythms tunes. It is based on the Rhythms of Resistance player. It is written in TypeScript and relies heavily on beatbox.js, Vue.js and Bootstrap. The core features are:

• Read and play the notes of all XR Rhythms tunes and breaks
• Edit the notes, even while they are playing
• Compose your own tunes and breaks and share them as a link or a file. The notes are stored in the hash part of the link, nothing is stored on the server.
• Compose songs (sequences of tunes and breaks in different combinations)
• Export tunes, breaks and songs as MP3 or WAV
• Smartphone-friendly UI
• Can be used offline. Everything is packed in a single HTML file that is cached in the browser and can easily be downloaded for offline use.
• License: AGPL-3

More information can be found in the documentation.

The technologies used are:

• TypeScript and SASS for cleaner code
• Vue.js, Bootstrap 4 and Font Awesome for the UI
• howler.js to play audio in the browser
• wav-encoder, Aurora.js, audiolib.js and libmp3lame.js for MP3/WAV export
• pako to compress shared links
• Babel, webpack and gulp.js for building

Technical notes

• The current state (modifications to tunes/breaks and own compositions) is stored in the local storage of the browser. The bbState item contains the current state, historical states are stored as bbState-<timestamp>.
• A service worker stores a copy of the index.html file in the application cache. When opening the player, it is loaded from the cache if it is available there (to speed up loading and to make offline access possible). Only after the player is loaded, the service worker downloads the most recent index.html from the server (if the connection is possible) and updates the cache. Once downloaded, if the file has changed, a notification is shown in the player, and the page has to be reloaded in order to show the updated version.

Build and host it yourself

Customise it

The tunes are configured in assets/tunes, along with tune descriptions. The format is very similar to the format that can be generated in .rhythm files downloaded from the player.

All the parameters (such as the instruments, samples, time measurements) are configured in src/config.ts.

The samples are available as MP3 files in assets/audio.

More details can be found in the documentation.

Build it

Once you have made your modifications, you can build the player to get a HTML file that you can use in your browser:

1. Make sure you have an up-to-date version of Node.js installed.
2. In a terminal, navigate to the main code directory of the player and run npm install to install the dependencies.
3. Run npm run build to build the project.
4. The file build/index.html is a self-sufficient build of the player that can be opened in the browser

While you are playing around with some changes and don't want to rebuild the whole project each time you made a small change, after step 2 you can run npm run dev-server instead. This will start a webserver on http://localhost:8080/ that will serve the built player. When you make any changes to a file, it detects that and rebuild just that file. Simply reload the page to see the updated player.

Host it

Information how to host XR Rhythms Player can be found in the documentation.