Blogger Book

Nel post precedente abbiamo visto come incorporare musica in un blog usando il tag `<audio>` e video con il tag `<video>`.
Ora vedremo come creare un piccolo player per riprodurre più brani in HTML5; ovvero come creare una playlist con l' elemento `<audio>` .

Si tratta di un semplice lettore MP3 che consente di aggiungere più brani in loop, in modo che, al termine di un brano, si passi automaticamente al successivo. L'unico problema è che supporta solo file MP3, quindi non funziona con il browser Opera. Non funziona con altri browser che supportano l'elemento <audio>.
Potete vederlo in azione proprio qui, premendo play o selezionando un brano dall'elenco.

 

Potrebbe sembrare complicato, ma non lo è. Infatti, lo script che utilizza è molto breve; è praticamente tutto CSS.
Per aggiungere questo lettore multi-canzone al tuo blog, vai su Modello | Modifica HTML e aggiungi quanto segue prima di </body> :

<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('terminato',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('attivo').siblings().removeClass('attivo');audio[0].load();audio[0].play()}
//]]>
</script>

Se nel tuo modello è già presente jQuery, ometti la prima riga.

Quindi, proprio lì nella sezione Modifica HTML, cerca il tag ]]></b:skin> e incolla gli stili prima di esso:

#playlist, #player {
width: 400px; /* Larghezza dell'intero contenitore */
padding: 20px;
margin: 0 self;
display: block;
text-align: center;
}
#player {
/* Immagine di sfondo del primo contenitore */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG96BQhMBfCwMZQaahM2xrX9ZKPbu8qJcZQ9udzl9zBE6j 7aE2fQwFaclS3odB-MqVeJm4asqmzZlJU-ZU6-ag4mkBLUZchr1h019-zA6BJ4Afofb7vKZmV4SsWATfZRMFajCZzuE6p0o/s300/bg.png);
padding: 10px 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
audio {
width:300px; /* Larghezza del lettore */
margin:0 auto;
display: inline-block
}
#player:after {
/* Immagine animata */
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAlqm-TzZLNXZNwmHNCGm3EBv1RDo9wJWIAGv3SYi_kSRQwt9P piDLhCYkNKWcaedpa098suJaxGIzCEdgzgCc3ATSXoAKTeCeOjosPoI0ILe86NBLWE59CI_niFgNQbFG0jQcUJLhcnI/s75/equalizador.gif);
padding-left: 10px;
}
#playlist {
margin: 0 auto 20px auto;
display: block;
background: #424242; /* Sfondo del secondo contenitore */
border-top: 5px solid #9F111B;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-align: left;
font-size: 12px; /* Stili dei caratteri */
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
}
#playlist li, #playlist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#playlist li a {
color: #CCC; /* Colore del brano */
background: #222; /* Sfondo del brano */
padding: 7px 5px;
display: block;
padding-left: 10px;
decorazione del testo: nessuno;
}
#playlist li a:hover{
background: #9F111B; /* Colore di sfondo al passaggio del mouse */
text-decoration: none;
}
#playlist .active a {
color: #B11623; /* Colore del brano attivo */
font-style: italic;
text-decoration: none;
}
#playlist .active a:before {
content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#playlist .active a:hover {
color: #222; /* Colore del brano attivo al passaggio del mouse */
}

Infine, in un gadget HTML/Javascript o in un post del blog, aggiungi la seguente struttura:

<div id='player'>
<audio controls='' id='audio' preload='auto' tabindex='0' type='audio/mpeg'>
<source src=' URL del primo brano ' type='audio/mp3'/>
Ciao, il tuo browser non è aggiornato e non può visualizzare questo contenuto.
</audio>
</div>
<ul id='playlist'>
<li class='active'> <a href=' URL del primo brano '> Nome del primo brano </a></li>
<li> <a href=' URL del secondo brano '> Nome del secondo brano </a></li>
<li> <a href=' URL del terzo brano '> Nome del terzo brano </a></li>
</ul>

