Blogger Book

Quando aggiungiamo musica al nostro blog, ci imbattiamo in un problema: non viene riprodotta sui dispositivi mobili. Lo stesso può accadere con alcuni video. Questo perché i blog utilizzano spesso lettori basati su Flash per riprodurre musica (o video) e la maggior parte dei dispositivi mobili non supporta questo formato.

Per alcuni, questo può essere molto frustrante, e ciò è comprensibile considerando che oggigiorno un gran numero di utenti naviga da telefoni o tablet, quindi coloro che hanno un podcast o della musica sul proprio blog si ritroveranno con un gran numero di visitatori delusi perché non potranno ascoltare i contenuti.

La soluzione? Usare HTML5

Uno dei tanti vantaggi che HTML5 ci offre è la possibilità di utilizzare due tag per riprodurre audio o video, che sono a loro volta <audio> e <video> .

Questi elementi sono supportati da tutti i browser moderni, compresi quelli per dispositivi mobili, ad eccezione di Internet Explorer 8 e versioni precedenti.

Il suo utilizzo è molto semplice, basta aggiungere il tag <audio> e il tag <source> che è la fonte da cui viene preso l'indirizzo del file multimediale.

Il codice è il seguente:

<controlli audio>
<source src=" URL file mp3 " type="audio/mpeg">
<source src=" URL file ogg " type="audio/ogg">

