Introduction

Get Started - The easiest way to integrate the FrissBee Audio Player into your site.

Overview

The FrissBee Audio Player can be customized in its design and thus be adapted to your website.

Before we customize it in its design we want to integrate it into the website first.

Then we pass the playlist with all audio files to the player.

Let's start.

To integrate the FrissBee Audio Player with the default settings, only 3 simple steps are necessary.

1. Step: Download and implement the frissbee-audio-player.js folder
2. Step: Implement the frissbee-audio-player HTML tag
3. Step: Set the playlist to the selected frissbee-audio-player

1. Step

The FrissBee Audio Player consists of only one *.js file. The file can be downloaded here.

Note: It is better NOT to use “defer”.

2. Step

Paste the frissbee-audio-player HTML tag in the desired location on your page.

3. Step

For the 3rd step, three things need to be done in JavaScript:

a) a list of objects in an array containing the details of each audio file
b) select the frissbee-audio-player HTML element
c) give the playlist to the selected frissbee-audio-player HTML element with the propery playlist

Note: The playlist has a certain structure. This structure must be followed as specified.
For more information see here.

All the code

And here is the complete code at a glance.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1" name="viewport">
    <title>My Title</title>

    <!-- 1. Step -->
    <script src="./assets/js/frissbee-audio-player.js"></script>

  </head>
  <body>

    <!-- 2.Step -->
    <frissbee-audio-player></frissbee-audio-player>

  </body>

  <script>

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

    // b)
    const player = document.querySelector('frissbee-audio-player');

    // c)
    player.playlist = myPlaylist;

  </script>
</html>

Of course, the JavaScript code can also be implemented in a separate *.js file.

The result

With the above code you will get the following FrissBee Audio Player with its standard design.