Changing look of audio player using CSS

  • Unknown's avatar
    waltwould · Member ·

    Hello,

    I’m interested in knowing what options WordPress.com users have to change the look of the audio player widget as it appears on post pages. (The widget I’m referring to is inserted using [audio] tags, not HTML.) The website I’m working on is using the Dyad2 theme (though I’m not sure that matters?).

    Anyway, after scouring these (extremely helpful!) CSS forum archives, I found a snippet of code provided by @TheSacredPath that appears to target the audio player successfully:

    .mejs-container, .mejs-embed, .mejs-embed body, .mejs-container .mejs-controls {
    background: none repeat scroll 0 0 #cc0000;
    border-radius: 5px;
    box-shadow: 4px 3px 7px #555;
}

    As far as I can tell, the above code: 1) changes the background color, 2) creates rounded corners on the Audio widget, and 3) creates a drop shadow around the widget.

    Question 1: Is there anything else users can change about the appearance of the audio widget using CSS? For example: Can we alter the length of the play bar instead of having it automatically fill the entire column width? Is there any way to change it from a line to a small box/more square format? Would be happy to hear all CSS options.

    Question 2: A possible bug? While in the “Custom CSS” preview window, I can change the color of the audio widget (e.g. to dark blue, #000080) — but even after publishing the changes, the audio player appears black when viewed anywhere else BUT the “Custom CSS” window. Is this a theme-related quirk, or do I need some corrective code?

    Thank you for any help you can provide!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, on the audio player, since it is part of Jetpack, we would typically have to use the !important keyword to force the change. This will work for the background color change. 

    .mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {
  background-color: #000080 !important;
}

    The CSS preview is done with Javascript so that changes show real-time, and in some instances, it will show a change that will not show up on the website, such as in this case. The developers are continually working on this to make the Preview more accurate and it there aren’t many things that will crop up like this one.

    For the width of the audio player, you could do something like this. 

    .mejs-container {
  max-width: 300px !important;
  width: 100% !important;
}

    The max width was set at 100%, which makes it full width of the entry-content div. When making it narrower though, it is best to set a pixel value for the max width rather than just reducing it to, say, 50% since that 50% max width would apply to all screens and on phones, it would end up being very narrow and likely all the controls would end up overlapping.

  • Unknown's avatar
    waltwould · Member ·

    A belated thank-you — all of this, especially the explanations, are incredibly helpful.

    My only follow-up question: Is there any way to attach a caption or title to the Audio Player element itself (in the style of a photo caption)? The player would look so much better with its own distinct label that’s formatted differently than the body text of the post (like a photo caption’s text is). Again, thank you for any assistance you can provide!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, glad that all worked for you. I’m having trouble finding the post that had the audio player on it. Can you give me a link?

    In general, the only way we would be able to do this would be with a pseudo CSS rule. If you want the same text on all audio players on your site, this is pretty simple, but if you wish to have different text on each, then for each instance of an audio player you would need to create a unique CSS rule targeting that particular player.

  • The topic ‘Changing look of audio player using CSS’ is closed to new replies.