Can we have options to add custom buttons in audio player ?

[Anil-matcha]

Would love to have the ability to add small links/buttons to allow user to subscribe/share from the audio player itself using an overlay similar to other popular audio players on the market

[jessuni]

Yes this is a feature I intend to include in v2.3.0. Thanks for the advice!

[jessuni]

Yes this is a feature I intend to include in v2.3.0. Thanks for the advice!

@Anil-matcha On a second thought, you can build some features already with the current plugin system if you don't want to wait for the update – from the basics like links, buttons to something as big as the chapter feature. You can check how I did with the chapter plugin as an example and how to inject the plugin in the docs.

I haven't thought through whether to put the subscription feature as a plugin or part of the core though.

[Anil-matcha]

@jessuni Thanks for sharing the details. I am trying to add an overlay similar to other audio players to cover the player and ask the user to subscribe before playing. But the result I am getting is not proper as the overlay is coming bigger than audio player although it is supposed to fit into it. Here is the link to the audio player with overlay https://api.vadoo.tv/upload_test .

An ideal version would be this https://anchor.fm/fundraising-radio/embed/episodes/How-to-break-into-VC-and-how-Array-ventures-invests-in-solving-big-problems--By-Shruti-Gandhi-eqlc4e/a-a4mjore where if clicked on Share button the overlay perfectly covers the audio player.

Can you kindly help what could I be doing wrong in this case ? Many thanks in advance

[jessuni]

@Anil-matcha This is a pure CSS problem...Your modal's height is 150px because your iframe (its parent) has a height of 150px.

P.S For problems irrelevant to the player, you can ask for help in communities like StackOverflow. Posting it in the thread may confuse other users.

[Anil-matcha]

I have kept 100% width and height for the player and expected the modal to cover the player in exact since the player is having 100% width and height but still it is over-extending so was not sure what is happening internally with the player preventing this.

If you have some suggestion for it, it would be great to know for someone else trying to do same thing with this player as this is a commonly present feature in most online audio player.

[jessuni]

The bug happens with or without the player, that's why I said it's irrelevant to the library.

Your modal element is a sibling of the player container, there's no reason why it should inherit the player's width and height. It inherits your<iframe>'s width and height instead. Please read and understand how CSS position actually works MDN.

[Anil-matcha]

Ok, thanks for sharing the information. I am closing the issue

[cgpro]

Would it be possible to release the feature before 2.3.0? 😊 Would be very handy for customizing the styles.

[jessuni]

@cgpro May I know what kind of features you need the buttons for? Just out of curiosity.

[cgpro]

@jessuni currently I'm building a podcast player as a stencil web component. And the designer want other button styles and a complete different layout. I tried amplitude.js and howler.js which is very customizable (e.g. https://github.com/goldfire/howler.js/blob/master/examples/player/index.html), but there is only one player possible per page. green-audio-player is not maintained anymore... currently there are not many alternatives for multiple and "nice styled" audio players on one page. ;-)

what I'm looking for:

• customize all icons (in my case I want to use an icon web component for that)
• more control over the player markup (for example, play/pause, timeline and time in one line) that is currently a bit tricky with css if you have podcasts with a different duration (minutes vs hours)

While I'm writing this, I've discovered https://github.com/jessuni/shikwasa/tree/main/src/templates it would be cool if there would be a simple way to include custom templates for example like this:

const ChapterTemplate = `... my fancy markup ...`
const IconTemplate = `...`
const PlayerTemplate = `...`

const player = new Shikwasa({
    container: () => this.el.querySelector('.shik-' + this.randomPlayer),
    chapterTpl: ChapterTemplate,
    iconTpl: IconTemplate,
    playerTpl: PlayerTemplate,
    audio: {
        title: ' ', // in my case empty, displayed else where in the component
        artist: ' ',
        cover: '',
        src: this.episode,
        },
});

Unfortunately, I have not found anything suitable in the documentation, but maybe you have an idea.

[jessuni]

OK, correct me if I'm not understanding this right, what you want is the complete playback control that a player could provide, but leaving out all the markup and styles? I used to work on a library that exactly meets this need but decided to shift focus onto this one because most people just prefer out-of-the-box solutions.

Although this is irrelevant to the subscription feature intended to be rolled out at v2.3, the idea you came up with is actually pretty achievable because I'm also using the templates internally. Simply opening a port for people to inject their own templates doesn't contradict the goal of this library. But I'll need some time to think through as there might be missing details. Could you open another feature request for this?

[cgpro]

Sure! I'll do! 😊