HTML5 Player Print

  • 0

The Luna Player is a branded player for your website, with cover art, scrolling titles and a live visualizer. You style it in the panel and paste the code on your site once: whenever you save new settings, every copy on your site updates by itself.

Open it with the Player button on the stream card. The stream needs an MP3 or AAC output, because browsers can't play the others.

Style it

Change the options on the left; the Live preview updates as you go.

  • Layout & colours: Full size or Small bar, a Dark, Light or Transparent theme, highlight, background and text colours, and the embed size.
  • Cover & text: circle or square cover, the Station image shown until a song's cover art is found, font, and the text shown when you're off air. Leave Station image empty to use the logo from your Listings page.
  • Visualizer: Real (reacts to the music) or Animated, nine styles, opacity, blur and colours. Safari, iPhone and iPad always show the animated one.
  • Scrolling text: direction and speed for long names and titles.
  • Playback: which output to play, starting volume, autoplay (browsers often block it until the visitor clicks) and remembering each listener's volume.
  • Pop-up player: window size, button style and text.

Click Save. Reset to defaults puts every option back (nothing changes until you save).

Put it on your website

In Embed code, choose a tab and click Copy:

  • Website (iframe): paste into your site's HTML where the player should appear.
  • Direct link: the player on its own page, to share or use in your own iframe.
  • Pop-up button: a button that opens the player in its own small window, so the music keeps playing while visitors browse your site. Click Test pop-up to try it.
  • OBS: settings for an OBS browser source, for video streams and overlays. The Transparent theme works best.

If you have your own domain, pick it from the domain list first so the code uses it.

Lock this look into the code: normally the embed follows your saved settings, so you can restyle every copy from the panel. Tick this to freeze the current look into the code instead, for example to use a different style on a second website.

Was this answer helpful?

« Back