Setting up the Web Player

Podlove Web Player
1

Hello!

I’m trying to set up the web player, as described here:

My HTML is as simple as it could be:


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

<body>

<div id="podlove_player" style="width: 100%, height: 100%">
</div>

<script>
  podlovePlayer('#podlove_player', '/episoden/zukunft-gestalten', '/assets/config.json');
</script>


</body>

</html>

… but nothing loads.

The config.json file here

Doesn’t seem to have an opening curly brace. That might be a mistake?

However, also adding that brace doesn’t solve it.

version: 5

is not proper JSON, is it?

When I go and convert everything a la

"version": "5"

still I end up with a white page.

image

Any ideas are appreciated! Thank you!

2

I made a minimal online version of my problem:

https://www.aicracy.net/podcast.php
https://www.aicracy.net/podcast.xml
https://www.aicracy.net/config.json

Thank you for looking into this!

3

ReferenceError: podlovePlayer is not defined

You might need to wait for the site to be done loading before calling it. Because when I call it manually via the console, it’s available.

podlovePlayer(‘#podlove_player’, ‘podcast.xml’, ‘config.json’);

I don’t think you can pass an xml here. You can start with the example json object from here: Configuration | Podlove Documentation

4

Thank you!

The config.json from the

website isn’t valid JSON, apparently – also adding an opening curly brace in the very beginning (which is missing) doesn’t fix it?

Thanks! :slight_smile:
Fabian

5

Yes since JSON doesn’t allows comments.

6

Thank you, I made some progress by now based on your comments!

However, the configuration (in which I defined yellow as the brand color) doesn’t seem to load properly:

https://www.aicracy.net/podcast/episoden/001-told-yuliya-sobol-alltag-mit-demenz

This is my current episode – but the config JSON doesn’t get loaded somehow?

Config JSON:
https://www.aicracy.net/podcast/episoden/001-told-yuliya-sobol-alltag-mit-demenz?config=1

This is my episode JSON which loads nicely:
https://www.aicracy.net/podcast/episoden/001-told-yuliya-sobol-alltag-mit-demenz?json=1

Thank you!
Fabian

7

Any ideas on this would be highly appreciated. Thank you!

8

Is it by intention that you use the WebPlayer 4 instead of 5?

9

No, I was actually aiming for WebPlayer 5 - I used this embed

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

from here

https://podlove.org/podlove-web-player

– is that linking to V4?

Thank you!
Fabian

10

Once I switch it to

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

I get a syntax error on the console:

image

11

There seems to be an issue with the your Markup, see if this one might work:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.podlove.org/web-player/5.x/embed.js"></script>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title> </title>
  </head>
  <body>
    <div id="podlove_player"></div>

    <script>
      podlovePlayer(
        "#podlove_player",
        "https://www.aicracy.net/podcast/episoden/001-told-yuliya-sobol-alltag-mit-demenz?json=1&r=197601",
        "https://www.aicracy.net/podcast/episoden/001-told-yuliya-sobol-alltag-mit-demenz?config=1&r=883855"
      );
    </script>
  </body>
</html>
12

Oh, wow! Much better:

https://www.aicracy.net/podcast/episoden/001-told-yuliya-sobol-alltag-mit-demenz

I’d say, slowly but surely we’re getting there :slight_smile:

image

Now it’s complaining about missing media files, but I have the feeling that I’m providing correctly structured configuration JSONs for both media and config. Is there any way to get a more explicit error message – or do you have an idea about what could be the root of the problem?

Thank you very much for your help!

13

The server sends the json files as text/html, thats why the player can’t parse it. It should be application/json.

Screenshot 2022-12-10 at 09.14.47

14

That did it! Thank you very much! :slight_smile: The config is loading now, and so are the media files.

Again, thank you very much for your help!

1 Like
15

One more question:

I set up our live podcast with the new player

https://podcast.uwid.de/

However, I have the feeling that when I select a new episode from the playlist, hiccups seem to occur: The chapters don’t load, audio (even though it plays!) doubles up sometimes – am I doing something wrong with the playlist?

All the best,
Fabian

16

Chapters needs to be part of the provided configuration. Either inline in the episode.json file or as a reference (see Configuration | Podlove Documentation). I tried to reproduce the doubled up audio but couldn’t. What browser do you use?

17

Thanks, it works fine now!

I went on to make a manual playlist underneath, which will let users get easier to other episodes with their shareable URLs.

Thank you for all your support!
Fabian