Append a Download link to the WordPress audio shortcode output

download-link-to-audio-player.php

<?php
/*
Plugin Name: Append Download button below audio player
Plugin URI: https://www.damiencarbery.com/2017/02/add-download-link-to-wordpress-audio-player/
GitHub Plugin URI: https://github.com/damiencarbery/audio-shortcode-download-link
Description: Add a Download link to the html generated for the "audio" shortcode.
Author: Damien Carbery
Version: 0.2
*/


if ( ! defined( 'WPINC' ) ) {
	die;
}


add_filter( 'wp_audio_shortcode', 'ast_audio_shortcode_enhancer', 10, 5 );
function ast_audio_shortcode_enhancer( $html, $atts, $audio, $post_id, $library ) {
	/*error_log( 'HTML: ' . $html );
	error_log( 'ATTS: ' . var_export( $atts, true ) );
	error_log( 'AUDIO: ' . var_export( $audio, true ) );
	error_log( 'POST_ID: ' . var_export( $post_id, true ) );
	error_log( 'LIBRARY: ' . var_export( $library, true ) );*/

    $audio_types = array( 'mp3', 'ogg', 'wma', 'm4a', 'wav' );

    // Use the first audio type that has data.
    foreach ( $audio_types as $extension ) {
        if ( array_key_exists( $extension, $atts ) && strlen( $atts[ $extension ] ) ) {
            return $html . sprintf( '<p><button type="button"><a href="%s" download>Download</a></button></p>', $atts[ $extension ] );
            break;
        }
    }
	
	// For an externally hosted file the [embed] shortcode is active and the url will be in $atts['src'].
	if ( array_key_exists( 'src', $atts ) ) {
		return $html . sprintf( '<p><button type="button"><a href="%s" download>Download</a></button></p>', $atts[ 'src' ] );
	}

    // Otherwise return the original html.
    return $html;
}


// Add a Download button below the Audio block.
add_filter( 'render_block', 'dcwd_add_download_button_to_audio', 10, 2 );
function dcwd_add_download_button_to_audio( $block_content, $block ) {
	if ( 'core/audio' == $block['blockName'] ) {
		if ( preg_match( '/src="(.*)"/', $block['innerHTML'], $matches ) ) {
			return $block['innerHTML'] . sprintf( '<p><button type="button"><a href="%s" download>Download</a></button></p>', $matches[1] );
		}
	}

	return $block_content;
}

wp_audio_shortcode-filter-data.txt

html:'<!--[if lt IE 9]><script>document.createElement(\'audio\');</script><![endif]-->
<audio class="wp-audio-shortcode" id="audio-1492-1" preload="none" style="width: 100%;" controls="controls"><source type="audio/mpeg" src="http://example.com/wp-content/uploads/2017/02/audio-track.mp3?_=1" /><a href="http://example.com/wp-content/uploads/2017/02/audio-track.mp3">http://example.com/wp-content/uploads/2017/02/audio-track.mp3</a></audio>'
atts:array (
  'src' => '',
  'loop' => '',
  'autoplay' => '',
  'preload' => 'none',
  'class' => 'wp-audio-shortcode',
  'style' => 'width: 100%;',
  'mp3' => 'http://example.com/wp-content/uploads/2017/02/audio-track.mp3',
  'ogg' => '',
  'wma' => '',
  'm4a' => '',
  'wav' => '',
)
audio:NULL
post_id:1492
library:'mediaelement'

wp_audio_shortcode-filter-test.php

<?php
add_filter( 'wp_audio_shortcode', 'ast_audio_shortcode_filter_test', 10, 5 );
function ast_audio_shortcode_filter_test( $html, $atts, $audio, $post_id, $library ) {
    error_log( "html:".var_export( $html, true )."\natts:".var_export( $atts, true )."\naudio:".var_export( $audio, true )."\npost_id:".var_export( $post_id, true )."\nlibrary:".var_export( $library, true )."\n" );
    return $html;
}

Hi @zizoua5000
I've just used your code but on my website it looks like this:

..besides on on mouse over it indicates no link nor it work on mouse click. May there be some error in the code?

It is working for me - the hover change is only for the icon on the right. The media player colour does not change.

Hi @zizoua5000
I've just used your code but on my website it looks like this:
..besides on on mouse over it indicates no link nor it work on mouse click. May there be some error in the code?

It is working for me - the hover change is only for the icon on the right. The media player colour does not change.

Thank you, for such a quick reply.
That is strange. In my case there is no download icon and the link is not there either. Would you be so kind and show me your script?
All the best

Edit:
Ok, I've installed Font Awesome plug-in and it all works.

Thank you, for such a quick reply.
That is strange. In my case there is no download icon and the link is not there either. Would you be so kind and show me your script?
All the best

Edit:
Ok, I've installed Font Awesome plug-in and it all works.
Does the plugin work or Font Awesome works or both?

The plug-in works with Font Awesom installed. Without it, the download button was not visible thus it was inactive.

The plug-in works with Font Awesome installed. Without it, the download button was not visible thus it was inactive.
Glad it was that simple.
The code could probably be changed to with with Dashicons (as it's often loaded automatically by some theme or plugin, or by WordPress itself).
Changing:
<i class="fa fa-download"
to
<i class="fa fa-download dashicons-before dashicons-download"
would probably do it (though it would probably show 2 icons if you have Font Awesome and Dashicons loaded).

Ok, great! I'll look into it.
Thank you so much 👍🏻💪🏻

Great Help for me. Small Help How to get Mp3 Title Please Give me Answer

Great Help for me. Small Help How to get Mp3 Title Please Give me Answer
The title of the MP3 audio is not provided by the filter function but you can use wp_get_attachment_metadata($post_id) to get it.
Something like this:
$attachment_data = wp_get_attachment_metadata( $atts[ 'id' ] ); $title = $attachment_data['title'];
then add $title where you want it.

By the way, wp_get_attachment_metadata() returns an array like this:
array (
'dataformat' => 'mp3',
'channels' => 2,
'sample_rate' => 44100,
'bitrate' => 128000,
'channelmode' => 'joint stereo',
'bitrate_mode' => 'cbr',
'lossless' => false,
'encoder_options' => 'CBR128',
'compression_ratio' => 0.09070294784580499,
'fileformat' => 'mp3',
'filesize' => 3043247,
'mime_type' => 'audio/mpeg',
'length' => 190,
'length_formatted' => '3:10',
'comment' => 'None',
'year' => '1921',
'title' => 'St. Louis Blues (1921)',
'artist' => 'Original Dixieland Jazz Band with Al Bernard',
'genre' => 'Acoustic Era',
'album' => 'Victor-18772',
)

Thanks for the combined effort peoples. Worked for me. At least until some major release of WordPress changes things again. And just how secure is it against damned invaders? No idea what to do with Shortcode filters. I liked the CSS of @meghansmith but I have no clue how to implement those filters she posted on her profile page. But @zizoua5000 gave me enough to work with. Thank you.