Append a Download link to the WordPress audio shortcode output

readme.md

This adds a Download button to media player in Wordpress. If you want it all in one line, use the recommended styles below.

Changes from original: remove paragraph tags, add classes to button, remove inline styles, remove anchor tag. Make more semantic & editable. Include CSS for all-in-one-line display.

Recommended CSS for the bar/Download button on the same line: .wp-audio-shortcode { max-width: 79%; float: left; } a.downloadBtn { margin-top: 2px; margin-left: 10px;

/Optional button styling if not bootstrap site/ background-color: white; padding: 8px 10px; border-radius: 4px; border: 1px solid #333; color: #333; text-decoration: none; }

download-link-to-audio-player.php

<?php
/*
Plugin Name: Add Download Button
Plugin URI: http://www.meghansmithsolutions.com
GitHub Plugin URI: https://github.com/meghansmith/audio-shortcode-download-link
Description: Add a Download link to the html generated for the "audio" shortcode.
Author: Meghan Smith, original by Damien Carbery
Version: 1.0
*/


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 $html . sprintf( '<a class="btn downloadBtn" href="%s" download>Download</a>', $atts[ $extension ] );
            break;
        }
    }

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

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' => '',
  '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;
}