​
Overview

The playlists experience can be elevated and personalized by allowing your audience to create their own playlists from a collection of articles on your website.

This can be achieved by using our Player JavaScript SDK.

This guide requires you to be comfortable with programming in JavaScript.

​
Demo

Here is an interactive demo of a user-generated dynamic playlist that begins with a default set of articles which is totally optional.

You can add or remove articles from this playlist — simulating the user action of bookmarking — and it will be reflected live.

Changes to this demo playlist are stored in your browser for future visits. For real applications, user data should be saved in a database.

You can use your BeyondWords project ID to load your articles.

​
Create a dynamic playlist

The BeyondWords player is quite flexible allowing you to dynamically load multiple articles and create a playlist from them.

The only required fields are the BeyondWords project ID and a list of article indentifiers which could be any of contentId, sourceId, sourceUrl or even another playlist’s playlistId.

To create a dynamic playlist:

1

Create a project

Create a project in BeyondWords. Generate some audio articles using the Editor or any of the Integrations.

2

Set up the player

Install the player script or the npm package on your website.

3

Implement logic to save user data

This logic resides on your backend. You will need to store the user saved identifiers of the articles and their type so they can later be retrieved.

4

Initialize the player on your website

On the frontend, the player accepts a playlist param as an array of objects which should include one type of identifier each:

import BeyondWords from '@beyondwords/player';

new BeyondWords.Player({
  target: '#beyondwords-player',
  projectID: <ID>, // required
  playlist: [
    {
      // use only one of the following
      sourceId: "<SOURCE_ID>",
      contentId: "<CONTENT_ID>",
      sourceUrl: "<SOURCE_URL>",
      playlistId: <PLAYLIST_ID>,
    },
    // ... more items
  ],
});

It then fetches the requested content from your BeyondWords project and loads them as a playlist.

Various other settings are also fetched from your project’s player settings but they can be overriden through the settings object passed to the player.

You can load articles and playlist only from one project at a time.