Dynamic Palyer

// The code to add the player on the website:

add_action( 'wp_footer', 'kristuskirken_player', 1 );
function kristuskirken_player() {

	/* Check if it is on a page with a preaching */
	if( is_single() ) {

		/* Check if the audio URL is avaliable */
		if( get_field( 'audio_url' ) ) {

	        echo '<div class="player-box" style="display: none;">';

	            echo do_shortcode('[audio mp3="' . get_field( 'audio_url', get_the_ID() ) . '"]');
	        
	        echo '</div>';
        
        }
	}

}

// The code to trigger the player:

jQuery(document).ready(function(){

	/* Get IF of audio player */
	var audioId = jQuery('.wp-audio-shortcode').attr("id");

	jQuery( ".audio_post_wrap .fa" ).click(function(){
		if( jQuery(this).hasClass( "fa-volume-up" ) ){

			jQuery( ".fa-volume-up" ).hide();
			jQuery( ".fa-pause" ).show();
			jQuery( ".player-box" ).show( 'slow' );

			document.getElementById( audioId ).play();
			
		}else{

			document.getElementById( audioId ).pause();
			
			jQuery( ".fa-volume-up" ).show();
			jQuery( ".fa-pause").hide();
			jQuery( ".player-box" ).hide( 'slow' );
			
		}
	});
});