Audio player

What you learn

You're instantiating DIVA Player in your web front-end and relying on DIVA Back Office as the audio streaming source.

The goal of this article is to build the simplest front-end to an audio (podcast or songs) from the DIVA Back Office.

Before starting

• Ensure the DIVA Back Office instance you rely on is up and running.
• Ask your video engineers team the <videoId> and <settings URL>.
• Get read-and-write access to the VideoMetadata file.
• Ensure the VideoMetadata contains the media lists data.

Instantiation

Enrich the Basic instantiation code with

• playerMode added into the config parameter. To enable Audio player, playerMode's value has to be podcast or music. It will display the audio player with the podcast or music controls.
• videoId It's a string of an itemId to play the audio asset.

note

The Diva Player requires the videoId parameter during initialization, as it is the expected field for asset identification and loading. However, in this implementation, we refer to it generically as itemId.

Working sample code (.tsx)

Write the App() function to read the VideoMetadataMap as in the following example, and set the medialists array:
It is used by the Diva Player to load a new asset when switching content.

import {
  AssetState,
  BoAdapterWebComponentProps,
  DivaWebBoAdapter,
  VideoMetadata,
} from "@deltatre-vxp/diva-sdk/diva-web-bo-adapter";
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";
import { useState } from "react";

const itemId = "<itemId>";

const libs = {
  mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
  shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  googleIMA: false,
  googleDAI: false,
  googleCast: false,
  threeJs: false
};

const config = {
  videoId: itemId,
  libs: libs,
  playerMode: "podcast", // or "music"
};

function App() {
  const [isVideoLive, setIsVideoLive] = useState(false);
  const props: BoAdapterWebComponentProps = {
    settingsUrl: "<settings URL>",
    languageCode: "en-US",
    languageDictionary: "en-US",
    onDivaBoAdapterError: console.error,
    config: config,
    // Here integrator can transform the video metadata
    videoMetadataMap: async (vd: VideoMetadata) => {
      vd.mediaLists = [
        {
          defaultItemLayout: "horizontal",
          defaultItemType: "audio",
          defaulImageFormat: "square",
          items: [
            {
              itemId: "1",
              title: "Media list item 1",
            },
            {
              itemId: "2",
              title: "Media list item 2"
            }
          ],
          listId: "mediaListId",
          rowTitle: "Media list title",
        },
      ];
      return vd;
    },
  };

  return (
    <>
      <DivaWebBoAdapter {...props} />
    </>
  );
}

Dictionary

Ensure the dictionary (diva_medialist_playing*) file contains the relevant keys.

Analytics events

Find here the available analytics events for the Audio only.

Possible event sequences examples:

• fullplayer_open > miniplayer_enter_click > fullplayer_close > miniplayer_open
• fullplayer_enter_click > miniplayer_close > fullplayer_open