Musica di sottofondo nel blog con pulsanti Play e Pausa.

Come inserire una riproduzione automatica musicale con pulsanti per interromperla o per ricominciare a ascoltarla.

La musica di sottofondo nei siti è una di quelle cose che non amo assolutamente. Mi rendo conto che forse sono in minoranza ma credo che ciascuno debba essere libero di ascoltare ciò che gli pare e non essere obbligato a sentire un audio preimpostato quando si trovi a leggere una pagina di un sito. Una  parziale soluzione potrebbe venire dalla introduzione di due pulsanti Play e Pausa per riprodurre la musica o per fermarla se desse fastidio.

Ricordo che per inserire un qualsiasi audio in un blog bisogna che questo sia caricato sul web un un formato adeguato, quasi sempre MP3, e che se ne possa ottenere il link diretto. I possessori di un blog gratuito del tipo Blogspot possono caricare i loro file musicali su Google Sites in modalità Schedario mentre chi ha un blog con dominio personalizzato dovrà caricare i file su Dropbox o su un dominio personale. Bisogna anche essere sempre molto attenti a non violare le leggi del copyright per non avere brutte sorprese. Attraverso i nuovo tag HTML5 è possibile creare player audio e video in modo molto semplice.

Utilizzando il tag <audio> possiamo creare un riproduttore  musicale di dimensioni 0 e quindi invisibile che però abbia la particolarità di mostrare due icone Play e Pausa con ovvio significato

Si può usare questo player audio in qualsiasi pagina web. Nello specifico in un blog su Blogger si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice

<script type="text/javascript">
function playpausa() { var snd = document.getElementById("sound"); var snd_btn = document.getElementById("sound_button"); snd.muted = !snd.muted; if(snd.muted){ snd_btn.innerHTML = "<img alt='Ferma Musica' title='Musica Fermata' src='https://lh3.googleusercontent.com/-W_KVN_x6gS4/UpihVk8cdjI/AAAAAAAAlEA/cZkZwVO5YZo/s32/audio-off.png' />"; } else{ snd_btn.innerHTML = "<img alt='Riproduci' title='Riproduzione Musica' src='https://lh5.googleusercontent.com/-LWUhum7X21Q/UpihYPiIxeI/AAAAAAAAlEI/bWxo6BeE_z0/s32/audio-on.png' />"; } }
</script>
<audio autoplay="true" loop="true" width="0" height="0" id="sound" src="https://sites.google.com/site/musicafilemp3/file-musicali/Foreverland.mp3" type="audio/mp3" ></audio>
<noembed><bgsound src="music.mp3" loop="infinite"/></bgsound></noembed>
<div id='sound_button' onclick="playpausa()" ><img title='Riproduzione Musica' alt='Riproduci' src='https://lh5.googleusercontent.com/-LWUhum7X21Q/UpihYPiIxeI/AAAAAAAAlEI/bWxo6BeE_z0/s32/audio-on.png' /></div>

Si possono modificare le icone il cui URL è colorato di rosso e al posto del file audio mp3 caricato su Google Sites colorato di viola si può inserire l'URL di un nostro pezzo musicale. Su internet ci sono pure diversi siti che offrono hotlink a brani musicali di musica free.

Nella demo cliccando sulla icona Play automaticamente compare quella Pausa e la musica si stoppa. Se si clicca su Pausa la musica comincia a riprodursi di nuovo dal punto in cui era stata interrotta.