# Custom audio players

**URL:** https://discourse.libretime.org/t/custom-audio-players/140
**Category:** Dev Talk
**Created:** [June 27, 2018, 12:09am UTC](https://discourse.libretime.org/t/custom-audio-players/140 "2018-06-27T00:09:35Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![gusaus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/gusaus/32/42_2.png) [@gusaus](https://discourse.libretime.org/u/gusaus)
#### Post date: [June 27, 2018, 12:09am UTC](https://discourse.libretime.org/t/custom-audio-players/140/1 "2018-06-27T00:09:36Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![robbt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/robbt/32/15_2.png) [@robbt](https://discourse.libretime.org/u/robbt)
#### Post date: [June 27, 2018, 12:47pm UTC](https://discourse.libretime.org/t/custom-audio-players/140/2 "2018-06-27T12:47:40Z")

</div>

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

---

<div class="post-metadata">

### Author: ![gusaus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/gusaus/32/42_2.png) [@gusaus](https://discourse.libretime.org/u/gusaus)
#### Post date: [June 28, 2018, 12:12am UTC](https://discourse.libretime.org/t/custom-audio-players/140/3 "2018-06-28T00:12:33Z")

</div>

You think variations of this webcompents based player might work?

[https://www.webcomponents.org/element/LRNWebComponents/a11y-media-player](https://www.webcomponents.org/element/LRNWebComponents/a11y-media-player)  
[https://lrnwebcomponents.github.io/a11y-media-player/components/a11y-media-player/demo/](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](http://openproducer.org/#middle).

---

<div class="post-metadata">

### Author: ![robbt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/robbt/32/15_2.png) [@robbt](https://discourse.libretime.org/u/robbt)
#### Post date: [July 4, 2018, 12:59am UTC](https://discourse.libretime.org/t/custom-audio-players/140/4 "2018-07-04T00:59:12Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![gusaus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/gusaus/32/42_2.png) [@gusaus](https://discourse.libretime.org/u/gusaus)
#### Post date: [July 11, 2018, 9:23pm UTC](https://discourse.libretime.org/t/custom-audio-players/140/5 "2018-07-11T21:23:08Z")

</div>

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

---

<div class="post-metadata">

### Author: ![gusaus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/gusaus/32/42_2.png) [@gusaus](https://discourse.libretime.org/u/gusaus)
#### Post date: [August 27, 2019, 11:05pm UTC](https://discourse.libretime.org/t/custom-audio-players/140/6 "2019-08-27T23:05:16Z")

</div>

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

> [@Question about User API, uploading from WordPress, and Podcast function](https://discourse.libretime.org/t/question-about-user-api-uploading-from-wordpress-and-podcast-function/298/25):
>
> I found a single open source HTML5 sticky footer player out there with an MIT license. This could possibly be improved upon. All the other HTML5 players I’ve found so far are not open source and are for sale on various sites like Code Canyon or through their developers own websites. I’m thinking that this player could potentially be the basis for both WordPress and Drupal players, given that it’s open source on the MIT license and can be adapted for both with attribution if the license provid…

---

<div class="post-metadata">

### Author: ![djtonyz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/djtonyz/32/151_2.png) [@djtonyz](https://discourse.libretime.org/u/djtonyz)
#### Post date: [August 28, 2019, 12:09am UTC](https://discourse.libretime.org/t/custom-audio-players/140/7 "2019-08-28T00:09:08Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![robbt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/robbt/32/15_2.png) [@robbt](https://discourse.libretime.org/u/robbt)
#### Post date: [August 28, 2019, 12:59am UTC](https://discourse.libretime.org/t/custom-audio-players/140/8 "2019-08-28T00:59:53Z")

</div>

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](http://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.

---

<div class="post-metadata">

### Author: ![djtonyz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/djtonyz/32/151_2.png) [@djtonyz](https://discourse.libretime.org/u/djtonyz)
#### Post date: [August 28, 2019, 1:52am UTC](https://discourse.libretime.org/t/custom-audio-players/140/9 "2019-08-28T01:52:04Z")

</div>

Here’s one on Code Canyon for WordPress:

> **[Apollo - Sticky Full Width HTML5 Audio Player - WordPress Plugin](https://codecanyon.net/item/apollo-sticky-full-width-html5-audio-player-wordpress-plugin/20158996)**
>
> A fullwidth responsive HTML5 Audio Player WordPress plugin compatible with all major browsers and mobile devices. Artist image or vinyl record animation.
> It supports .mp3 and .ogg audio files
>  ...

---

<div class="post-metadata">

### Author: ![gusaus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/gusaus/32/42_2.png) [@gusaus](https://discourse.libretime.org/u/gusaus)
#### Post date: [August 28, 2019, 2:36am UTC](https://discourse.libretime.org/t/custom-audio-players/140/10 "2019-08-28T02:36:44Z")

</div>

> [@robbt](#):
>
> I don’t know of any Drupal module that does this, or wordpress configuration

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

- [Pushtape Player Examples](http://zirafa.github.io/pushtape-player.js/demo/index.html)

As [mentioned in this discussion](https://discourse.libretime.org/t/question-about-user-api-uploading-from-wordpress-and-podcast-function/298/20), possibly we could include the required functionality in the following?

- Radio Station (WordPress)
- Station (Drupal)

---

<div class="post-metadata">

### Author: ![djtonyz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/djtonyz/32/151_2.png) [@djtonyz](https://discourse.libretime.org/u/djtonyz)
#### Post date: [October 12, 2019, 2:08am UTC](https://discourse.libretime.org/t/custom-audio-players/140/11 "2019-10-12T02:08:19Z")

</div>

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](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](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.

---

<div class="post-metadata">

### Author: ![dascritch](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/dascritch/32/221_2.png) [@dascritch](https://discourse.libretime.org/u/dascritch)
#### Post date: [October 14, 2019, 9:59am UTC](https://discourse.libretime.org/t/custom-audio-players/140/13 "2019-10-14T09:59:16Z")

</div>

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

Licenced in GPL  
You can see it in action at [http://cpu.pm](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

---

<div class="post-metadata">

### Author: ![gusaus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/gusaus/32/42_2.png) [@gusaus](https://discourse.libretime.org/u/gusaus)
#### Post date: [October 14, 2019, 6:40pm UTC](https://discourse.libretime.org/t/custom-audio-players/140/14 "2019-10-14T18:40:06Z")

</div>

> [@dascritch](#):
>
> I’ve created a webcomponent audio player

Have you looked at the [webcomponent audio player referenced above?](https://discourse.libretime.org/t/custom-audio-players/140/3) 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?

---

<div class="post-metadata">

### Author: ![djtonyz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/djtonyz/32/151_2.png) [@djtonyz](https://discourse.libretime.org/u/djtonyz)
#### Post date: [October 15, 2019, 2:45am UTC](https://discourse.libretime.org/t/custom-audio-players/140/15 "2019-10-15T02:45:07Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![gusaus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/gusaus/32/42_2.png) [@gusaus](https://discourse.libretime.org/u/gusaus)
#### Post date: [October 15, 2019, 10:50pm UTC](https://discourse.libretime.org/t/custom-audio-players/140/16 "2019-10-15T22:50:58Z")

</div>

> [@djtonyz](#):
>
> I don’t see the value of trying to compete with the player.

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?

---

<div class="post-metadata">

### Author: ![gusaus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/gusaus/32/42_2.png) [@gusaus](https://discourse.libretime.org/u/gusaus)
#### Post date: [January 17, 2020, 9:43pm UTC](https://discourse.libretime.org/t/custom-audio-players/140/17 "2020-01-17T21:43:25Z")

</div>

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

> **[DIY Player Kit | Radio.co](https://radio.co/radio-university/diy-player-kit)**
>
> Embed a highly customisable radio player for your website out of the box or tailor it to suit your needs. There are lots of features at your disposal via our player API toolkit.

  

> **[Build Customised Players for Your Radio Station | Radio.co](https://radio.co/radio-university/listening-in-player-builder)**
>
> Get listeners to tune into your radio station with integrated streaming links and build your own unique custom players.

---

<div class="post-metadata">

### Author: ![gusaus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/gusaus/32/42_2.png) [@gusaus](https://discourse.libretime.org/u/gusaus)
#### Post date: [February 3, 2020, 9:11pm UTC](https://discourse.libretime.org/t/custom-audio-players/140/18 "2020-02-03T21:11:16Z")

</div>

> [@dascritch](#):
>
> You can see it in action at [http://cpu.pm](http://cpu.pm) . The sticky player may be seen when you scroll out the in-content player out of view.

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

> [@Custom audio players](https://discourse.libretime.org/t/custom-audio-players/140/17):
>
> [https://radio.co/](https://radio.co/) provides good inspiration for customizable radio players. Wonder if there’s good source material to replicate.

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

---

<div class="post-metadata">

### Author: ![dascritch](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/dascritch/32/221_2.png) [@dascritch](https://discourse.libretime.org/u/dascritch)
#### Post date: [February 4, 2020, 7:35am UTC](https://discourse.libretime.org/t/custom-audio-players/140/19 "2020-02-04T07:35:42Z")

</div>

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](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.

---

<div class="post-metadata">

### Author: ![gusaus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/gusaus/32/42_2.png) [@gusaus](https://discourse.libretime.org/u/gusaus)
#### Post date: [February 4, 2020, 7:08pm UTC](https://discourse.libretime.org/t/custom-audio-players/140/20 "2020-02-04T19:08:14Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![dascritch](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.libretime.org/dascritch/32/221_2.png) [@dascritch](https://discourse.libretime.org/u/dascritch)
#### Post date: [February 5, 2020, 1:13pm UTC](https://discourse.libretime.org/t/custom-audio-players/140/21 "2020-02-05T13:13:32Z")

</div>

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](mailto:libretime@discoursemail.com) a écrit :

[Next page](https://discourse.libretime.org/t/custom-audio-players/140.md?page=2)
