WordPress.org

Forums

[resolved] Audio player has visibility "hidden"!!! (12 posts)

  1. Shakyakumara
    Member
    Posted 1 year ago #

    Hi everyone,

    [audio] shortcodes aren't displaying on pages or posts on my site. For example, see http://www.briefmindfulness.com/test/.

    Inspecting element with chrome, I see "visibility: hidden" in the <audio....> tag.

    Any idea how that's being generated, and how I can correct it?

    (In case it's relevant, the shortcodes were all working fine up to May 8th, then suddenly disappeared. I'm pretty sure I didn't change anything, so I'm guessing it was an automatic upgrade?)

    thanks for your help,
    Shakya

  2. The problem isn't the visibility: hidden. The problem is that you're missing the lower half of the page. The page cuts off abruptly at a /div without displaying any of the footer.

    In WordPress, audio and video shortcodes are handled by a system called MediaElementJS (MEJS). The CSS and Javascript code in MEJS is normally included in the footer of the page, and its job is to detect your browser and handle the different support for different browsers.

    Some browsers can play MP3 files just fine, some can play WAV files, etc. MEJS detects the audio tag, determines the best way to get the browser to show it, and then handles it. In the process, that visibility:hidden gets changed, or maybe the tag gets replaced with another bit of player code, or whatever. Point being that without the MEJS code loading on the page, the audio and video tags won't display properly.

    Fix whatever is cutting your page off at the knees, then the problem might be fixed.

  3. Shakyakumara
    Member
    Posted 1 year ago #

    Many thanks Otto - that took me right to the source of the problem, sorted :-) Indeed you are a Tech Ninja!

  4. GordonLSimmons
    Member
    Posted 1 year ago #

    Hello.

    I am having the same issue at http://musicalexpressions.net/ensembles

    Using Firebug I see this:

    element.style {
    visibility: hidden;
    width: 100%;
    }

    when I hover on the audio shortcode in the html.

    Where can I turn hidden to visible?

    I looked in content=>uploads=>it-file-cache.css but this does not correct the problem.

    I am using iThemes Builder theme with a custom child theme.

  5. GordonLSimmons
    Member
    Posted 1 year ago #

    Hello, again.

    I found my answer here: http://wordpress.org/support/topic/audio-players-not-showing-after-upgrade?replies=10#post-5629136

    Had to change media.php in "includes" folder.

  6. Changing the media.php file isn't a "fix". You need to fix your theme to have the proper wp_head() or wp_footer() calls in it instead.

  7. struppi
    Member
    Posted 1 year ago #

    I don't want Javascript on my site. So it's not possible to use the WordPress [audio] without Javascript and with my own CSS?

  8. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

  9. struppi
    Member
    Posted 1 year ago #

    Thanx. No need anymore fpr this.

    I just wrote a plugin which remove the style code.

  10. The Javascript code is what makes the audio or video tags cross-platform.

    Not all browsers support audio or video tags, and even for those that do, not all browsers support all the different formats of audio or video.

    The javascript code detects what the browser supports and then either loads the audio/video natively with standardized controls, or it loads a Flash or Silverlight applet to make the audio/video work in the browser that lacks native support for that media file.

    If you're using the shortcode, then it is highly recommended to use the associated JS. If you don't want that JS/CSS code, then you don't need to use the shortcode at all. You can simply include the relevant <audio> or <video> tag in the post directly to achieve that goal. The shortcode specifically adds the cross-browser compatibility, because that's the whole point of having it in the first place.

  11. alifinteractive
    Member
    Posted 6 months ago #

    Hi just go to wp-includes/media.php and remove "visibility:hidden" on line number 1606 that's it!

  12. SteveGP
    Member
    Posted 3 months ago #

    changing the wp core files is never a good idea. You can remove the visibility:hidden; from the audio style element with the following filter.

    add_filter( 'wp_audio_shortcode', 'audio_short_fix', 10, 5 );
    function audio_short_fix( $html, $atts, $audio, $post_id, $library )
    {
    $html = str_replace ( 'visibility: hidden;' ,'' , $html );
    return $html;
    }

    But I am still not able to get the audio to show in a header widget area. w-_head() amd wp_footer() are in place in the theme. The audio shortcode does work in a page or post. do shortcodes for the widget area has been enabled in functions.php. The short code is in a text widget.

    Here is a test page with an audio shortcode in the page and in the header on the right which can't be seen.

    https://stagefright.com/test/

    Any help would be appreciated.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.