Come installare un player audio con playlist in Blogger.

Come installare un player audio in HTML5 che permetta la riproduzione di una playlist con un numero indefinito di canzoni caricate online.

Gli utenti di Blogger che amavano inserire nel proprio sito un player audio per riprodurre brani musicali o di altro genere utilizzavano l’eccellente player fornito da Yahoo che però non funziona più da mesi vista la ristrutturazione dell’azienda portata avanti dal nuovo management.

Abbiamo già visto come attraverso l’HTML5 si possa in modo molto semplice mostrare un riproduttore audio e video nelle pagine del blog. Questi player sono visibili solo con i browser che supportano questa tecnologia che però attualmente sono praticamente tutti visto che anche Internet Explorer delle ultime versioni è compatibile con l’HTML5. Solo chi abbia un vecchio Windows Vista e continui a usare le vecchie versioni di IE rimane tagliato fuori da questa nuova funzionalità.

Un player audio in MP3 può essere inserito in un post o in un widget utilizzando questo codice

<audio controls>
<source src="URL del brano MP3" type="audio/mpeg">
Il tuo browser non supporta HTML5.
</audio>

dove si deve incollare l’URL del link diretto all’audio MP3 e dove la frase in blu viene visualizzata solo da chi abbia un browser che non supporti l’HTML5 e può essere sostituita o soppressa. Vediamo adesso come si possa creare un player audio che riproduca tutta una playlist di brani musicali o anche no tra cui il lettore possa navigare per riprodurre il pezzo desiderato e eventualmente metterlo in pausa.

Nella demo ho usato sei brani ma se ne possono mettere quanti se ne vuole



Vediamo passo per passo come procedere per installare questo Player MP3 in HTML5.

CARICARE I FILE NEL WEB PER GLI HOTLINK

Si possono usare brani musicali già presenti in rete cercando in quei siti che offrono anche il link diretto alle canzoni. Se invece si vogliono utilizzare dei nostri file audio dovremo caricarli su un hosting che ci permetta di avere l’hotlink. Si può usare la cartella Public di Dropbox oppure utilizzare la funzionalità Schedario di Google Sites. Visto però le ultime funzioni introdotte è forse consigliabile caricare i brani musicali su Google Drive facendo comunque sempre attenzione a eventuali problemi di copyright.

Dopo aver creato una cartella e averci cliccato sopra con il destro del mouse per  denotarla come Pubblica si passa a caricare i file andando sulla icona di Upload

Dopo aver completato l’upload si va su Dettagli e si apre il link sotto HOSTING

Si tratta di un URL che termina con .mp3 e che dà l’indirizzo del file caricato. Dobbiamo ripetere questa procedura per tutti i brani  che vogliamo caricare e prendere nota di tutti gli URL.

MODIFICARE IL MODELLO

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </body>. Subito sopra a questa si incolla il seguente 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 parte evidenziata di giallo è JQuery aggiornata all’ultima versione. Nel caso fosse già presente nel modello si può evitare di inserirla. Si cerca quindi la riga ]]></b:skin> e subito sopra si incolla questo nuovo codice

/* 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: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
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 */}

Nei commenti colorati di verde sono indicati alcuni dei più importanti parametri da personalizzare se lo riteniamo opportuno almeno per quello che riguarda i codici dei colori. Si salva il modello.

POSIZIONAMENTO DEL PLAYER

Il codice proposto prevede una larghezza del player audio di 400 pixel quindi può essere inserito nel footer oppure subito sopra l’area del post. In ogni caso si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla un codice come il seguente

<div id='player'>
<audio controls='' id='audio' preload='auto' tabindex='0' type='audio/mpeg'>
<source src='URL del primo brano' type='audio/mp3'/>
Il tuo browser non supporta HTML5.
</source></audio>
</div>
<ul id='playlist'>
<li class='active'><a href='URL del primo 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>

Come vedete l’URL del primo brano va inserito due volte. Se si vogliono inserire più di 6 brani basta aggiungere prima del tag </ul> una riga come questa

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

In caso di nessun intervento da parte del lettore ci sarà la riproduzione di tutti i brani della playlist uno di seguito all'altro senza soluzione di continuità.
Fonti | Last Rose e  Ciudad Blogger -