How to use the Podlove client on a vanilla Jekyll page?

Following the Podlove (JavaScript podcast player) docu on https://docs.podlove.org/podlove-web-player/installation.html I try to use the Podlove player on a fresh Jekyll page:

jekyll new my-awesome-site
cd my-awesome-site
mkdir -p assets/podcasts
cp /tmp/audio-file.mp3 assets/podcasts/audio-file.mp3
rm index.md

I create this index.html file:

---
layout: home
---

<h1>Podlove Test</h1>

<script src="https://cdn.podlove.org/web-player/embed.js"></script>

<script>
  podlovePlayer('#example', '/assets/podcasts/audio-file.mp3');
</script>

Fire up Jekyll with bundle exec jekyll serve and browse the URL http://localhost:4000

The result: Screenshot of the browser

The JavaScript console shows this error-message: enter image description here

I follow the documentation but something is missing.

What do I have to do to get a player like displayed on https://podlove.org/podlove-web-player/ ?

enter image description here

Answer

The vanilla embedding for the Webplayer is documented here: https://docs.podlove.org/podlove-web-player/embedding.html

In your current implementation the dom reference is not included in the html. Also the player only accepts a JSON configuration, currently you are passing in a plain audio file reference.

<div id="example"></div>

<script src="embed.js"></script>
<script>
  podlovePlayer('#example', './fixtures/example.json');
</script>