Using Custom JavaScript

Custom JavaScript for Public Pages

AzuraCast provides you with the possibility to add custom JS via the Custom Branding page at /admin/branding.

There you can add your own JavaScripts to the public pages with the editor for Custom JS for Public Pages.

You can attach to events of the public player like this:

$(document).on('now-playing', function(np_new) {
    // custom code with np_new
});

Example: Video Playback for Public Page

You can use Custom JS for Public Pages to add a video element to the page and style via the Custom CSS for Public Pages using our example below.

Custom CSS for Public Pages

[data-theme] body.page-minimal .background-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

Custom JS for Public Pages

let videoBackgroundElement = document.createElement('video');
videoBackgroundElement.autoplay = true;
videoBackgroundElement.loop = true;
videoBackgroundElement.muted = true;
videoBackgroundElement.poster = 'Enter.URL.Here';
videoBackgroundElement.className = 'background-video';

let videoBackgroundSource = document.createElement('source');
videoBackgroundSource.src = 'Enter.URL.Here';
videoBackgroundSource.type = 'video/mp4';

videoBackgroundElement.appendChild(videoBackgroundSource);

document.body.append(videoBackgroundElement);