Playing MP3's on multisite

Good morning to y'all!

I wonder: are there any known issues with the standard MP3 handling in WP on multisite?
On my sites (Windows server) I seem to need a plugin to make an MP3 playable on the page and I'd rather not do so, not in the last place that none of them makes me 100% satisfied.

Any thoughts or suggestions on this are appreciated, thx!

  • Sajid

    Hi @Ronald,

    Hope you are doing good today :slight_smile:

    MP3 should play nicely on WordPress multisite sites. There are no know issues (as far as I am aware of) here.

    Also, to embed MP3 file on a page, you don't need a plugin. WordPress handles it out of the box for you.

    Just upload MP3 file on your site via Media > Add New. Copy the file URL (not attachment url) and paste it in editor of the page (should be on a separate line). WordPress will automatically detect it and convert it into an MP3 player on frontend.

    You can also use audio shortcode of WordPress. See more details here on official documentation page of WordPress.
    https://codex.wordpress.org/Audio_Shortcode

    Take care and have a nice day :slight_smile:
    Cheers, Sajid

  • Nastia

    Hello @Ronaldus, I hope you are doing well today!

    From the link you posted I see an 404 error that File is not found.

    Would you please re-check the MP3 link, it seems that there is an extra signs added at the end of the URL:
    ?_=1
    Once you delete it, the mp3 player should start working.

    The MP3 is perfectly working under this path:
    files/2009/11/160113-Uniek.mp3

    I hope this helps!

    Cheers,
    Nastia

  • Ronald

    Maybe I may come back at this issue one more time:
    Fact is that it works OK on my main site http://www.webzenz.nl, but not on all other sites.
    I have de-activated ALL plugins (incl. Domain mapping), on the site AND on network level, so there were NO plugins activated. No caching installed. Tried several browsers.
    Theme is the same as the theme from the main site, where it does work.

    So must we conclude now that it's a WP issue ?

    Any help is appreciated, I'd like to get this working, my customers are unhappy...

    Thanks!!

  • Ronald

    Aha, look what I found:

    https://wordpress.org/support/topic/wp_audio_shortcode-is-adding-_1-to-end-of-mp3-file-urls
    http://www.elegantthemes.com/blog/tips-tricks/using-and-customizing-the-wordpress-audio-player (the first few comments)

    ( Searched for: wordpress "?_=1" mp3 )

    So, this is seen more often.
    Can you suggest what's best now?
    Because uploading a MP3 with the name test.mp3 (no spaces and _ and so on) and with no title etc. does not help....

  • Ronald

    Hi Nastia,

    Thx for replying and your help.
    Yes, I deactivated ALL site AND all networkplugins, but this doesn't make any difference. It only goes well on the main network site, on all mapped domain sites the "?_=1" gets added.

    And Yes: I have uploaded new audio files, and adjusted the name to test.mp3, so any problems with strange characters was avoided...

    I also converted an mp3 to ogg, but this gives exactly the same problem with the 'ghost-adding' to the file-name.

    Also:
    I installed this plugin: https://www.tipsandtricks-hq.com/wordpress-audio-music-player-plugin-4556
    Works OK, unless I apply the template 1, which looks very alike the WP MP3 player, where exactly the same adding to the filename appears. In the simple mode it plays MP3's OK.

    Sorry to bother you with all these details, just want to inform you as adequate as possible (everything can give a clue, after all...) and show you that I'm willing to try things myself, but can't get a finger on this...

    Cheers!

  • Sajid

    Hi @Ronaldus,
    Hope you are doing good today :slight_smile:

    I tested it on my own website and see WordPress automatically appends query string with incremental number on each audio element on a page. WordPress adds this for browser cache. If you don't add that number at the end browser will ignore loading of preceding media files assuming the same media elements.

    On my site I have 5 mp3 songs embedded in a page. It appends the query string with file URL at the end from 1-5. These files are working and playing fine for me with query strings at the end.

    On your website I can see the issue is that when you there is a query string in the URL it gives a 404 error. That is seems to be issue with your server.

    Here are two methods to resolve this issue:

    First: Addition of query string is quite intentional and for purpose by WordPress. So its recommended to not remove them from file URLs and instead contact your host to check why its going to 404 when file is exists.

    Second: If you still want to remove the query string from MP3 URL then add following code in functions.php file of your child theme or use mu-plugin.

    if( !function_exists('wpmudev_remove_query_string_from_mp_url') ) :
    
    	add_filter('wp_audio_shortcode', 'wpmudev_remove_query_string_from_mp_url', 10, 5);
    	function wpmudev_remove_query_string_from_mp_url( $html, $atts, $audio, $post_id, $library ){
    
    	$post_id = get_post() ? get_the_ID() : 0;
    
    	static $instance = 0;
    	$instance++;
    
    	/**
    	 * Filter the default audio shortcode output.
    	 *
    	 * If the filtered output isn't empty, it will be used instead of generating the default audio template.
    	 *
    	 * @since 3.6.0
    	 *
    	 * <a title="@param" href="/profile/param">param</a> string $html     Empty variable to be replaced with shortcode markup.
    	 * <a title="@param" href="/profile/param">param</a> array  $attr     Attributes of the shortcode. @see wp_audio_shortcode()
    	 * <a title="@param" href="/profile/param">param</a> string $content  Shortcode content.
    	 * <a title="@param" href="/profile/param">param</a> int    $instance Unique numeric ID of this audio shortcode instance.
    	 */
    	$override = apply_filters( 'wp_audio_shortcode_override', '', $attr, $content, $instance );
    	if ( '' !== $override ) {
    		return $override;
    	}
    
    	$audio = null;
    
    	$default_types = wp_get_audio_extensions();
    	$defaults_atts = array(
    		'src'      => '',
    		'loop'     => '',
    		'autoplay' => '',
    		'preload'  => 'none'
    	);
    	foreach ( $default_types as $type ) {
    		$defaults_atts[$type] = '';
    	}
    
    	$atts = shortcode_atts( $defaults_atts, $atts, 'audio' );
    
    	$primary = false;
    	if ( ! empty( $atts['src'] ) ) {
    		$type = wp_check_filetype( $atts['src'], wp_get_mime_types() );
    		if ( ! in_array( strtolower( $type['ext'] ), $default_types ) ) {
    			return sprintf( '<a class="wp-embedded-audio" href="%s">%s</a>', esc_url( $atts['src'] ), esc_html( $atts['src'] ) );
    		}
    		$primary = true;
    		array_unshift( $default_types, 'src' );
    	} else {
    		foreach ( $default_types as $ext ) {
    			if ( ! empty( $atts[ $ext ] ) ) {
    				$type = wp_check_filetype( $atts[ $ext ], wp_get_mime_types() );
    				if ( strtolower( $type['ext'] ) === $ext ) {
    					$primary = true;
    				}
    			}
    		}
    	}
    
    	if ( ! $primary ) {
    		$audios = get_attached_media( 'audio', $post_id );
    		if ( empty( $audios ) ) {
    			return;
    		}
    
    		$audio = reset( $audios );
    		$atts['src'] = wp_get_attachment_url( $audio->ID );
    		if ( empty( $atts['src'] ) ) {
    			return;
    		}
    
    		array_unshift( $default_types, 'src' );
    	}
    
    	/**
    	 * Filter the media library used for the audio shortcode.
    	 *
    	 * @since 3.6.0
    	 *
    	 * <a title="@param" href="/profile/param">param</a> string $library Media library used for the audio shortcode.
    	 */
    	$library = apply_filters( 'wp_audio_shortcode_library', 'mediaelement' );
    	if ( 'mediaelement' === $library && did_action( 'init' ) ) {
    		wp_enqueue_style( 'wp-mediaelement' );
    		wp_enqueue_script( 'wp-mediaelement' );
    	}
    
    	/**
    	 * Filter the class attribute for the audio shortcode output container.
    	 *
    	 * @since 3.6.0
    	 *
    	 * <a title="@param" href="/profile/param">param</a> string $class CSS class or list of space-separated classes.
    	 */
    	$html_atts = array(
    		'class'    => apply_filters( 'wp_audio_shortcode_class', 'wp-audio-shortcode' ),
    		'id'       => sprintf( 'audio-%d-%d', $post_id, $instance ),
    		'loop'     => wp_validate_boolean( $atts['loop'] ),
    		'autoplay' => wp_validate_boolean( $atts['autoplay'] ),
    		'preload'  => $atts['preload'],
    		'style'    => 'width: 100%; visibility: hidden;',
    	);
    
    	// These ones should just be omitted altogether if they are blank
    	foreach ( array( 'loop', 'autoplay', 'preload' ) as $a ) {
    		if ( empty( $html_atts[$a] ) ) {
    			unset( $html_atts[$a] );
    		}
    	}
    
    	$attr_strings = array();
    	foreach ( $html_atts as $k => $v ) {
    		$attr_strings[] = $k . '="' . esc_attr( $v ) . '"';
    	}
    
    	$html = '';
    	if ( 'mediaelement' === $library && 1 === $instance ) {
    		$html .= "<!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->\n";
    	}
    	$html .= sprintf( '<audio %s controls="controls">', join( ' ', $attr_strings ) );
    
    	$fileurl = '';
    	$source = '<source type="%s" src="%s" />';
    	foreach ( $default_types as $fallback ) {
    		if ( ! empty( $atts[ $fallback ] ) ) {
    			if ( empty( $fileurl ) ) {
    				$fileurl = $atts[ $fallback ];
    			}
    			$type = wp_check_filetype( $atts[ $fallback ], wp_get_mime_types() );
    			$url =  $atts[ $fallback ] ;
    			$html .= sprintf( $source, $type['type'], esc_url( $url ) );
    		}
    	}
    
    	if ( 'mediaelement' === $library ) {
    		$html .= wp_mediaelement_fallback( $fileurl );
    	}
    	$html .= '</audio>';
    
        	return $html;
    
    	}
    endif;

    Update: Here is the gist on github, in case there are code errors above.
    https://gist.github.com/sjaved87/3674d304d3fa80656506

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:
    Cheers, Sajid

  • Sajid

    Hi @Ronaldus,
    Hope you are doing good today :slight_smile:

    The code is exact copy of the core function of WordPress, I just removed the query string value at the end. So I am sure there is nothing wrong with code that is causing this issue.

    1st one plays but indicator doesn't work 100%

    Rearding 1st track, it seems the issue is with this specific track/mp3 file. I am saying this because its not working for me on my own site too.

    Here is the test page link:
    http://jwebsol.com/wpmu/about-2/

    Make sure you have compressed the file correctly and in the same way you have done with other MP3 files.

    Here is a good to tool to convert your tracks for HTML 5 Player.
    http://www.html5audioconverter.com/

    3rd one doesn't do anything

    Because you are using the invalid URL. The MP3 file does not exist here. Make sure the file path is correct and it will start working.
    http://www.laurastonepiano.nl/files/2014/08/lSpontaneous-Composition1.mp3

    Take care and have a nice day :slight_smile:
    Cheers, Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.