Lì dovrai inserire gli URL dei tuoi brani dove indicato in rosso . Nota che l'URL del primo brano viene aggiunto due volte, una volta nel player e una volta nella playlist. Tutti gli URL dei brani devono essere in formato MP3. Aggiungi i titoli dei brani
in blu
. Se desideri personalizzarli, puoi farlo seguendo le istruzioni in verde , dove vedrai come modificare dimensioni, colori, sfondi, ecc.
L'immagine dell'equalizzatore è una GIF animata; puoi rimuoverla se ritieni che sia troppo appariscente, oppure puoi sostituirla con il logo del tuo blog o qualsiasi altra immagine.
Per aggiungere altri brani, aggiungi semplicemente una riga come questa prima del tag di chiusura </ul> per ogni brano aggiuntivo che desideri aggiungere al player:

<li> <a href=' URL dell'altra canzone '> Nome dell'altra canzone </a></li>

E se volessi creare un lettore video utilizzando l' elemento <video> , in modo simile in HTML5, allora dovresti aggiungere questo codice prima di </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
var video;var vplaylist;var vtracks;var vcurrent;initvideo();function initvideo(){vcurrent=0;video=$('video');vplaylist=$('#vplaylist');vtracks=vplaylist.find('li a');vlen=vtracks.length-1;video[0].volume=1;vplaylist.find('a').click(function(e){e.preventDefault();link=$(this);vcurrent=link.parent().index();runvideo(link,video[0])});video[0].a ddEventListener('terminato',function(e){vcurrent++;if(vcurrent>vlen){vcurrent=0;link=vplaylist.find('a')[0]}else{link=vplaylist.find('a')[vcurrent]}runvideo($(link),video[0])})}function runvideo(link,player){player.src=link.attr('href');par=link.parent();par.addClass('attivo').siblings().removeClass('attivo');video[0].load();video[0].play()}
//]]>
</script>

Allo stesso modo, ometti la prima riga se hai già jQuery nel tuo template.
Quindi, prima di ]]></b:skin>, aggiungi gli stili:

#vplaylist, #vplayer {
width: 400px; /* Larghezza dell'intero contenitore */
padding: 20px;
margin: 0 self;
display: block;
text-align: center;
}
#vplayer {
padding: 10px 20px;
background: #000; /* Primo colore di sfondo del contenitore */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
video {
width:400px; /* Larghezza del lettore */
padding-top: 10px;
margin:0 self;
display: inline-block
}
#vplaylist {
margin: 0 auto 20px auto;
display: block;
background: #424242; /* Colore di sfondo del secondo contenitore */
border-top: 5px solid #9F111B;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-align: left;
font-size: 12px;
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
}
#vplaylist li, #vplaylist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#vplaylist li a:hover{
background: #9F111B; /* Colore di sfondo al passaggio del mouse */
text-decoration: none;
}
#vplaylist .active a {
color: #B11623; /* Colore del brano attivo */
font-style: italic;
text-decoration: none;
}
#vplaylist .active a:before {
content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#vplaylist .active a:hover {
color: #222; /* Colore del brano attivo quando si passa il mouse sopra */
}

E infine, aggiungi questo al tuo gadget o al post del blog:

<div id='vplayer'>
<video controls='' height='224' width='400' id='video' preload='auto' tabindex='0' type='video/mp4'>
<source src=' URL del primo video ' type='video/mp4'/>
Ciao, il tuo browser non è aggiornato e non può visualizzare questo contenuto.
</video>
</div>
<ul id='vplaylist'>
<li class='active'> <a href=' URL del primo video '> Nome del primo video </a></li>
<li> <a href=' URL del secondo video '> Nome del secondo video </a></li>
<li> <a href=' URL del terzo video '> Nome del terzo video </a></li>
</ul>

Lì dovrai anche modificare gli URL dei video in rosso, ma questa volta i file saranno in formato MP4 . Allo stesso modo, l'URL del primo video appare due volte.
I nomi dei video vengono modificati nella sezione blu . In grassetto, vedrai dove modificare le dimensioni del player.
Per aggiungere altri video, dovrai anche aggiungere una riga come questa prima del tag di chiusura </ul> :

<li> <a href=' URL dell'altro video '> Nome dell'altro video </a></li>

Il risultato sarà questo:

In questo modo potrai avere un lettore audio o video con una playlist HTML5 . L'unico problema sarà con il browser Opera, ma tutti gli altri browser moderni funzioneranno senza problemi.

fonte