WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. Shakyakumara
    Member
    Posted 2 months 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. Samuel Wood (Otto)
    Tech Ninja
    Posted 2 months ago #

    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 2 months 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 2 months 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 2 months 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. Samuel Wood (Otto)
    Tech Ninja
    Posted 1 month ago #

    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 month 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
    Posted 1 month ago #

  9. struppi
    Member
    Posted 1 month ago #

    Thanx. No need anymore fpr this.

    I just wrote a plugin which remove the style code.

  10. Samuel Wood (Otto)
    Tech Ninja
    Posted 1 month ago #

    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.

Reply

You must log in to post.

About this Topic

Tags

No tags yet.