Custom audio players

Are there any alternatives to the audio widget that would provide a continuous player, fixed to the top or bottom of a page? If there’s no easy solution, are there any good examples of a pop-up player?

1 Like

Any audio player capable of playing a mp3 stream should work. There are lots of HTML5 players etc. jPlayer for instance should work.

You think variations of this webcompents based player might work?

https://www.webcomponents.org/element/LRNWebComponents/a11y-media-player
https://lrnwebcomponents.github.io/a11y-media-player/components/a11y-media-player/demo/

If so, I think building out a customizable Libretime/Airtime player could be included in the project scope for most of the OpenProducer projects.

I don’t know whether they would work or not. It depends upon whether they support mp3 streams. I think that mp3 streams are actually supported natively by many modern browsers.

If they could work, we should scope out a solution, set a goal on our OpenCollective, and sprint! https://twitter.com/gusaus/status/1017156624023052288

Referencing this comment as it’s related to this discussion -

Yes, but the problem today with audio players and web content management systems is navigation interrupts the stream. A player must be sticky to the footer or the header (or top bar) of a site to have any chance of wide adoption. There are far too many players out there already that work and people stick them in, but the experience is poor. So, if jPlayer is open source, it must be wrapped in a sticky footer or header option for both Drupal and WordPress. Sure, jPlayer is far and away leading the open source player movement, but until they adopt some type of sticky functionality, for me it’s not a solution to a long term problem. It’s not so much the player - that’s there. It’s how the player is implemented on a site that gives it more value.

If you’re brief message suggests just using jPlayer but building it into some useful sticky function, then I certainly agree and my comments are already in line with your point of view.

Yeah, that is the big challenge. We have a volunteer working on a solution, the challenge is whether even a sticky footer or header would work and stay consistent without wrapping the whole site in an AJAX framework and avoiding explicit pageloads. Kexp.org basically maintains their player through this but I don’t know of any Drupal module that does this, or wordpress configuration. It’d certainly be worth figuring out and it indeed is the next step for our site overhaul because maintaining the ability to browse and surf the page while keeping the single audio player is important.

Here’s one on Code Canyon for WordPress:

Could this plugin be the basis for what we’re looking for?

As mentioned in this discussion, possibly we could include the required functionality in the following?

  • Radio Station (WordPress)
  • Station (Drupal)

We’re looking for something like the fixed position player in your published example: http://zirafa.github.io/pushtape-player.js/demo/fixed-position.html

But, I did find this player, which is similar: https://github.com/lucasato/Sticky-Responsive-Audio-Player-Jquery

We’re working on building something in as a premium option - but want to make sure it works natively with LibreTime.

Let us know what solutions you’re thinking about and how we can collab on this.

I’ve created a webcomponent audio player for that : https://dascritch.github.io/cpu-audio/

Licenced in GPL
You can see it in action at http://cpu.pm . The sticky player may be seen when you scroll out the in-content player out of view.

We are working to adapt it for streamed content

1 Like

Have you looked at the webcomponent audio player referenced above? Curious if there’s something already built that could be extended.

@djtonyz Is the player you’re building going to be part of Radio Station plugin or could it be a stand alone project?

Think that ideal would be to collaborate and funnel resources into a player all projects could use. Extending one of the webcomponent players might be a good way to go?

Would be part of the plugin - an “add-on” that needs to be a plugin for WordPress. Regardless of whether it’s built inside or outside of Radio Station, it still has to be built for multiple CMS’s. There are already competing players in the market that are being used, so I don’t see the value of trying to compete with the player. And, our users want to take the LibreTime stream and port it into WordPress as well as utilize an API going in/out of LibreTime to add/publish show schedule, playlists, and DJs/Hosts or the reverse if it’s being done in LibreTime. We want someone to use Radio Station as the defacto WordPress plugin that brings LibreTime content into WordPress. So, if someone were to install it and set the API key, once they published their Shows in LibreTime, it would automatically publish the Show in Radio Station. Same for Playlists, but we’d have to figure out how and when to pass and publish playlist meta data based on the air date or whatever.

I think there’s agreement to collaborate around a player that could plug into multiple OSS projects and platforms. Could we build on any of the ones referenced in this discussion?

https://radio.co/ provides good inspiration for customizable radio players. Wonder if there’s good source material to replicate.


@dascritch The webcomponents player you developed is working here? https://cpu.dascritch.net/

Do you think it could be extended to incorporate some of the functionality referenced here?

We must see what is missing and can be asked.

Today, it can be personnalized (color, font, mode) https://dascritch.github.io/cpu-audio/LIVE#configurator_html , there is chapters and playlist features, an i10n minimalistic service, and mostly, trying to keep using standard HTML5 API features.

This looks very promising! So will this play LibreTime streams or is there still work to be done on that end? Possibly other folks building or needing this type of player could collaborate or contribute?

I was able to play inside an icecast stream.

But it will indefinitively keep in ram the downloaded stream…

May be problematic for smartphones ?

Le mar. 4 févr. 2020 à 20:18, Gus Austin via LibreTime libretime@discoursemail.com a écrit :