Audio player has visibility "hidden"!!!

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.

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

Hello.

I am having the same issue at https://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.

Hello, again.

I found my answer here: https://www.ads-software.com/support/topic/audio-players-not-showing-after-upgrade?replies=10#post-5629136

Had to change media.php in “includes” folder.

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.

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?

Could you start up a new thread about that https://www.ads-software.com/support/forum/how-to-and-troubleshooting#postform

Thanx. No need anymore fpr this.

I just wrote a plugin which remove the style code.

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.

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

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.