Come installare in Blogger un player che riproduce una playlist di audio MP3.

Come usare il tag audio dell'HTML5 per inserire una playlist mp3 in un post o in un widget di Blogger con pulsanti di navigazione e con o senza autoplay

Nei precedenti articoli mi sono occupato della creazione di playlist in formato m3u con VLC o con un editor di testo quale il Blocco Note. Mi duole non essere ancora riuscito a trovare un modo per pubblicare in un post una tale playlist in modo da farla riprodurre dai lettori cliccando sulla icona di un apposito player. Non è detto però che in futuro non riesca a trovare un sistema per mostrare un player con la possibilità di riprodurre playlist. Per il momento ci dobbiamo limitare a creare una playlist sotto forma di elenco e limitata ai file audio.

Abbiamo già visto che utilizzando i tag HTML5 si possono installare facilmente dei player audio e video anche in post di piattaforma Blogger. Modificando questi player e aggiungendo delle opportune regole CSS si possono creare delle playlist audio che il lettore potrà riprodurre selezionando la traccia desiderata. Nel player ci saranno i comandi per il Play/Pausa e per il controllo del volume. Inoltre si possono inserire tutti i brani che si vogliono mantenendo la stessa sintassi.

COME CARICARE ONLINE I BRANI DA RIPRODURRE

Se avete già l'indirizzo web dei brani da riprodurre allora non vi resta che passare alla sezione successiva. Se invece i file audio li avete nel computer ma ancora non sono nel web allora dovrete caricarveli. Purtroppo tra un paio di mesi Google Drive cesserà il suo servizio di hosting quindi potete scegliere se caricare i file MP3 su Google Sites o su Dropbox. La prima scelta è preferibile visto che non ha limitazioni di banda ma funziona solo per blog gratuiti del tipo blogspot. Per i domini personalizzati i file possono essere caricati anche su un nostro spazio privato.

Se si sceglie il servizio Google Sites dovremmo accedere e creare un sito statico gratuito. Si va poi in alto su Crea Pagina, se ne digita il nome e si sceglie Schedario tra i tipi di pagine. Si va poi su Aggiungi file e si selezionano i file MP3 della nostra playlist che verranno caricati online

Per trovarne il link diretto dovremmo cliccare con il destro del mouse sul pulsante Scarica 



e scegliere Copia indirizzo link. Si incollerà l'URL in un file. Avremo un indirizzo come questo

https://sites.google.com/site/musicafilemp3/playermp3/A10%20Attack%20Jet%2001_1.mp3?attredirects=0&d=1

Il link diretto del file sarà la prima parte dell'URL che termina con .mp3. Il resto colorato di rosso nell'esempio va cancellato. Si dovrà ripetere questa operazione per tutti i file caricati.

COME INSTALLARE IL PLAYER DELLA PLAYLIST IN BLOGGER

Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la riga </body> quindi, subito sopra a questa, si incolla questo codice

<!-- Playlist Audio Inizio -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
var audio;var playlist;var tracks;var current;initaudio();function initaudio(){current=0;audio=$('audio');playlist=$('#playlist');tracks=playlist.find('li a');len=tracks.length-1;audio[0].volume=1;playlist.find('a').click(function(e){e.preventDefault();link=$(this);current=link.parent().index();runaudio(link,audio[0])});audio[0].addEventListener('ended',function(e){current++;if(current>len){current=0;link=playlist.find('a')[0]}else{link=playlist.find('a')[current]}runaudio($(link),audio[0])})}function runaudio(link,player){player.src=link.attr('href');par=link.parent();par.addClass('active').siblings().removeClass('active');audio[0].load();audio[0].play()}
//]]>
</script>
<!-- Playlist Audio Fine -->

dove la riga evidenziata di giallo è jQuery e si può tralasciare se questa libreria javascript fosse già presente nel nostro modello. Successivamente si cerca la sezione <b:skin> nella prime righe del template e si clicca sulla freccetta nera posta alla sua sinistra per visualizzarne tutto il codice. Con Ctrl+F si cerca la riga ]]></b:skin> e, subito sopra a questa si incollano questi CSS

