7 - La musica nel sito web

La musica nel sito web
Alcuni webmaster sentono l’esigenza di vivacizzare il proprio sito web attraverso l’utilizzo di una musica di
sottofondo o persino di una playlist. Navigando per la rete potete trovare moltissimi siti che vi permettono
di creare delle playlist, personalmente vi consiglio i servizi offerti da http://www.myflashfetish.com/ che
ora trovate a http://www.mixpod.com/ e che vi permette di creare una playlist con i brani presenti nel sito
e poi di ottenere il codice da inserire nel vostro sito web, vediamo come:
1) Per prima cosa colleghiamoci a MyFlashFetish e creiamo un account gratuito
2) Selezioniamo “MyPlaylist” e da lì clicchiamo su “New Playlist”
Guida creata da marte9020 per http://jimding3.jimdo.com
Pagina 1
3) Scegliamo la grafica per il nostro lettore e selezioniamo i brani da riprodurre con “Create a Playlist”
4) Ora clicchiamo su “Save Playlist” e compiliamo il formulario e premiamo “Save and get code”
Guida creata da marte9020 per http://jimding3.jimdo.com
Pagina 2
5) Copiamo il codice “embed code” fornito nella categoria “Other sites”
6) Andiamo nel nostro sito, creiamo un nuovo modulo “Widget/HTML” ed incolliamoci il codice
Guida creata da marte9020 per http://jimding3.jimdo.com
Pagina 3
7) Una volta cliccato su “Salvare” avremo il nostro player nel sito
Il problema di questo metodo è che la playlist viene salvata nella pagina a cui la applicate. Anche se la
aggiungete alla sidebar (sotto la pubblicità di Jimdo) durante la navigazione cambiando sezione la musica
verrà interrotta e inizierà da capo. La soluzione al problema è stata fornita nel forum di Jimdo da Symone
Trimarchi (http://www.browsym.com/) e consiste nella creazione di una finestra di PopUp che viene aperta
e consente la riproduzione anche mentre si cambioa pagina, il problema a cui si va incontro è che alcuni
browser possono impedire l’apertura dei PopUp. Il metodo comunque è questo:
1) Creiamo un nuovo modulo “Widget/HTML” e posizioniamolo nel nostro sito web. L’ideale è
metterlo nella sidebar, in questo modo infatti i visitatori potranno accedervi anche in pagine
diverse
Guida creata da marte9020 per http://jimding3.jimdo.com
Pagina 4
2) Incolliamo questo codice nella casella dell’HTML
<script language="JavaScript" type="text/javascript">
//<![CDATA[
function expandingWindow(website) {
var windowprops='width=80%,height=80%,scrollbars=yes,toolbar=no,status=no,location=no,menubar=no,fullscreen=no,resizable=yes'
var heightspeed = 80; // vertical scrolling speed (higher = slower)
var widthspeed = 60; // horizontal scrolling speed (higher = slower)
var leftdist = 860; // distance to left edge of window
var topdist = 500; // distance to top edge of window
if (window.resizeTo&&navigator.userAgent.indexOf("Opera")==-1) {
var winwidth = window.screen.availWidth - leftdist;
var winheight = window.screen.availHeight - topdist;
var sizer = window.open("","","left=" + leftdist + ",top=" + topdist +","+ windowprops);
for (sizeheight = 1; sizeheight < winheight; sizeheight += heightspeed)
sizer.resizeTo("0", sizeheight);
for (sizewidth = 0; sizewidth < winwidth; sizewidth += widthspeed)
sizer.resizeTo(sizewidth, sizeheight);
sizer.location = website;
}
else
window.open(website,'mywindow');
}
// End -->
//]]>
</script><!-- Step 2: Then, set up your corresponding links using the below HTML codes as examples: -->
<!-- set up your links, either via text links or form buttons-->
<form>
<p align="center"><input type="button" value="Testo del pulsante" onclick="expandingWindow('indirizzo playlist')" /></p>
</form>
<!-- END OF SCRIPT -->
Guida creata da marte9020 per http://jimding3.jimdo.com
Pagina 5
3) All’interno del codice andiamo a modificare i campi “Frase da far apparire nel pulsante” con la
frase che volete far visualizzare nel pulsante che aprirà la finestra di PopUp e “Indirizzo tua
playlist” con l’indirizzo diretto della playlist che potete vedere nell’immagine da dove viene
prelevato. Attenzione a non eliminare gli apostrofi che delimitano nel codice del lettore l’indirizzo
della playlist
4) Premendo “Salvare” possiamo vedere il risultato. Per testarlo andiamo in modalità “Anteprima”
Guida creata da marte9020 per http://jimding3.jimdo.com
Pagina 6
In questo modo il lettore sarà attivabile in ogni pagina e solo da chi vuole ascoltare la musica. Analizziamo
ora altri due metodi per inserire la musica, anche in questo caso i lettori vengono interrotti durante la
navigazione, ma sono l’ideale per chi vuole caricare dei suoi brani senza farli scaricare da altri utenti, utile
ad esempio per musicisti, DJ, ecc...
Il primo player è il diffuso “Yahoo Player”, non necessita di alcun tipo di registrazione o costo, però
dobbiamo affidarci ad un sito di file-hosting, personalmente vi consiglio http://www.archive-host.com/ che
è in francese però offre spazio gratuito dopo una iscrizione, sarà proprio questo che userò per la guida
1) Colleghiamoci a http://www.archive-host.com/ e creiamo un account gratuito attraverso la voce
“Iscription”
2) Una volta iscritti colleghiamoci al pannello di controllo attraverso “Connexion au Panel”
Guida creata da marte9020 per http://jimding3.jimdo.com
Pagina 7
3) Grazie a questo archivio possiamo caricare on-line qualsiasi tipo di file. Nel caso specifico ci
interessa la musica, clicchiamo quindi su “Mes Musiques” e attendiamo il caricamento della nuova
pagina
4) Per caricare il file desiderato selezioniamo “Ajouter des fichies”
Guida creata da marte9020 per http://jimding3.jimdo.com
Pagina 8
5) Nella finestra successiva ci viene chiesto di selezionare un metodo di caricamento, clicchiamo su
“Version de base”
6) La pagina verrà modificata, selezioniamo il file da caricare e clicchiamo sul pulsante “Ajouter”
Guida creata da marte9020 per http://jimding3.jimdo.com
Pagina 9
7) Una volta terminato clicchiamo su “Mes Musiques”
8) Clicchiamo sul file desiderato e si aprirà una pagina piena di codici, per il momento lasciamola
aperta in una scheda ed andiamo nel nostro sito web
Guida creata da marte9020 per http://jimding3.jimdo.com
Pagina 10
9) Creiamo un nuovo modulo “Widget/HTML” ed inseriamoci questo codice
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script><br /><a
href="indirizzo tua canzone">Titolo della canzone
10) Andiamo nella scheda con i codici del file e selezioniamo il link chiamato “Principal”
11) Incolliamo il link al posto della voce “Indirizzo tua canzone” e al posto della voce “Titolo della
canzone” inseriamo il nome del brano
Guida creata da marte9020 per http://jimding3.jimdo.com
Pagina 11
12) Fatto questo una volta premuto “Salvare” andiamo in modalità “Anteprima” per visualizzare il
risultato
Con questo metodo la canzone viene riprodotta solamente quando ci si clicca. Passiamo ora a vedere una
versione complementare, i primi passaggi sono identici ai precedenti perchè consistono nel caricare il file
all’interno di ArchiveHost, quindi passo subito alla parte del codice
1) Andiamo ad inserire in un modulo “widget/html” questo codice
<embed wmode="transparent" src="Indirizzo tua canzone" width="140" height="40" autostart="true"
loop="FALSE" />
Guida creata da marte9020 per http://jimding3.jimdo.com
Pagina 12
2) Al posto di “Indirizzo della canzone” inseriamo l’indirizzo fornito da ArchiveHost e premiamo su
“Salvare”
Con questa soluzione possiamo inserire il player e modificarne le dimensioni attraverso i campi “Width” ed
“Height”, inoltre possiamo impostare l’avvio automatico attraverso la voce “Autostart” impostando
“autostart=on” e la funzione di loop impostando “loop=on”
Questi sono alcuni dei metodi più utilizzati per riprodurre musica nel proprio sito web, ovviamente volendo
potete anche combinare le soluzioni, infatti il codice fornito da Symone Trimarchi funziona con qualsiasi
sito web
Guida creata da marte9020 per http://jimding3.jimdo.com
Pagina 13