[resolved] [closed] CSS-style and customize the new [audio] player (16 posts)

  1. UnderABrightSky
    Posted 1 year ago #

    I'm testing the new [audio] player and I like it. But I can't seem to find any info on how to style or customize it:

    Show song title/artist name?
    Change the size? (probably CSS)
    Exclude elements like the progress bar?
    Show a poster/cover-art image, when it's playing?

    Can anyone tell me where to start looking?

    Sorry, if it's the wrong forum. I would really like to test these things... and give feedback

  2. Drew Jaynes
    4.2 Release Lead
    Posted 1 year ago #

    The audio/video players bundled with 3.6 are served with Mediaelement.js. So IIRC, you can override any of the styles in the source with your own by enqueuing your own stylesheet.

    In terms of overriding player options though, not sure about A) how to go about it, B) whether the the core integration in its current form allows for it. Let me see if I can find somebody who knows more about it.

  3. UnderABrightSky
    Posted 1 year ago #

    Thanx a lot for the reply! And yeah, it's definitely A) and B) I'm very curious about!

  4. kevinhaig
    Posted 1 year ago #

    The mediaelement files are in a folder in wp-includes/js.

    I had to make a minor change to the js file to make it responsive so I did the following in my script loader :

    wp_enqueue_script('mediaelement',get_template_directory_uri() . '/js/mediaelement-and-player-min.js', array( 'jquery' ), '' ,true);

    I have not done anything with the styles, but you could de-register the style and then register and enqueue your own.

  5. oumz99
    Posted 1 year ago #

    The audio and video players in WP 3.6 with media elements, are they not responsive or is it my theme ?

  6. WayneM1
    Posted 1 year ago #

    It's super cool that the core now has easy audio/video embeds. But, if there are any options for tweaking the player size, or displaying a cover image for the video, or any use of possible shortcode options - I'm not find any documentation at all. There's not even a list of what media types will work with this new method.

    Please tell me I'm wrong and point me in the right direction....

  7. Narkan
    Posted 1 year ago #

    Wayne - This might help you: http://make.wordpress.org/core/2013/04/08/audio-video-support-in-core/
    As far as editing, this popped up: http://wordpress.org/support/topic/css-for-wp-36-built-in-audiovideo?replies=4

    But I don't know if thats a good idea or if any edits get wiped on updates.

  8. Narkan
    Posted 1 year ago #

    My problem is that my buttons flash up and then go dark on loading. Might be my minify caching making the CSS grumpy here I am not sure...

  9. WayneM1
    Posted 1 year ago #

    @ Narkan - Thanks for your links. I've previously fully read both threads, and it's clear I'm not the only one with questions about the details of how to use the shortcodes, and what is/is not supported.

    For instance, the "poster" images for videos (part of the mejs plugin) is critical to providing a video embed that shows what the video is about.

    People have been asking about the specifics of this new feature for months now. Hopefully, the details will eventually emerge and be made available in a comprehensive page.

  10. singout
    Posted 1 year ago #

    Bah. The new audio player is a huge downgrade from a whole range of far superior audio plugins that were available ... almost all of which are shutting down or being deprecated because of this change. Making things simpler for the few who might post audio once in a blue moon (and don't care about how the player appears or works), but crippling the function for any serious music related blog by creating a completely non-customizable function is poor planning and lousy short-sighted coding.

    Anyone find a basic audio plugin that allows the display to be customized that *isn't* being killed by this piece of dreck? I don't mind paying for it to be done right.

  11. singout
    Posted 1 year ago #

    BTW, how does this qualify as being "resolved"? Sending a couple of useless links (easily searchable) that provide NO answer to the original question is not resolving anything.

  12. esmi
    Forum Moderator
    Posted 1 year ago #

    @singout: This is someone else's month old topic. They decided it was resolved. Please post your own topic.

  13. UnderABrightSky
    Posted 1 year ago #

    I'm the one who started this topic... Sorry, I haven't been in on it lately.

    Thanx for all the answers! :-) I looked through all the links. Should I conclude, that I have to trial-and-error overwriting the 800 lines of CSS?

    I'm looking for some kind of documentation saying:
    To show/hide song title, do X
    To change the size of the player, do Y
    To exclude the progress bar, do Z
    To add a poster, do W

    Will that kind of docs show up eventually? ...when? ...any drafts? :-)

    Btw I haven't marked this thread as resolved (as far as I know...)

  14. cyrilfb
    Posted 1 year ago #

    I totally agree with UnderABrightSky. It's not an improvement unless we are given documents on how to use it.
    I would really love to see answers to his questions using shortcodes, but if that is not possible at least what code to change and where.

  15. cyrilfb
    Posted 1 year ago #

    Sorry, hit enter too soon.
    I also need to know if there is a download button that can be added to the audio player.


  16. Xedecimal
    Posted 1 year ago #

    It's crazy how easy it is to find the default attributes in the media.php yet how hard it is to find documentation on it. Someone write this down somewhere that other users can find it:

    $defaults_atts = array(
    		'src'      => '',
    		'loop'     => '',
    		'autoplay' => '',
    		'preload'  => 'none'

    Later on

    'class'    => apply_filters( 'wp_audio_shortcode_class', 'wp-audio-shortcode' ),
    		'id'       => sprintf( 'audio-%d-%d', $post_id, $instances ),
    		'loop'     => $loop,
    		'autoplay' => $autoplay,
    		'preload'  => $preload,
    		'style'    => 'width: 100%',

    I see nothing for configuration specifically to the mediaelement.js. For example, passing arguments to the constructor in the javascript. That would be awesome, someone needs to implement a filter for that so we can alter them in plugins and themes! Unless there already is an undocumented one.

Topic Closed

This topic has been closed to new replies.

About this Topic