Botão de download para o reprodutor de áudio wp

3

Gostaria de adicionar um botão de download ao player de áudio principal do wp (mediaelement.js).

Como posso fazer isso simplesmente? Alguma sugestão?

    
por mahdiar 19.04.2014 / 10:12

2 respostas

8

Como usar um modelo de lista de reprodução personalizado:

Você pode substituir o modelo de lista de reprodução por seu próprio modelo:

/**
 * Remove the native playlist template and load our custom template
 * @link http://wordpress.stackexchange.com/q/141767/26350
 */

add_action( 'wp_playlist_scripts', 'wpse_141767_wp_playlist_scripts' );

function wpse_141767_wp_playlist_scripts()
{
    remove_action( 'wp_footer', 'wp_underscore_playlist_templates', 0 );
    add_action( 'wp_footer', 'wpse_141767_wp_underscore_playlist_templates', 0 );
}

em que nosso modelo modificado é definido como:

/**
 * Our custom playlist template.
 */

function wpse_141767_wp_underscore_playlist_templates() {
?>
<script type="text/html" id="tmpl-wp-playlist-current-item">
        <# if ( data.image ) { #>
        <img src="{{ data.thumb.src }}"/>
        <# } #>
        <div class="wp-playlist-caption">
                <span class="wp-playlist-item-meta wp-playlist-item-title">&#8220;{{ data.title }}&#8221;</span>
                <# if ( data.meta.album ) { #><span class="wp-playlist-item-meta wp-playlist-item-album">{{ data.meta.album }}</span><# } #>
                <# if ( data.meta.artist ) { #><span class="wp-playlist-item-meta wp-playlist-item-artist">{{ data.meta.artist }}</span><# } #>
        </div>
</script>
<script type="text/html" id="tmpl-wp-playlist-item">
        <div class="wp-playlist-item">
                <a class="wp-playlist-caption" href="{{ data.src }}">
                        {{ data.index ? ( data.index + '. ' ) : '' }}
                        <# if ( data.caption ) { #>
                                {{ data.caption }}
                        <# } else { #>
                                <span class="wp-playlist-item-title">&#8220;{{{ data.title }}}&#8221;</span>
                                <# if ( data.artists && data.meta.artist ) { #>
                                <span class="wp-playlist-item-artist"> &mdash; {{ data.meta.artist }}</span>
                                <# } #>
                        <# } #>
                </a>
                <# if ( data.meta.length_formatted ) { #>
                <div class="wp-playlist-item-length">{{ data.meta.length_formatted }}</div>
                <# } #>             
        </div>

        <!-- BEGIN CHANGES -->
           <a href="{{ data.src }}" class="wpse-download" download="">download</a>
        <!-- END CHANGES -->

</script>
<?php
}

onde adicionamos essa parte no final:

<!-- BEGIN CHANGES -->
   (<a href="{{ data.src }}" class="wpse-download" download="">download</a>)
<!-- END CHANGES -->

Você também pode precisar adicionar um URL especial para fazer o download dos arquivos.

O motivo pelo qual eu não o adicionei dentro do seletor div.wp-playlist-item é que tudo que é clicado dentro dele iniciará o player. O motivo é essa parte do arquivo /wp-includes/js/mediaelement/wp-playlist.js :

events : {
    'click .wp-playlist-item' : 'clickTrack',
    'click .wp-playlist-next' : 'next',
    'click .wp-playlist-prev' : 'prev'
},

clickTrack : function (e) {
    e.preventDefault();

    this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );
    this.setCurrent();
},

Veja a captura de tela do nosso modelo de lista de reprodução modificado em ação:

VocêpodeexperimentarumCSSpersonalizadoparamodificarissodeacordocomsuasnecessidades.

Aquiestáumtipodehack,quepodeprecisardeajustes,dependendodotemaatual:

<style>.wpse-download{margin-top:-22px;margin-left:-16px;position:absolute;}.wp-playlist{padding:25px;}</style>

com:

<!--BEGINCHANGES--><ahref="{{ data.src }}" class="wpse-download" download="">
        <i class="fa fa-download" aria-hidden="true"></i>
    </a>
<!-- END CHANGES -->

na presença de Font Awesome .

Outraspersonalizações:

Vocêtambémpodeconsiderarenfileirarsuaprópriaversãodoarquivowp-playlist.jsnoqualsubstitui:

'click.wp-playlist-item':'clickTrack',

comporexemplo:

'clicka.wp-playlist-item-caption':'clickTrack',

parapoderterolinkdedownloadnamesmalinhadotítulodamúsica.

Atualização:

Atualizouascapturasdetelaeadicionououtroexemplo.

Paragarantirqueodownloaddoarquivonãosejaexibidononavegador,podemosusaroatributodownloadlink.Atualizeiotextoacimacom:

(<ahref="{{ data.src }}" download="">download</a>)

Parece que o valor vazio irá baixá-lo como nome de arquivo atual.

    
por birgire 01.05.2014 / 01:08
0
<script>
/**
 * Our custom playlist template for mp3 download'.
 */
function wpse_141767_wp_underscore_playlist_templates() {
?>
<script type="text/html" id="tmpl-wp-playlist-current-item">
        <# if ( data.image ) { #>
        <img src="{{ data.thumb.src }}"/>
        <# } #>
        <div class="wp-playlist-caption">
                <span class="wp-playlist-item-meta wp-playlist-item-title">&#8220;{{ data.title }}&#8221;</span>
                <# if ( data.meta.album ) { #><span class="wp-playlist-item-meta wp-playlist-item-album">{{ data.meta.album }}</span><# } #>
                <# if ( data.meta.artist ) { #><span class="wp-playlist-item-meta wp-playlist-item-artist">{{ data.meta.artist }}</span><# } #>
        </div>
</script>
<script type="text/html" id="tmpl-wp-playlist-item">
        <div class="wp-playlist-item">
                <a class="wp-playlist-caption" href="{{ data.src }}">
                        {{ data.index ? ( data.index + '. ' ) : '' }}
                        <# if ( data.caption ) { #>
                                {{ data.caption }}
                        <# } else { #>
                                <span class="wp-playlist-item-title">&#8220;{{{ data.title }}}&#8221;</span>
                                <# if ( data.artists && data.meta.artist ) { #>
                                <span class="wp-playlist-item-artist"> &mdash; {{ data.meta.artist }}</span>
                                <# } #>
                        <# } #>
                </a>
                <# if ( data.meta.length_formatted ) { #>
<div class="wp-playlist-item-length">
<span>
            (<a href="{{ data.src }}"><i class="fa fa-download" title="Download" aria-hidden="true"></i></a>)
        </span>{{ data.meta.length_formatted }}</div>
                <# } #>             
        </div>
</script>
<?php
}
</script>
    
por KEGBE Charles 10.11.2017 / 18:35

Tags