Audio Shortcode Animation – Progress Rail Disappears

  • I’ve animated the Audio Shortcode using max-width but the issue is that the progress rail does not animation with it. Whenever I try to update the width via JQuery it is being overwritten after the fact. Here’s what I am doing to animate my audio shortcode:

    1) Add container:

    function audio_shortcode_container( $html ) {
   return "<div class=\"audioContainer\">{$html}</div>";

}
add_filter( 'wp_audio_shortcode', 'audio_shortcode_container' );

    The CSS which handles the animation:

    div.audioContainer {
	max-width: 80px;
	overflow: hidden;
	-webkit-transition: max-width 0.5s;
			transition: max-width 0.5s;
}

div.audioContainer.active {
	max-width: 100%;
}

    Finally, the JQuery that triggers the animation:

    jQuery( document ).ready( function( $ ) {
	$( 'div.audioContainer' ).click( function() {
		var containerWidth = $( '#content' ).width();
		$( this ).addClass( 'active' );
		$( this ).find( 'audio' )[0].play();
		$( this ).find( '.mejs-time-rail' ).css( 'width', ( containerWidth - 174 ) + 'px' );		// Gets overwritten
		$( this ).find( '.mejs-time-total' ).css( 'width', ( containerWidth - 184 ) + 'px' );		// Gets overwritten
	} );
} );

    So, whenever the active class is added it trigger the CSS animation and starts to play the audio file. The problem is ( I believe ) whenever the audio-file is triggered to play the progress bar is updated with a style width attribute and supersedes my JQuery style update above.

    How can I update the progress bar to also show whenever I trigger this animation?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    Yes, it does sound like another script is updating the style rule after yours. You need to do something so that your style update occurs after anything else. I think the only way to arrive at a solution is to locate the script that is doing the overwriting. You could then hook into whatever event the script uses. Add your event callback after the script adds its own so that yours runs later.

    Or you could overwrite the callback function with your own version. If your version loads later, it will be the one used.

    Unfortunately, finding this script can be difficult, and if the script is minimized with no original source available, pretty much impossible to find.

    Thread Starter Howdy_McGee

    (@howdy_mcgee)

    Sorry, I should have clarified. The above code is all that’s needed to replicate it on a default theme with no plugins and an audio file.

    I’m trying to modify the built-in audio oembed with an animation with the above code.

    Moderator bcworkz

    (@bcworkz)

    Ah, I see now. I don’t think there is a solution for what you are trying to do. The oEmbed content is essentially a remote page running in an iframe. Even though you can affect elements within the iframe with CSS, if there is script updating an element style on the remote page, AFAIK, there is nothing you can do on your page to change this.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Audio Shortcode Animation – Progress Rail Disappears’ is closed to new replies.