podigee / podigee-podcast-player Goto Github PK

The readme says I can customize the look of the player. Where can I find any documentation on how to do that?

Currently switching chaptermarks while playing disregards milliseconds and might switch marks too early or too late.

I'm using the Podigee player on my site, and it looks good, but when playing the first episode, the timestamps from the chaptermarks don't match the content they did when I played the file in VLC and in Audacity.

On top of that, when it reaches the end of the file it reaches the final timecode (03:26:34) before the file is actually at the end and stops counting seconds (because it's at 03:26:34/-00:00:00) but still plays the end of the file!

The file is Joint Stereo mp3, VBR level 6 (ended up at 89kbit/s) at 44.1khz.

A player embedded via

<script class="podigee-podcast-player" data-configuration="playerConfiguration" src="https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js">
</script>

Resolves itself to
https://cdn.podigee.com/podcast-player/podigee-podcast-player.html?id=3e73806b&iframeMode=script
which shows right now a spinner like icon forever.

Are there any issues with the cdn?

On iOS Safari and Android.

First the search bar looks correct:

If you enter a search term, the search bar jumps down one line and the layout is messed up:

The same on android:

Example page to reproduce the problem:
https://auphonic.com/media/share/tr/podigee-player-test.html

I am trying to debug why my Podigee player stopped working on my website http://historie.vih.dk/podcasts/2017-09-19-thomassen-erindringer/ (it used to work, but stopped for some reason), and I noticed that you have not made any releases / version, so basically I am just using the latest code. I would be very helpful if it was possible to reference a certain release in the code, so it is easier to debug where the problem is - whether it is my own code, how I use Podigee or Podigee itself.

Both the included themes links on the theming docs are broken (returns 404)

Have you considered adding the podlove subscribe button to the player, so a listeners can subscribe directly if he likes the podcast?

Hi,
I just installed npm, yarn, gulp in my machine. build has been done on the open source package using 'gulp build'. When i launch the output package nothing happens in the page, but only the loading animation appears. Please find the attached screenshot. Also I don't find any errors in the console. Not sure what basic procedure I miss here. Please guide me on this. Also, It would be great if you could provide a sample output package so that i can refer the output.

gulp_output (1).zip

Do you thing this idea is worth the time? https://github.com/funkenstrahlen/rss-to-podigee-json

Note: implementation not finished at all!

I use podigee on https://www.alleaktien.de/walt-disney-aktienanalyse-auf-dem-weg-zur-zweiten-netflix/ with a custom CSS and custom HTML file.

I have one more issue now, I'm getting a violation of the "same origin policy":

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://cdn.podigee.com' is therefore not allowed access.

Do you have an idea how we could go about this?

Regards,
Michael

Without

options: %{
  theme: "default"
}

in the config, there is following error:

Uncaught TypeError: Cannot read property 'theme' of undefined
    at t.t (podigee-podcast-player.html?id=2386ee0b&iframeMode=script:244)
    at t.t (podigee-podcast-player.html?id=2386ee0b&iframeMode=script:244)
    at t.themeConfig (podigee-podcast-player.html?id=2386ee0b&iframeMode=script:244)
    at t.themeConfig (podigee-podcast-player.html?id=2386ee0b&iframeMode=script:244)
    at t.context (podigee-podcast-player.html?id=2386ee0b&iframeMode=script:244)
    at t.context (podigee-podcast-player.html?id=2386ee0b&iframeMode=script:244)
    at t.render (podigee-podcast-player.html?id=2386ee0b&iframeMode=script:244)
    at t.render (podigee-podcast-player.html?id=2386ee0b&iframeMode=script:244)
    at Object.<anonymous> (podigee-podcast-player.html?id=2386ee0b&iframeMode=script:242)
    at c (podigee-podcast-player.html?id=2386ee0b&iframeMode=script:235)
```

If there is only one file format available for download the player should not display a separator line.

Integrating peaks.js has several smaller and one big disadvantage:

Small

• it's huge
• it does/can do much more than is needed in this context

Big

• when rendering many players on the same page it exhausts the number of possible AudioContext which leads to JS errors and the player not being loaded at all

I opened an issue at the waveform-data.js project to get some ideas: bbc/waveform-data.js#34

When the user clicks play while being offline the player just does nothing. It should show the reason why.

The Readme says to run gulp build in order to get the Production Assets. Instead it should say run gulp or a gulp build task should be added to the gulpfile.js.

Hi there,

I want to trigger events inside the player after it has been loaded. For example trigger it to play. Is there an API to interact with the player through the embed code?

Thanks,
Johannes

Hello - I have been using this player on my own web site for a while. At some point in the last four weeks or so, the player quit working. When I look in Chrome devtools I see this error

Uncaught TypeError: Cannot read property 'locale' of undefined
    at t.setConfigurations (podigee-podcast-player.html?id=d3862fc&iframeMode=script:242)

The animation starts but the player/file doesn't load. The mp3 and config json are hosted on a google storage bucket, CORS is enable and working, so no errors there. The player was working great for all of 2017. If there is a config issue I'd be interested in a bit of help.

When browsing through the back catalog of a podcast through the feed playlist it would be useful to also extract the following information from the feed:

• Chaptermarks (Podlove Simple Chapters)
• Additional audio formats (from alternate feeds)
• Transcript information (there is no official way currently to embed this into a feed)

I'm trying to implement this player as a Drupal module for audio file. I am also planning to contribute to the community :)

To pass the configuration to the player I am trying to use the following code

<script class="podigee-podcast-player" src="https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js" data-configuration="drupalSettings.podigee.playerConfiguration"></script>

But it fails because it tries to get

window['drupalSettings.podigee.playerConfiguration']

I researched a bit and I found this thread
https://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key

Apparently it can be done with Lodash so I opened the following pull request
#58

Is it possible to set an initial offset/progress for an episode. This would be very useful for resuming playback when it is known that the user has already listened to the first 15 minutes, or you manually want to start an episode at a specific point.

Secondly. Is it possible to hook up a callback function to various events like play/pause/finished etc.

The embedable player shows a red "!" if a file should be played, which is hosted on a different domain and CORS is disabled.
In Chrome DevTools, also no Javascript Error can be seen - this makes the problem quite difficult to debug (if one doesn't know that's a CORS issue).

It would be great if a meaningful error message could be displayed to the user (in the player), with an explanation that CORS should be enabled (see for example http://docs.videojs.com/docs/guides/tracks.html#subtitles-from-another-domain).

For example, try to play any file hosted by libsyn:
https://auphonic.com/media/share/tr/podigee-cors.html
Using the folloging player configuration:
playerConfiguration = { "options": { "theme": "default", }, "episode": { "media": { "mp3": "https://traffic.libsyn.com/dancarlin/cswdcd09.mp3", }, "title": "Podigee CORS Test", } }

Rendering Bugs on iOS Safari. This only happens in Safari on small screens. Do you know why?

PS: If you want you can checkout podperlen.de to test. However please do not spread the word yet. It is still not public and in development.

Ich setze den Podigee Player auf podperlen.de ein.

Allerdings stört es mich ein wenig, dass das Logo im Desktopbrowser so groß angezeigt wird:

Ist das so gedacht? Oder macht da mein CSS irgendwas kaputt?

Hi all, I'm trying to integrate your (excellent) player onto my Wordpress site. I have successfully embedded it with the following code:
<script> window.playerConfiguration = { "options": { "theme": "default" }, "extensions": { "SubscribeBar": {disabled: true}, "Playlist": {disabled: true} }, "podcast": { "title": "Podtrificus Totalus", "feed": "https://podtrificustotalus.com/feed/podcast/", }, "episode": { "media": { "mp3": "' . $atts['mp3'] . '" }, "coverUrl": "https://podtrificustotalus.com/wp-content/uploads/2017/06/101-The-Boy-Who-Lived-mp3-image.png", "title": "' . $atts['title'] . '", "url": "' . $atts['[page]'] . '" } } </script> <script class="podigee-podcast-player" src="http://podtrificustotalus.com/wp-content/themes/tm-beans-child-2018/podigee/javascripts/podigee-podcast-player.js" data-configuration="playerConfiguration"></script>
The MP3 link, title, and URL are all using Wordpress shortcode attributes so that I can configure the player easily on a per-post basis. I believe this is called an inline configuration, rather than passing it off to an external .json configuration file (sorry, I don't know JS well!).

The player appears and plays just fine on an individual post: https://podtrificustotalus.com/1-08-potions-master/

However, on the main index of my site, the last three posts appear in full, and thus three instances of the player appear. The files play correctly, but the Download button has trouble. You can see it live here: https://podtrificustotalus.com/

I've also created a gif that should display the problem.

Aside from my theming (minor CSS edits) and Wordpress shortcode, everything else is pretty much standard. I'm fully willing to believe this is a problem in my integration of the player, but some guidance would be appreciated. Thanks!

I am trying to use a cover image with my current episode, as well as with the playlist:

  "episode": {
    "url" : "http://omegataupodcast.net/275-technikfolgenabschatzung/", 
    "title" : "275 – Technikfolgenabschätzung", 
    "media" : { "mp3" :"http://traffic.libsyn.com/omegataupodcast/omegatau-275-technologiefolgenabschaetzung.mp3",  
    "coverUrl": "http://omegataupodcast.net/wp-content/themes/img/omegatau_600x600"  }
  }

However, it does not work, no image shows up.

• Do I have to enable an option for it to show?
• are the size requirements for the image?
• anything else I can do to help diagnose the problem?

Is there a know way to create the waveform without using Auphonic?

I've been building the project then pushing the created artifacts (everything inside build/) to S3.
When accessing /podigee-podcast-file.html and using the configuration query parameter (or for that matter using the script tag embed), the player renders and functions correctly.
However the icon fonts are not loading correctly. See screenshot:

Does this player no longer support multiple episodes?

I remember you used to be able to specify a list of episodes in the config like:

window.playerConfig = {
    "podcast": {
        "episodes": [
            ...
        ]
    }
}

But that doesn't seem to work anymore.

I would like to reopen #5 ;-)

It drove me nuts to see, that this works with your demo, but it 'didn't work for me'. So I dug into this and found out, that it works with the player hosted on github:
https://podigee.github.io/podigee-podcast-player/build/javascripts/podigee-podcast-player.js
but it doesn't work with the one mentioned in the docs:
https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js

Maybe it's still an older version there?
Merry Christmas from Vienna and congrats for your great player 🥇

Use Google Chrome, go to https://www.podigee.com/en/podcast-player/ (-> the player loads), use the back button of the browser, use the forward button of the browser (the player does not load)

Google Chrome, Version 60.0.3112.113 (Official Build) (64-bit), macOS Sierra

http://podigee.github.io/podigee-podcast-player/ works correctly, it seems to have an older build version.

I can see that my player durations are all correct in my podcast feed xml (they are in seconds in the field.

Other podcast players parse the duration fine, but it shows up as NaN - I ended up just commenting out the duration, but it would be nice to have a real fix.

I just tried to embed the player with the example provided in the readme using a local configuration. I added this playerConfiguration to the end of my page:

    <script>
        window.playerConfiguration = {
          "options": {
            "theme": "default",
            "sslProxy": "https://example.com/ssl-proxy/",
            "startPanel": "Playlist"
          },
          "extensions": {
            "EpisodeInfo": {},
            "Playlist": {
              "disabled": true
            }
          },
          "podcast": {
            "feed": "https://cdn.podigee.com/ppp/samples/feed.xml",
          },
          "episode": {
            "media": {
              "mp3": "https://cdn.podigee.com/ppp/samples/media.mp3"
            },
            "coverUrl": "https://cdn.podigee.com/ppp/samples/cover.jpg",
            "title": "FG009 Wirtschaftspolitischer Journalismus",
            "subtitle": "Wie Henrik Müller in Dortmund wirtschaftspolitischen Journalismus lehrt und erforscht. Und was guten Wirtschaftsjournalismus ausmacht.",
            "url": "http://forschergeist.de/podcast/fg009-wirtschaftspolitischer-journalismus/",
            "embedCode": "<script class=\"podigee-podcast-player\" src=\"https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js\" data-configuration=\"https://podigee.github.io/podigee-podcast-player/example/config.json\"><\/script>",
            "description": "Raus aus der prallen journalistischen Praxis, rein in die Gremien-Universität. Henrik Müller hat diesen ungewöhnlichen Schritt gewagt: 2013 übernahm der damalige stellvertretende Chefredakteur des "manager magazin" den Lehrstuhl für wirtschaftspolitischen Journalismus am Institut für Journalistik der Technischen Universität Dortmund. Dort baut er seitdem die neuen Bachelor- und Master-Studiengänge für wirtschaftspolitischen Journalismus auf. Wie er diesen Wechsel zwischen den  Welten erlebt hat, was er seinen Studierenden vermitteln will und woran er forscht, erzählt der immer noch sehr umtriebige Autor ("Wirtschaftsirrtümer: 50 Denkfehler, die uns Kopf und Kragen kosten") und Spiegel-Online-Kolumnist in dieser anregenden Episode. Dabei geht es darum, was Wirtschaftsjournalismus leisten soll und muss, was Studierende erst mühsam über Lobbyismus lernen müssen und was eigentlich "gute Geschichten" sind."
          }
        }
    </script>

This is how I embed the player:

<script class="podigee-podcast-player" src="https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js" data-configuration="playerConfiguration"></script>

I see this error in my log:

GET https://cdn.podigee.com/podcast-player/playerConfiguration 403 ()

Looks like the player does not even consider the local option any more?

Using Chrome, click any episode after playlist loads - playlist icon disappears

I added line 164 (check for existence of panel) to hack fix it, but you may know the root cause

master...efficienthacks:master#diff-86c7ceb9117db3ae3ef3f58bf3902fd0

A listener should be able to copy the embed code from the sharing extension.

The player iframe should resize when the window resizes.

Clammr shuts down its service on July 2 so the icon and share functionality in the podigee player should be removed.

Thank you for that (and your work in general of course)!

The Podigee Podcast Player offers limited amout of space for text. This leads to subtitles being cut off. This problem gets worse on small mobile devices.
I'd really like subtitles (and maybe even titles) to scroll from right to left (marquee effect).

I use the player with a WebVTT transcript.
If the screen gets smaller (e.g. width = 500px), one cannot see the whole transcript anymore, because the scrolling goes below the end of the player.
If one searches within the transcript, it is not possible to see lots of search results, because the scrolling position seems wrong.

(Tested on recent Chrome+Firefox on linux)

Example to reproduce the problem:

• https://auphonic.com/media/share/tr/podigee-player-test.html
• make the screen smaller (e.g. 500 px=)
• search for "Euro" (not all results are visible) or "Magie" (no result visible), etc.

Hi guys,

I am the guy who talked to Ben in Munich about using your player in Panoptikum: https://alpha.panoptikum.io/

I now embedded it, short feedback: Just works and awesome documentation.

Keep up the good work!

Currently, if you don't specify the URL of the episode to load at startup (but your playlist is valid), then the whole player doesn't load anything - user should be able to select (via config file) which episode to play first via title name.

See line 37 for my hack fix:
master...efficienthacks:master#diff-86c7ceb9117db3ae3ef3f58bf3902fd0

I want to use the player to play just one single audio file. How can I disable the playlist extension?

On mobile browsers (tested in iOS Safari and Android), the big play button always shows the loading animation instead of the play icon (see screenshot below).
However, if one clicks on the play button (which still shows the animation), the playback starts as it should. Afterwards it's possible to see the play/pause button.

On desktop browsers everything works as it should.

Tested with the following example:
https://auphonic.com/media/share/tr/podigee-cors.html
Player Configuration:
window.playerConfiguration = { "options": { "theme": "default" }, "episode": { "media": { "mp3": "https://traffic.libsyn.com/dancarlin/cswdcd09.mp3" }, "title": "Podigee CORS Test" } }

Screenshot:

Would be nice if one could show the number of downloads in the player.

I am adding a local theme using:
"options": { "theme": { "css": "<?php echo get_template_directory_uri()?>/css/podigee.css", "html": "<?php echo get_template_directory_uri()?>/podigee.html", } },
but the player doesn't load, and dev tools shows a call to https://podigee.github.io/podigee-podcast-player/build/themes/[object%20Object]/index.html that returns 404.
What am I doing wrong?

Listeners should be able to share an episode together with a timestamp to start playing.

In the long term integration of https://www.clammr.com/ would also be nice.

Cool player.
Can you add the following attributes to the buttons of your player, please.

aria-label="<button-name>"

<button class="play-button" aria-label="Play"></button>

<button class="download-button" title="Download episode" aria-label="Download episode"></button>

<button class="episode-info-button" title="Show more info" aria-label="Show more info"></button>

<button class="share-button" title="Share episode URL" aria-label="Share episode URL"></button>

Thanx