# Setting up the Web Player

**URL:** <https://community.podlove.org/t/setting-up-the-web-player/3048>\
**Category:** Podlove Web Player\
**Created:** [November 15, 2022, 12:04am UTC](https://community.podlove.org/t/setting-up-the-web-player/3048 "2022-11-15T00:04:00Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![fh82](https://community.podlove.org/user_avatar/community.podlove.org/fh82/32/1906_2.png) [@fh82](https://community.podlove.org/u/fh82)\
**Post date:** [November 15, 2022, 12:04am UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/1 "2022-11-15T00:04:01Z")

</div>

Hello!

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

> **[Configuration | Podlove Documentation](https://docs.podlove.org/podlove-web-player/v5/configuration/)**
>
> Episode

My HTML is as simple as it could be:

```auto

<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

> **[Configuration | Podlove Documentation](https://docs.podlove.org/podlove-web-player/v5/configuration/)**
>
> Episode

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](https://community.podlove.org/uploads/podlove/original/2X/e/eb94d557d5509a116fdcab3d3d6ad76326c580ef.jpeg)

Any ideas are appreciated! Thank you!

---

<div class="post-metadata">

**Author:** ![fh82](https://community.podlove.org/user_avatar/community.podlove.org/fh82/32/1906_2.png) [@fh82](https://community.podlove.org/u/fh82)\
**Post date:** [November 15, 2022, 9:37pm UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/2 "2022-11-15T21:37:31Z")

</div>

I made a minimal online version of my problem:

[https://www.aicracy.net/podcast.php](https://www.aicracy.net/podcast.php)  
[https://www.aicracy.net/podcast.xml](https://www.aicracy.net/podcast.xml)  
[https://www.aicracy.net/config.json](https://www.aicracy.net/config.json)

Thank you for looking into this!

---

<div class="post-metadata">

**Author:** ![ericteubert](https://community.podlove.org/user_avatar/community.podlove.org/ericteubert/32/1568_2.png) [@ericteubert](https://community.podlove.org/u/ericteubert)\
**Post date:** [November 18, 2022, 8:39am UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/3 "2022-11-18T08:39:52Z")

</div>

> 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](https://docs.podlove.org/podlove-web-player/v5/configuration#episode)

---

<div class="post-metadata">

**Author:** ![fh82](https://community.podlove.org/user_avatar/community.podlove.org/fh82/32/1906_2.png) [@fh82](https://community.podlove.org/u/fh82)\
**Post date:** [November 18, 2022, 9:09am UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/4 "2022-11-18T09:09:14Z")

</div>

Thank you!

The config.json from the

> **[Configuration | Podlove Documentation](https://docs.podlove.org/podlove-web-player/v5/configuration/)**
>
> Episode

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

Thanks! 🙂  
Fabian

---

<div class="post-metadata">

**Author:** ![zusatzstoff](https://community.podlove.org/user_avatar/community.podlove.org/zusatzstoff/32/1026_2.png) [@zusatzstoff](https://community.podlove.org/u/zusatzstoff)\
**Post date:** [November 26, 2022, 1:58pm UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/5 "2022-11-26T13:58:16Z")

</div>

Yes since JSON doesn’t allows comments.

---

<div class="post-metadata">

**Author:** ![fh82](https://community.podlove.org/user_avatar/community.podlove.org/fh82/32/1906_2.png) [@fh82](https://community.podlove.org/u/fh82)\
**Post date:** [November 29, 2022, 6:35am UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/6 "2022-11-29T06:35:14Z")

</div>

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](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](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](https://www.aicracy.net/podcast/episoden/001-told-yuliya-sobol-alltag-mit-demenz?json=1)

Thank you!  
Fabian

---

<div class="post-metadata">

**Author:** ![fh82](https://community.podlove.org/user_avatar/community.podlove.org/fh82/32/1906_2.png) [@fh82](https://community.podlove.org/u/fh82)\
**Post date:** [December 5, 2022, 10:49am UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/7 "2022-12-05T10:49:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zusatzstoff](https://community.podlove.org/user_avatar/community.podlove.org/zusatzstoff/32/1026_2.png) [@zusatzstoff](https://community.podlove.org/u/zusatzstoff)\
**Post date:** [December 7, 2022, 8:28am UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/8 "2022-12-07T08:28:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fh82](https://community.podlove.org/user_avatar/community.podlove.org/fh82/32/1906_2.png) [@fh82](https://community.podlove.org/u/fh82)\
**Post date:** [December 7, 2022, 8:41am UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/9 "2022-12-07T08:41:13Z")

</div>

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](https://podlove.org/podlove-web-player)

– is that linking to V4?

Thank you!  
Fabian

---

<div class="post-metadata">

**Author:** ![fh82](https://community.podlove.org/user_avatar/community.podlove.org/fh82/32/1906_2.png) [@fh82](https://community.podlove.org/u/fh82)\
**Post date:** [December 7, 2022, 8:52am UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/10 "2022-12-07T08:52:30Z")

</div>

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](https://community.podlove.org/uploads/podlove/original/2X/d/d8c91afe2a0bb58d15d37630f50da3876eb95f34.png)

---

<div class="post-metadata">

**Author:** ![zusatzstoff](https://community.podlove.org/user_avatar/community.podlove.org/zusatzstoff/32/1026_2.png) [@zusatzstoff](https://community.podlove.org/u/zusatzstoff)\
**Post date:** [December 9, 2022, 4:50pm UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/11 "2022-12-09T16:50:57Z")

</div>

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

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![fh82](https://community.podlove.org/user_avatar/community.podlove.org/fh82/32/1906_2.png) [@fh82](https://community.podlove.org/u/fh82)\
**Post date:** [December 9, 2022, 8:57pm UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/12 "2022-12-09T20:57:33Z")

</div>

Oh, wow! Much better:

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

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

![image](https://community.podlove.org/uploads/podlove/original/2X/f/fc15a242b2ce7003f26d31dea15176ff06bb12e1.jpeg)

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!

---

<div class="post-metadata">

**Author:** ![zusatzstoff](https://community.podlove.org/user_avatar/community.podlove.org/zusatzstoff/32/1026_2.png) [@zusatzstoff](https://community.podlove.org/u/zusatzstoff)\
**Post date:** [December 10, 2022, 8:16am UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/13 "2022-12-10T08:16:11Z")

</div>

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](https://community.podlove.org/uploads/podlove/original/2X/5/54a646f048998da4c90f416083ca3bf7a4906c07.png)

---

<div class="post-metadata">

**Author:** ![fh82](https://community.podlove.org/user_avatar/community.podlove.org/fh82/32/1906_2.png) [@fh82](https://community.podlove.org/u/fh82)\
**Post date:** [December 10, 2022, 10:30pm UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/14 "2022-12-10T22:30:55Z")

</div>

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

Again, thank you very much for your help!

---

<div class="post-metadata">

**Author:** ![fh82](https://community.podlove.org/user_avatar/community.podlove.org/fh82/32/1906_2.png) [@fh82](https://community.podlove.org/u/fh82)\
**Post date:** [December 16, 2022, 7:57pm UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/15 "2022-12-16T19:57:53Z")

</div>

One more question:

I set up our live podcast with the new player

[https://podcast.uwid.de/](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

---

<div class="post-metadata">

**Author:** ![zusatzstoff](https://community.podlove.org/user_avatar/community.podlove.org/zusatzstoff/32/1026_2.png) [@zusatzstoff](https://community.podlove.org/u/zusatzstoff)\
**Post date:** [December 17, 2022, 8:41am UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/16 "2022-12-17T08:41:45Z")

</div>

Chapters needs to be part of the provided configuration. Either inline in the episode.json file or as a reference (see [Configuration | Podlove Documentation](https://docs.podlove.org/podlove-web-player/v5/configuration#chapters)). I tried to reproduce the doubled up audio but couldn’t. What browser do you use?

---

<div class="post-metadata">

**Author:** ![fh82](https://community.podlove.org/user_avatar/community.podlove.org/fh82/32/1906_2.png) [@fh82](https://community.podlove.org/u/fh82)\
**Post date:** [December 19, 2022, 1:15pm UTC](https://community.podlove.org/t/setting-up-the-web-player/3048/17 "2022-12-19T13:15:09Z")

</div>

Thanks, it works fine now!

> **[Zukunft gestalten: Linda Kraft: PAL – eine App zur Unterstützung der...](https://podcast.uwid.de/episoden/006-linda-kraft-pal)**

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