Hey,
I just asked myself what would be the best approach to integrate the Podlove Web Player into a VueJS single page application. Do I need the web player as a whole, or is it enough to use the player components. I know there is a feature list regarding the functionality of the web player (https://github.com/podlove/podlove-ui/tree/development/apps/web-player) compared to the player components, but maybe you can help me.
What I need/don’t need:
- I don’t need a web player launching facility via plain JS (and attaching to a HTML element) as I am using VueJS. Instead it would be nice to just refer to a Vue component.
- I don’t need remote fetching of web player configuration as I could provide the configuration directly, because I get the configuration data with other data. So I am calling the server backend on my own already.
- Parsing of URL parameters would be nice to have, but I think I could provide that also, if necessary.
- What I still want to have: persistence of player time position and open tab
Would be glad if you could give me some hints for a VueJS integration.
1 Like
Hey,
I’m always excited to see integrations like this! Depending how deep you want to go into the rabbit hole there a different options available:
As you might already have noticed there are two different player applications in the repository:
Web Player
Player
In your case you should be good using the plain player. You need to include the files to your application in order to use it, I will change this in the near future so that you can directly import the components. If you have everything in place you can start creating the player dom.
Btw. Web player, player and utility packages are also available as dedicated npm packages.
I hope that helps as a first start. If you encounter any issues don’t hesitate to ask 
1 Like
I got excited when I saw this. I’ve wanted to have an app for my own podcast to distribute to listeners, and since I already use the Podlove WordPress plugin this seems like a good option.
Ultimately, what I want is for listeners to use the app to play podcast episodes. I want to be able to track how long each listener runs the episode each time. And I want to incorporate other non-player functionality that interacts with the listener such as offering signing up and clicking thru options to advertisers’ pages, show guests’ web pages, Amazon pages, etc.
My Vue knowledge is pretty limited, although I’ve been working on a project for my wife’s gardening business that I plan to convert to iOS and Android using Quasar. I’m getting there slowly but surely.
Would the Web Player work for my needs? It sounds like the easier way to go.
That is a hard question to answer. In general yes, the Player is a VueJS application (as the documentation page https://docs.podlove.org/podlove-web-player/ is). So as you can see it is possible to integrate the player. But I can’t promise anything working if it’s ported to iOS or Android since they might use different Audio APIs.