Basics

Get the Latest Player Release

Having bower installed on your system, run

bower install podlove-web-player#3

to get the player package.

You will find a lot of examples in /bower_components/podlove-web-player/distexamples. Some of them are explained here in greater detail.

Integrate the web player into a website

Example directory structure

├── page.html
├── player.html
├── audio.m4a
└── coverimage.png

As you can see there are 2 HTML pages. The page.html contains your content and placeholders that the podlove-web-moderator will replace with iframes containing the player.html. You could include the player directly into your page but would miss out on later features like embedding your player on third party pages. As of now it is highly recommended to use this two page setup to circumvent certain problems like overriding CSS rules.

Create the page.html file

This file will be the host for the iframe of the embedded player (player.html).

Add an element where the player should appear.

<audio data-podlove-web-player-source="player.html">
  <source src="audio.m4a" type="audio/m4a">
</audio>

You can use any HTML element but the audio tag also serves as the non-js fallback.

Add the moderator script to the head of your html file

<script src="/bower_components/podlove-web-player/dist/js/moderator.min.js"></script>

Now, tell the moderator which elements to replace with embedded players.

<script>$('audio').podlovewebplayer();</script>

Create the player.html file

This file will show the player itself.

Choose a theme css-file and place it in the head of your document. Further information about ‘Themes’.

<link href="/bower_components/podlove-web-player/dist/css/pwp-dark-green.css" rel="stylesheet" media="screen" type="text/css" />

Create the audio element that will extended.

<audio>
  <source src="episode1.m4a" type="audio/m4a">
</audio>

Add following scripts at the bottom of your document:

<script src="/bower_components/podlove-web-player/dist/js/vendor/jquery.min.js"></script>
<script src="/bower_components/podlove-web-player/dist/js/podlove-web-player.js"></script>

Call the player script with the configuration object as its only parameter:

$('audio').podlovewebplayer({
  poster: 'coverimage.png',
  title: 'My Very First Episode',
  subtitle: 'This is the episode\'s subtitle one-liner',
  show: {
    title: 'My Very First Podcast',
    subtitle: 'Short one-liner',
    summary: 'Paragraphs of text about your show and its topic. *yada yada*'
  },
  chapters: [
    {
      start: '00:00:00.000',
      title: 'First chapter'
    },
    {
      start: '00:00:01.234',
      title: 'Last chapter'
    }
  ],
  downloads: [
    {
      assetTitle: 'My Very First Episode (mp4)',
      size: 12345,
      url: 'audio.m4a'
    }
  ]
});

Result

You can view the result for both the page and the player itself below.