Ciao utente di Internet Explorer! Se avessi un browser moderno staresti ascoltando una bellissima canzone invece di leggere questo :(
</audio>

Lì devi aggiungere l'URL del tuo brano in formato MP3 e un altro URL dello stesso brano ma in formato OGG . Questo perché alcuni browser non supportano ancora il formato MP3, in particolare Opera, anche se, per quanto ne so, Firefox supporta MP3 dalla versione 21.

Esistono diversi programmi per PC e Mac che convertono file audio e video in formato OGG, ma ci sono anche diversi siti online che lo fanno; uno dei miei preferiti è media.io

 

In corsivo vedrai che abbiamo aggiunto del testo per gli utenti di browser più vecchi, poiché non saranno in grado di vedere il player ma potranno vedere il messaggio.

Ora, se vi sentite particolarmente generosi e non volete che si perdano i contenuti, potete aggiungere l' elemento `<embed>` nello stesso codice . In questo modo, gli utenti di IE8 e versioni precedenti, anche se non riescono a visualizzare il player HTML5, potranno comunque visualizzarlo tramite il plugin installato nel browser.

<controlli audio>
<source src=" URL file mp3 " type="audio/mpeg">
<source src=" URL file ogg " type="audio/ogg">
<embed src=" URL del tuo file mp3 " type="audio/mp3" width="200"
height="100"/>
</audio>

Gli attributi dell'elemento AUDIO e VIDEO sono: controlli , riproduzione automatica , loop , disattivato e precaricamento

• controlli consente di visualizzare i controlli e il lettore stesso.
• autoplay fa sì che il file venga riprodotto quando la pagina viene caricata.
• Il loop riprodurrà il file più e più volte.
• muted rimuoverà l'audio dal file.
• precarico definisce se il player deve essere caricato quando viene caricata la pagina.

Un esempio di giocatore con più attributi potrebbe apparire così:

<audio controlla il ciclo di riproduzione automatica >
<source src=" URL del file mp3 " type="audio/mpeg">
<source src=" URL del file ogg " type="audio/ogg">

 

<embed src=" URL del tuo file mp3 " type="audio/mp3" width="200"
height="100"/>
</audio>

Nel caso dell'elemento VIDEO è lo stesso, solo che qui impostiamo una larghezza e un'altezza.

<video width="320" height="240" controls>
<source src=" URL del file mp4 " type="video/mp4">
<source src=" URL del file ogv " type="video/ogg">
Ciao utente di Internet Explorer! Indovina un po'? Qui è in riproduzione un video fantastico, ma non riesci a vederlo perché il tuo browser è vecchio :(
</video>

E se si desidera fornire un supporto completo per IE, il codice dovrebbe apparire così:

<video width="320" height="240" controls>
<source src=" URL file mp4 " type="video/mp4">
<source src=" URL file ogv " type="video/ogg">
<object data=" URL file swf " width="320" height="240" type="application/x-shockwave-flash">
<param value=" URL file swf " name="movie"/>
</object>
</video>

Forse uno svantaggio dell'utilizzo di questi lettori HTML5 è la necessità di convertire i file in formati diversi, ma con così tanti strumenti di conversione disponibili, come quello che ho menzionato prima, questo problema è attenuato.
Per quanto riguarda l'aspetto, qui incontriamo un ostacolo: ogni browser visualizza il lettore in modo diverso.

Potreste pensare che potremmo migliorarlo con CSS, ma la cattiva notizia è che non è così. L'unico modo per cambiarne completamente l'aspetto è usare JavaScript. Ci sono molte opzioni disponibili online e ne condivideremo sicuramente alcune più avanti.
Per ora, quello che possiamo fare è usare una piccolissima quantità di JavaScript e CSS al di fuori del player per creare qualcosa di simile a questo:

Non è niente di speciale, ma le mie competenze informatiche non mi permettono di fare molto di più. Ciononostante, lascio il codice qui nel caso qualcuno lo volesse, ma attenzione: non funzionerà su Opera, perché aggiungeremo solo il file MP3, e su IE9 la barra di avanzamento non sarà visibile, ma verrà mostrata la percentuale di riproduzione.

<div class='player-wrapper'>
<audio id='player' src=" URL file MP3 "></audio>
<div class='player-controls'>
<div class='player-thumb'>
<img src=' URL miniatura ' />
</div>
<a onclick="document.getElementById('player').play()"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fzcCnyiN98kHXb7IwkIhh47wb4IbnOP6l5PcOPRjIvnT7s tPCLuBUQxgz_74fyNnToZkIHXb4zuNBy8UFqS86DN52NXRczS6rml4BrU8mMkxErjf2DZH0giF0s0j4q13EOPpfdvoT1oy/s28/icon_play.png' /></a>
<a onclick="document.getElementById('player').pause()"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiygUPAg16a2e_9WakB6oCpbG8pLmIUOJBPW2DLHAumbBmqvuY uQEPJ4hyVGUdUlyVSQIuz-PFpi9yHusS93H3Q6MFveBKCjc2fRQbFayIYyZO0xhLALOd25YXADib7RYnWawD9AlWG1fPD/s28/icon_pause.png' /></a>
<a onclick="document.getElementById('player').volume+=0.1"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmbHMIS7soqjU3T1kMoykD4I7beeQVMZRcWKm8mjOiCTIqqQRx ur-0To4j3gYNruNAAv3Y1MOCdBAQjVkQAuiIUb9W7-pKQPngMdhaAw8RYPoFTFKPSOx2GAS-lVoOuB4s17WXbNZPq5U9/s18/icon_increase.png' /></a>
<a onclick="document.getElementById('player').volume-=0.1"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc-07UiBGoGHRF7dmtFDCX071j6CUggBFwGHs-KhXzsuv2r1yA fDK3TPGx0MB1az6QYEwpe-n32bNLED4iLXhIekO2yp0o_kOXU-41-AhJ2iQPET5QdT6WE8d3xDO0d0ljhaDLFnVIfOsw/s18/icon_decrease.png' /></a>
<progress id='progress' max='100' value='0'><span>0</span>%</progress>
</div>
</div>
<style>
.player-wrapper {
display: table;
height: self;
width: 180px; /* Larghezza del player */
background: #FA5858; /* Colore del player */
border-radius: 13px;
position:relative;
margin: 0 self;
}
.player-thumb img {
width: 160px; /* Dimensione miniatura */
padding:10px 0;
margine: 0 self;
allineamento testo: centro;
}
.controlli del lettore {
allineamento testo: centro;
visualizzazione: cella della tabella;
allineamento verticale: centro;
padding:0 0 10px;
} margine: 0 2px;
.player-controls a {
cursore: puntatore;
cursore: mano;
}
.player-controls progress {
larghezza:75%;
altezza: 7px;
sfondo: #FFF;
colore: #484848;
margine superiore: 5px;
}
::-moz-progress-bar {background: #484848;} /* Colore di sfondo della barra di avanzamento */
::-webkit-progress-bar {background: #fff;} /* Colore di sfondo della barra di avanzamento */
::-webkit-progress-value {background: #484848;} /* Colore dell'indicatore */
</style>
<script>
var audio=document.getElementById('player');var pBar=document.getElementById('progress');audio.addEventListener('timeupdate',function(){var percent=Math.floor((100/audio.duration)*audio.currentTime);pBar.value=percent;pBar.getElementsByTagName('span')[0].innerHTML=percent},false);
</script>

Usare HTML5 per incorporare l'audio mi sembra l'opzione migliore, non solo perché ci introduce nell'era moderna dell'HTML, ma anche perché evita di escludere gli utenti di dispositivi mobili. Inoltre, essendo una funzionalità nativa del browser, consuma molte meno risorse di qualsiasi altro player. E come se non bastasse, può essere utilizzato anche per lo streaming audio o, come molti sanno, per la radio in diretta .

NetMix FM Blues Train

fonte