Inserire un jukebox nel proprio sito in una pop up- di Eliana Argenti e Tommaso Bientinesi

CREARE UN JUKEBOX IN UNA POP UP

Riprodurre musica in una pop up consente all'utente di ascoltare un brano anche navigando su alre pagine.

Questo effetto non si può ottenere con il semplice HTML, ma bisogna usare il linguaggio JavaScript. Innanzitutto impareremo a scegliere e riprodurre in una finestra esterna una musica da una lista. Per problemi di spazio abbiamo preparato l'esempio con dei files midi e con un solo MP3.

Visualizza l'esempio

PASSO UNO

Preparare una pagina HTML che si aprirà come finestra esterna. Al suo interno inserire il codice sotto riportato, e salvarla con il nome "jukebox.htm".

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function suona(brano)
{
var lista='<embed src="http://www.webfract.it/GUIDA/' + brano + '" hidden=true loop=true autostart=true volume=70>';
if(document.all)
{
document.all('musica').innerHTML=lista;
}
else if(document.getElementById){
document.getElementById("musica").innerHTML = lista
}
 else {
alert("il tuo browser non supporta questo metodo")
}
}
</script>
</head>
<body bgcolor="#f1f1a1"><span id="musica"></span><p align=center><table border=1 width=107>
<tr><td>
<img src="http://www.webfract.it/GUIDA/jukebox.jpg" width=107 height=63>
<tr><td><p align=center><b>SCEGLI<form name="mioForm"><select name="elenco" onChange="suona(window.document.mioForm.elenco.options[selectedIndex].value)">
<option selected value="none">  Muto
<option value="rock.mid">  Rock
<option value="GMASOCK.MID">  Gmasock
<option value="anno.mid">  Anno
<option value="jamesbond.mid">  Jamesbond 
<option value="demo.mp3">  Demo.mp3
</select>
</form>
</table></p>
</body>
</html>

Spiegazioni

NOTA BENE

Sostituire, al posto della lista di titoli 'rock.mid', 'GMASOCK.MID','anno.mid', 'jamesbond.mid', i propri brani ed inoltre sostituire, al posto di <embed src =http://www.webfract.it/GUIDA/' l'URL completo dei propri brani.
Immagine jukeBox Nel nostro jukebox abbiamo inserito una piccola immagine, dal nome "jukebox.jpg": se vi piace, potete usarla gratuitamente, ma vi preghiamo di salvarla sul vostro server e di usare, per visualizzarla, il vostro URL. L'immagine è visualizzata a destra nella pagina: per salvarla, cliccateci sopra con il tasto destro del mouse.

PASSO DUE

Inserire fra i tags <HEAD> e </HEAD> del documento dal quale deve essere richiamata la pagina il seguente codice:
<script language=JavaScript> function apri() { finestra=window.open('jukebox.htm','ciao','width=144,height=250') } </script>

Richiamare l'apertura della finestra mediante il seguente codice, da inserire nel corpo del testo nel punto che si preferisce:

<a href="javascript: apri()">JUKEBOX</a> se si vuole aprire la finestra attraverso una parola calda;
<input type=button value="JUKEBOX" OnClick="javascript: apri()"> se si preferisce un bottone tipo questo:
<a href="javascript: apri()"><img src="jukebox.jpg" width=107 height=63 alt="JUKEBOX"> </a> se si preferisce aprire il collegamento mediante un'immagine come nell'esempio. La nostra immagine può essere salvata cliccandovi sopra con il tasto destro del mouse e scegliendo l'opzione "Salva immagine con nome...". Siete pregati, in tal caso, di inserire un link al nostro sito.

Per varie opzioni di apertura delle finestre cliccare qui
Per approfondimenti sugli attributi delle immagini cliccare qui