Custom Visualizers

On macOS Yosemite and later, RetroPlayer allows the user to create custom visualizers using HTML, CSS and JavaScript. Custom visualizers will be appear in the Visualizers submenu in the View menu. The included PowerPlay and Wave visualizers are built using this technology. Their implementation can be inspected by performing Show Package Contents on RetroPlayer in Finder and then navigate to Contents/Resources/Visualizers.

Creating a custom visualizer

A custom visualizer is created by creating a folder in Music/RetroPlayer/Visualizers with a file called visualizer.html. The name of the folder will be used as the name of the visualizer and will be visible in Visualizers submenu. The folder may also contain additional resources like CSS and JavaScript files that are loaded by visualizer.html.

RetroPlayer provides the RetroPlayer API that can be used from JavaScript to both control RetroPlayer and access information.

Options

All custom visualizers get the standard options for showing a song information overlay. It is also possible to provide an options.json file for adding custom options to the Visualizer Options panel.

The Visualizer Options panel will show the options for the visualizer in window that currently is the main window.