Audio player changed appearance
-
I found this, which has tips on how to change the shortcode of the old player:
Just wondering if anyone knows if the new player is also color customizable? If so, perhaps someone could post a similiar breakdown of the code required to alter the various sections of the player?
-
I found this, which has tips on how to change the shortcode of the old player:
Yep, but with the new and awful player, that tips don’t work, sorry.
I have several years experience with player customization
-
-
If you have the CSS customization upgrade, the trick is to peek “under the hood” to get an idea of the html used for the player, and then adapt the css of your custom style sheet accordingly. I use the Firebug browser plugin to find out how html is used to construct the player because I have the CSS upgrade for my site.
Here is as far as I got with learning how to customize the player (colors were chosen to make the effects of the style commands clear, and not for any aesthetic purpose):
div.mejs-container { width: 300px !important; } div.mejs-mediaelement { background-color: #purple; } span.mejs-time-loaded { background-color: yellow !important; } span.mejs-time-current { background-color: red !important; } span.mejs-time-total { background-color: green !important; }- Makes the width of the player 300 pixels.
- Makes the color of the player a deep purple.
- Makes the color of the buffered part of the audio yellow.
- Makes the already-played proportion of the audio track red
- Makes the static player bar a sort of dark green. I was not able to determine how to undo the dark gradient … otherwise this style command would have turned the static player bar a bright green.
Style commands like these would affect all audio players in the site. You should be able to test out this styling method without buying the upgrade: I believe anyone can play with the CSS custom styling, but you can’t display the result to readers until you buy the upgrade. Hopefully, WordPress will return the player to its former status in which some styling could be done in the shortcode. That’s what I would presume is meant by backwards-compatibility.
-
Thanks, UUCCMC, for those suggestions.
Those bits of CSS work fine, except for the fact that the player itself (the shell) never quite changes color. If I knock it down to a very light grey, or even white, it still has a dark film over it, as if you were looking at the chosen color through a darkening filter.
Strange and frustrating, but thanks very much for your help.
-
Yes, there is a similar problem with the background of the play bar. I think there might be either a gradient setting or a layer somewhere in the styling. I tried briefly to locate it, but had no luck. Mostly I use trial and error to try to track down these style modifications. Maybe either the staff or another user can lend a hand.
-
@RedaccionJMA – This is a bit odd. I’m not entirely sure why your current page isn’t working correctly. However, if you create a new page and copy and paste the content from your current page, the new page should work. Can you give that a try?
@Laurie – the heading tags shouldn’t make a difference – at least they didn’t make a difference on my test. Regarding the playlists, I’ll keep this thread updated as soon as I know more.
As far as CSS, yes, the current audio player is customizable via CSS. I believe the code you’re looking for to change the background of the player is the following:
div.mejs-container .mejs-controls { background-color: #fff; }The hex code is adjustable to whatever color you would like. Let me know if that’s what you’re looking for!
-
Thanks Jeremyduvall,
As UUCCMC mentioned above, that only half works. There seems to be some sort of gradient setting or layer somewhere in the styling that darkens the player no matter what color is selected. So if you, for example, select a light yellow for the player, it will actually appear dark yellow – almost greenish – as if there is a transluscent black filter over top of it. Same with other colors.
-
-
That still gives me a black player.
Or should I be putting that in in addition to the other CSS you already posted?
-
-
Yes, beangryatthesun … You have to include the div.mejs-mediaelement style to change the color and the .mejs-controls style to disable the gradient.
-
@beangryatthesun @Laurie – I apologize for the oversight regarding the gradient. I’ve tried the combination that @Laurie mentions, but it doesn’t seem to get rid of the gradient. I’d encourage you to post the question here on our CSS forums:
https://en.forums.wordpress.com/forum/css-customization
We have some gurus there that will help you get this sorted out if you’re still having trouble.
@meponesa100 – You can already upload multiple files to a playlist as described here:
Please note, this only currently applies to files that you have uploaded to your blog, not externally hosted files. Incorporating externally hosted files in your playlists is a feature that we’re looking at currently.
-
The link problem has re-appeared on my blog. I have “download” links to mp3 files below my audio player. The links do not work. Only applies if there is an embedded image in the post.
I thought this had been fixed by WordPress, but it has not.
-
Hi,
This issue appears to be happening inconsistently. For example, the download links work on the following post:
That post has an image and an audio file.
However, the link does not work on the following post:
I’m not sure what’s causing the inconsistency. I’ll get back with you as soon as I know more!
-
-
-
-
-
Just go back to 3.8.1.
I have problems with the player too.
In all posts after the ‘load more’, the player disappeared.
I changed my wordpress back to 3.8.1.
Now the player is back, I must say, not in the right color.
But it’s better then changed a template.
I tried other pluggins, deleting some wp-includes code, change the css.WordPress doesn’t give solutions
Maybe when they fix this problem in 3.10. I will update again.
- The topic ‘Audio player changed appearance’ is closed to new replies.
WordPress.com Forums 