Developer Guide Javascript API Reference Developer Tools Release Notes

Audio Streaming with Timed Metadata

Extract timed metadata from a live audio stream and use it to display information such as title, artist, and poster image.

github
Title: (Nothing Playing)
Artist: (Nothing Playing)
* Note that an HLS stream must include timed metadata to achieve this behavior.
const file = 'assets/index.m3u8';

const defaults = {
  title: 'Unknown',
  artist: 'Unknown',
  imageUrl: 'assets/jwlogo.png'
}

function loadImage(src) {
  const imageDiv = document.getElementById('image');
  const imageLoader = document.createElement('img');
  imageLoader.addEventListener('load', () => imageDiv.src = imageLoader.src);
  imageLoader.src = src;
}

// Set up the player with an HLS stream that includes timed metadata
const playerInstance = jwplayer('player').setup({ file });

// When metadata is available, set the title, artist, and poster image for the
// elements we have on the page.
const titleDiv = document.getElementById('title');
const artistDiv = document.getElementById('artist');
playerInstance.on('meta', ({ metadata: { artist, title, url } = defaults }) => {
  titleDiv.textContent = title;
  artistDiv.textContent = artist;
  loadImage(url);
});

// Handle reset of player at end of content
playerInstance.on('error', function(e) {
  if (e.code === 230001) {
    playerInstance.load({ file });
  }
});
This player implementation is a Proof of Concept only provided to show the possibilities of the JW Player and Platform and should not be taken as an offer to create, edit or maintain custom integration or development.