album_art_as_page_bg.md

As of the latest Rolling Release version, AzuraCast now emits a now-playing event on the public player page that you can listen to in order to update the HTML of the player page to reflect changes in the current playing song.

Among other things, you can use this to:

• Update the background image to reflect the album art (as in the example below),
• Show more details about the currently playing track,
• Add supplemental information for live Streamers/DJs,
• ...and more!

Technical Details

The latest version of the Rolling Release emits an event called now-playing at the HTML body level, with the event.detail property set to the full Now Playing API response. You can learn more about this response by visiting this page.

Example: Album Art Background

In this example, we'll set the background of the player page to update when the album art changes.

This example applies the effect to all stations on an AzuraCast installation, but you can tweak it, if you prefer, to isolate it to a single station or group of stations.

From the "Custom Branding" page in System Administration, input these values:

2023-07-29 Rolling Release or Newer

Custom CSS for Public Pages

[data-bs-theme] body.page-station-public-player {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

Custom JS for Public Pages

ready(() => {
  document.addEventListener('now-playing', (e) => {
    let np = e.detail.now_playing;
    let art = np.song.art;

    document.querySelector('body').style.backgroundImage = `url('${art}')`;
  });
});

0.18.5 or Older

Custom CSS for Public Pages

[data-theme] body.page-station-public-player {
  	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

Custom JS for Public Pages

$(document).on('now-playing', function (e) {
    let np = e.detail.now_playing;
    let art = np.song.art;

    $('body').css('backgroundImage', 'url("'+art+'")');
});

Updated for new styling and without jQuery should look something like this I think:

[data-bs-theme] body.page-station-public-player {
  	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

document.addEventListener('now-playing', (event) => {
    let np = e.detail.now_playing;
    let art = np.song.art;

    document.querySelector('body').style.backgroundImage = `url('${art}')`;
});

@Vaalyn: Small typo in the JS—event and e. Working version:

document.addEventListener('now-playing', (e) => {
    let np = e.detail.now_playing;
    let art = np.song.art;

    document.querySelector('body').style.backgroundImage = `url('${art}')`;
});