MediaElement.js Audio Player problem

Hello @joelcantero7,

Thanks for using PowerPress!

The MediaElement.js player is what is built into WordPress. Please try switching your theme to a default theme such as twentyeighteen to confirm the problem is with your theme. In most all cases like this the theme is overriding the css of the player unknowingly. Since I can play the episode we have eliminated that it is a javascript or player issue and isolated the problem to styling (CSS).

A quick view in the inspector of my browser I see the following CSS is setting the line-height and margin of the player:

.asi-posts-wrapper .asicolumn .entry-content-wrap .entry-content *, .asi-posts-wrapper .asicolumn .entry-content-wrap .entry-header * {
  line-height: 1.3em;
  margin: 0;
}

The asterisk * is making everything inside each item to have a margin of zero and a line height of 1.3em, which is why the player looks funny.

Contact your theme developer to fix this problem, you can reference this forum thread.

Thanks,
Angelo

Hello @joelcantero7,

I have encountered the same issue.

can you please explain how you resolved it?

Your help is highly appreciated.
Rotem

Hello Rotem,
My problem was not solved. It was not a theme issue or CSS problem.

I am trying to record a Podcast using the Player, and I want to configure it, but there are no controls, no stop/go, no pause, no record or anything else.

@nasmu: Blubrry doesn’t offer any media players with recording functionality. Not sure if that’s even possible with the MediaElement.js player.

@shawnogordo

Thanks for responding to my problem.

If The default Player doesn’t have recording capabilities, how do you record a Podcast?

The topic of “how to record a podcast” is much too broad in scope for this forum. Do some research in your favorite search engine on the subject.

Or see if you can get some guidance from these groups/websites:
https://www.facebook.com/groups/674109956009963/?ref=group_browse
https://www.facebook.com/groups/227341777331132/?ref=group_browse
https://schoolofpodcasting.com/
https://theaudacitytopodcast.com/

@shawnogordo

Thanks again for your reply.

Can someone help me with my problem? It is not solved yet.

Thanks
Joel

Hello, Joel,

I have ended up using https://simplepodcastpress.com/ player,

Here’s how it looks: https://simplepodcastpress.com/#demo

It is really good and has a lot of advanced features.

It is not expansive the support is really great and we are very satisfied.

Best regards,
Rotem

Note that it doesn’t have recording capabilities, for us it just integrates with PowerPress.

Rotem

@joelcantero7: Is this still the page on your site you need help with?:
https://eramagazine.demoswp.com/7-minutos-al-dia/

I’m not seeing any media players on that page at all.

@shawnogordo This is an example of podcast episode: https://eramagazine.fm/eramagazine/464-delbosque-distorsion-y-pop/

@blumbergrotem I still love mediaplayer.js, but the good one hahaha not the dark version.

I was just explaining to a colleague the player used to be a lighter gray. I am 95% sure the color change was due to the lighter version not having the correct amount of contrast for accessibility, but i could be 5% wrong ??

IF you want to change the colors of the mediaelement.js player, check out this plugin: https://www.ads-software.com/plugins/media-player-style-kit/

I am experiencing exactly the same issue on my site. Blubrry support also advised it was the theme doing it.

To test, I created a new subdomain, installed WordPress fresh, checked that the only themes are stock WordPress (Twenty Nineteen, Twenty Seventeen and Twenty Sixteen) – i.e. no other themes added after install, and removed all automatically created plugins so that PowerPress is the only one installed.

It is still rendering the light grey, rounded end player first, then the black, square player loads over the top of that. The PowerPress settings preview has the light grey player in it.

There is something weird going on here. It is not a 3rd party theme doing this, as everything on the test site was stock.

It also doesn’t make sense that if the player ‘used’ to be grey and has now changed – where is that being located to be rendered first?

Fundamentally, what I (we) need is a solution so that we render one player or the other, but loading both looks bad.

1) preferably, keeping the original player formatting by preventing the black WordPress player loading,
2) Or if we have to, properly replacing the grey player / stopping that from loading so that only the WordPress stock player loads.

• This reply was modified 5 years, 5 months ago by jamestrueman. Reason: added email notification