Frontend API

This page contains documentation on the functions included in the CiderFrontAPI.

Renderer Helpers
  • CiderFrontAPI.*

  • AddMenuEntry(entry: CiderFrontAPI.Objects.MenuEntry) - Add an entry to the Cider menu

  • StyleSheets

    • Add(href: string) - Load a .less stylesheet from a URL

Registering a Vue component as a page

Registering a Vue component is done by adding plugin. to the front of the component name. Pages can then be loaded with app.appRoute("plugin/<component name without plugin.>")

Accessing static resources from the renderer

Additional resources in the plugins such as images and other files can be accessed with methods like fetch() from ./plugins/:packageName/:file this resolves to http://localhost:{port}/plugins/:packageName/:file

:packageName refers to the name property in package.json for the plugin.

Importing Custom Stylesheets



:packageName refers to the name property in package.json for the plugin.


Note: CiderAudio requires Advanced Audio Functionality to be enabled in the app settings.

Cider features a custom audio stack, available in the renderer.

  • CiderAudio.context - Primary AudioContext

  • CiderAudio.source - Audio Source

CiderAudio contains the following nodes:

  • CiderAudio.audioNodes.gainNode - Main gain node

  • CiderAudio.audioNodes.spatialNode - Used by audio spatialization

  • CiderAudio.audioNodes.audioBands - Used by EQ

  • CiderAudio.audioNodes.vibrantbassNode - Used to deliver vibrant bass functionality

  • CiderAudio.audioNodes.llpw - Used by Cider Adrenaline Processor (CAP)

  • CiderAudio.audioNodes.analogWarmth - Used by Analog Warmth

audio.js explained

CiderAudio initializes with CiderAudio.hierarchical_loading() Inside the loading process, all audioNodes are cleared and re-initialized and chained based on what the user has enabled. The designed hierarchy for loading audio functions is as follows:

  • h1 item - AudioBand (final output)

  • h2 item 1 - AudioBands vibrantbass_h2_1() (vibrant bass node)

  • h2 item 2 - llpw_h2_2() (CiderAudio.audioNodes.llpw)

  • h2 item 3 - analogWarmth_h2_3() (CiderAudio.audioNodes.analogWarmth)

  • Spatial Node is always the last node in the chain

Last updated