Playlists

Multiple playlists instead of just one

Overview

In FrissBee Audio Player it is possible to display multiple playlists to be able to select them.

If multiple playlists are passed to the player, then a select box is displayed with the passed playlists.

The structure of the playlists

This example shows how the structure of playlists is. The playlists is an object as datatype.

const playlist_1 = [
  {
    bandName: 'Band Name 1',
    songTitle: 'Song 1',
    songFile: './path-to-the-audio-file/song_1.mp3',
    songImage: './path-to-the-song-image/image_1.jpg',
  },
  {
    bandName: 'Band Name 2',
    songTitle: 'Song 2',
    songFile: './path-to-the-audio-file/song_2.mp3',
    songImage: './path-to-the-song-image/image_2.jpg',
  },
  // more audio datas...
];

const playlist_2 = [
  {
    bandName: 'Band Name 3',
    songTitle: 'Song 3',
    songFile: './path-to-the-audio-file/song_3.mp3',
    songImage: './path-to-the-song-image/image_3.jpg',
  },
  {
    bandName: 'Band Name 4',
    songTitle: 'Song 4',
    songFile: './path-to-the-audio-file/song_4.mp3',
    songImage: './path-to-the-song-image/image_4.jpg',
  },
  // more audio datas...
];

// make the "playlists" of some "playlist"
const myPlaylists = {
  'playlist 1': playlist_1,
  'playlist 2': playlist_2,
};

// give the "playlists" to the "player"
player.playlists = myPlaylists;

</script>

Important!
player.playlists (plural) NOT player.playlist.

There is nothing more to do. Either one playlist is passed to FrissBee Audio Player, or several playlists. FrissBee Audio Player automatically recognizes what it gets.

Playlist Names

The keys of the object const myPlaylists are the names of the respective playlist.

In action

Here is an example to try it out.

Next step

Presets - Design the Frissbee Audio Player.