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 Damien !

I'd like very much to add a download link to the original mediaelement.js Wordpress player.
It seems you have found a solution. I would be really greatful if you could tell me what to do with those files ?
Where does this code belong ?
I've tried different things but I'm an helpless amateur coder.

Many thanks in advance,
Victor.

EDIT : copying download-link-to-audio-player.php into media.php append (dead) Download buttons on my audio widgets but not on the audio files embeded in my posts.

@VictorBlanchard: Sorry for not replying earlier - I didn't see your comment.
You can copy download-link-to-audio-player.php to wp-content/plugins/download-link-to-audio-player.php and the activate the plugin from the Dashboard.

Thanks so much for this! I modified it some, making the code more semantic and including some sample CSS to make it look like this:

Thanks for putting this together!!

@meghansmith

Can you please share your code or plugin, i am looking for the same.

Thanks
Jigs

Made some inline styling.

<?php
/*
Plugin Name: Audio Shortcode Testing
Plugin URI: http://www.damiencarbery.com
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.1
*/


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 ) {
    $audio_types = array( 'mp3', 'ogg', 'wma', 'm4a', 'wav' );

    // Use the first audio type that has data.
    foreach ( $audio_types as $extension ) {
        if ( strlen( $atts[ $extension ] ) ) {
            return sprintf('<div style="display: flex;">') .  $html . 
            sprintf( '<span style="height:40px; background-color: rgb(34, 34, 34);"><button type="button" style="background-color: rgb(34, 34, 34); padding-left:5px; padding-top: 8px;"><a href="%s"  download><i class="fa fa-download" style="color: white;" onmouseover="this.style.color=' .
             "'blue'" . '" onmouseout="this.style.color=' . "'white'" . '"></i></a></button></span></div>', $atts[ $extension ] );
            break;
        }
    }

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

Thank you for this beautiful work.
I have a question..
Can the code be modified to allow the download button to appear if it is an external link?

How to Get Post Title On this Audio Please Help Me

Hi,

Is it possible to modify this to make it work with video?

I've tried changing the code to wp_video_shortcode and replaced every audio instance with video, but it's not working.

Is it possible to modify this to make it work with video?
I've tried changing the code to wp_video_shortcode and replaced every audio instance with video, but it's not working.
@leandroprz: I added a small mp4 video file to a page using the block editor and with a shortcode.
The video added as a block has a Download link. The shortcode one does not.
Can you use the block editor for your video?

Both have a

<?php
/*
Plugin Name: Audio Shortcode Testing
Plugin URI: http://www.damiencarbery.com
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.1
*/


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 ) {
    $audio_types = array( 'mp3', 'ogg', 'wma', 'm4a', 'wav' );

    // Use the first audio type that has data.
    foreach ( $audio_types as $extension ) {
        if ( strlen( $atts[ $extension ] ) ) {
            return sprintf('<div style="display: flex;">') .  $html . 
            sprintf( '<span style="height:40px; background-color: rgb(34, 34, 34);"><button type="button" style="background-color: rgb(34, 34, 34); padding-left:5px; padding-top: 8px;"><a href="%s"  download><i class="fa fa-download" style="color: white;" onmouseover="this.style.color=' .
             "'blue'" . '" onmouseout="this.style.color=' . "'white'" . '"></i></a></button></span></div>', $atts[ $extension ] );
            break;
        }
    }

    // Otherwise return the original html.
    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?

Thank you. Best regards
Mars

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.