WordPress: player musicale per il sito

Odio quei siti web in cui, appena “atterrati”, si viene accolti da una musichetta midi fastidiosissima che, nei casi più patologici, non si può neanche spegnere.

Intendiamoci, amo la musica in tutte le sue manifestazioni più diverse (che sia entro le sette note, però :D) e allora, se arriva un momento in cui il web designer deve accettare alcuni compromessi, la cosa va fatta bene, deve risultare gradevole e non infastidire.

E’ il caso di un Cliente che, pochi giorni addietro, mi ha fatto la fatidica domanda:

“Vorrei la musica sul sito, si può fare?”

In realtà, le domande erano due, nel “pacchetto” era compresa la installazione della “famigerata” ’iconcina per le statistiche delle visite, a quella ho detto no e basta.

Alla domanda “musicale” ho risposto alla stessa maniera della seconda, istintivamente.

Poi ho capito che ci teneva sul serio e allora ho fatto diversi esperimenti.

 

Uno di questi è Stratus , un player musicale:

si installa in fondo alla pagina e, se settato a dovere, può fare la sua figura senza dare l’impressione di un ritorno alle musichette midi anni 90.

Installarlo è semplice come per tutti i plugin di WordPress:

1) Dalla Bacheca clic su Plugin -> Aggiungi nuovo, cercate Stratus e seguite la procedura di installazione.

2) Scaricate il plugin dalla repository di WordPress, cercando Stratus, e via SFTP caricatelo nella cartella plugin.

Fatto questo, attiviamo Stratus e andiamo alla pagina delle impostazioni.

Il pannello è molto scarno ma è quello che ci serve:

per provare subito il plugin vi consiglio di copiare e incollare il codice di esempio a disposizione nella pagina, ricaricare il sito e vedere che effetto vi fa.

 

Dopo aver ascoltato un pezzettino di Foo Fighters (se avete inserito il codice in basso il link è ad un loro brano), possiamo modificare alcuni parametri a nostro piacimento:

color: serve a cambiare il background del bottone play/pause

auto_play: true o false per far partire la musica automaticamente o meno

download: con il parametro settato a true, comparirà un bottone per il download della musica

random: true o false per l’ordine casuale dei brani

Ci sono altri parametri che potrete divertirvi a modificare alla pagina di Stratus.:

uno di questi è l’impostazione dei brani musicali.

Bisogna premettere che Stratus è legato a Sound Cloud, e che registrandovi al sito (ci vogliono due minuti) potrete creare le playlists che preferite con musica di tutti i generi, quindi sbizzarritevi.
Tra i parametri che vedete nella riga della pagina configurazione del plugin leggiamo

links: ‘http://soundcloud.com/foofighters/sets/wasting-light’

Questo è il parametro più importante, ovvero la musica che ascolteremo.
Per cambiarla, andiamo su Soundcloud, scegliamo una playlist oppure creiamone una, dopo copiate il link della pagina dalla barra degli indirizzi e sostituitelo con quello all’interno dei parametri di base di Stratus:

questo è un set che ho creato adesso, ma serve solo come esempio e per capire la struttura:

https://soundcloud.com/eugenio-corrao/sets

quindi inserirò  l’ indirizzo in questo modo:

da

color: '000000', links: 'http://soundcloud.com/foofighters/sets/wasting-light'

a

color: '000000', links: 'https://soundcloud.com/eugenio-corrao/sets'

adesso la vostra musica è a disposizione dei vostri visitatori 🙂

Una delle cose più intriganti è che si può, con un po’ di perizia, modificare il file css del player.

Per farlo bisogna scrivere e salvare il proprio css e indicare nei parametri del plugin la posizione del file css.

Supponiamo che io voglia il player largo il 50% della pagina  perché da un lato ho inserito i credits e non voglio coprirli.

Bisogna sovrascrivere alcuni attributi del foglio di stile di Stratus.

Creiamo un nostro css, inseriamo queste righe:

#stratus #player {

width: 50% !important;

opacity:0.7;

filter:alpha(opacity=70); /* Per IE8 e precedenti */

}

salviamo con il nome che preferiamo e carichiamolo sul nostro server (va bene qualsiasi posizione, a patto che la ricordiamo).

A questo punto ci basterà inserire tra i parametri del plugin

theme:’http://indirizzo-sito-web/foglio-di-stile.css’

salvare e, dopo un po’ (dipende dal server) avremo il nostro player Stratus che occuperà la metà del fondo della pagina, lasciando visibili i credits.

Bonus Tip: all’indirizzo http://stratus.sc/themes/dark.css trovate la versione scura del css, sicuramente d’effetto:

inserite questo indirizzo tra i parametri di Stratus player e farete la vostra bella figura.

Ah, dimenticavo: “se dovessi passare dai vostri siti, evitatemi l’autoplay in true, per cortesia :D”