/* Aspetto del player audio */
#playlist, #player {
width: 400px; /* Larghezza del contenitore */
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#playlist {
margin: 0 auto 20px auto;
display: block;
text-align: center;
font-size: 12px; /* Dimensione caratteri */font-family: Georgia;
font-weight: normal;
}
#player {
/* Immagine di sfondo del primo contenitore */background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH5ZtHygttE6O6wjyNqx08q-Cn9IeRA56rt8b6C-_4OgDtooY3pyQ4jI4Q7wc4f7YlCdXt4pjJSbF1CyyYR-8Jx0TczcKbBs3fuvz1WwoqJ_8bFMs3fs3QdQw8Cjfdwh8WM2PoWL38nH4V/s300/sfondo.png);
padding: 10px 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
audio {
width:300px; /* Larghezza del player */
margin:0 auto;
display: inline-block
}
#player:after {
/* Immagine animata equalizzatore */content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIHxdO5TU2aJ-nwc-TrFpm-yMqzV0rXwYwKiRBuF6KNwWTiRcilMlPBdL35FMo5Fdzn8g8bLn9w7gx9mRCWhWj8yDvD_dVQQGthLAo0Q8SuTTGA5SFc5AHIkvMikcbCz83CuCQ0BQz6DtZ/s75/animata.gif);
padding-left: 10px;
}
#playlist {
background: #424242; /* Sfondo del secondo contenitore */border-top: 5px solid #9F111B;
text-align: left;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#playlist li, #playlist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#playlist li a {
color: #CCC; /* Colore del brano musicale */
background: #222; /* Sfondo del brano musicale */padding: 7px 5px;
display: block;
padding-left: 10px;
text-decoration: none;
}
#playlist li a:hover{
background: #9F111B;
/* Colore dello sfondo al passare del mouse */text-decoration: none;
}
#playlist .active a {
color: #B11623; /* Colore del brano attivo */font-style: italic;
font-weight:bold;
text-decoration: none;
}
#playlist .active a:before {
/* Icona prima del brano attivo */content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#playlist .active a:hover {
color: #222; /* Colore del brano attivo al passaggio del mouse */}

Si salva il modello. Nei commenti colorati di verde sono indicati i significati dei vari parametri. Oltre ai codici dei colori si possono modificare la famiglia dei font e le immagini di sfondo. Ho pubblicato online una dimostrazione di questo player per playlist audio

Demo
Clicca qui

INSERIMENTO DEL PLAYER IN UN WIDGET O IN UN POST

Il player può essere posizionato in una sidebar, nel footer, in un articolo o in una pagina statica. Nei primi due casi si va su Layout -> Aggiungi un gadget -> HTML/Javascript mentre negli ultimi due si apre l'Editor e si sceglie la Modalità HTML. In tutti i casi il codice da incollare è questo

<div id='player'>
<audio controls='' id='audio' preload='auto' tabindex='0' type='audio/mpeg'>
<source src='URL del 1° brano' type='audio/mp3'/>
</source></audio>
</div>
<ul id='playlist'>
<li class='active'><a href='URL del 1° brano.mp3'>Nome del 1° brano</a></li>
<li><a href='URL del 2° brano.mp3'>Nome del 2° brano</a></li>
<li><a href='URL del 3° brano.mp3'>Nome del 3° brano</a></li>
<li><a href='URL del 4° brano.mp3'>Nome del 4° brano</a></li>
<li><a href='URL del 5° brano.mp3'>Nome del 5° brano</a></li>
<li><a href='URL del 6° brano.mp3'>Nome del 6° brano</a></li>
</ul>

Gli URL dei brani sono gli indirizzi diretti dei file MP3 trovati in Google Sites, in Dropbox o in altro hosting. L'URL del primo brano va inserito due volte. Se si vogliono inserire più di 6 brani basterà aggiungere prima del tag </ul> una riga come questa per il 7° MP3

<li><a href='URL del 7° brano.mp3'>Nome del 7° brano</a></li>

Il lettore potrà cliccare sulla traccia da riprodurre. Se non c'è nessun intervento da parte del lettore i brani verranno riprodotti uno dietro l'altro senza soluzione di continuità. Volendo si può aggiungere anche l'autoplay per far iniziare la riproduzione in automatico. Per questa modifica basterà aggiungere il tag autoplay tra audio e controls nella seconda riga dell'ultimo codice.