kluster
Dio maturo
Registrato: 15/04/06 12:14
Messaggi: 2898
|
 Inviato: 17 Dic 2007 17:00 Oggetto: Inserire mp3 nella pagina con Jquery e il suo plugin jmp3 |
 |
|
Premetto che odio qualsiasi sito che mi propone suoni di sottofondo, pero' a volte l'inserimento di mp3 nelle vostre pagine o nei vostri blog, può essere utile o adatto a particolari scopi.
Vediamo come inserire un mp3 in una pagina con pochi passaggi tramite javascript e puro html:
- Scaricate la libreria javascript Jquery.js (questa è la versione compressa,occupa meno spazio, se volete la normale per ispezionare il codice scaricate questa) e rinominatela semplicemente in jquery.js
- Scaricate il suo plugin jquery.jmp3.js
- Piazzate ambedue i file .js nella directory che vi pare nel vostro webserver
Per gli esempi ho messo i file nella sotto directory /js sulla root (cartella iniziale) del webserver e la pagina che ospiterà il player mp3 è situata sulla root (/)
- Inserite nella HEAD della vostra pagina i seguenti richiami ai 2 script
| Codice: |
...
<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.jmp3.js"></script>
...
</head>
|
Aggiungere il javascript che visualizza l'mp3 sempre nel head dopo l'inclusione dei 2 script.
Lo script puo' essere in 2 modi:
A. SENZA PERSONALIZZAZIONI
| Codice: |
...
<script type="text/javascript">
$(document).ready(function(){
// impostazioni di default:
// solo tasto play
// nome dell'mp3 visibile
// download non consentito
// colori di default
$(".mp3").jmp3();
});
</script>
...
|
oppure
B. CON OPZIONI PERSONALIZZATE
| Codice: |
<script type="text/javascript">
$(document).ready(function(){
// impostazioni personalizzate ***2
$("#miodiv").jmp3({
backcolor: "000000",
forecolor: "00ff00",
width: 200,
showdownload: "true"
});
});
</script>
|
Inserite il tag nel body con l'id a cui fa riferimento lo script appena inserito e piazzate tra i tag il percorso del file mp3
| Codice: |
<body>
....
<span class="mp3">sound.mp3</span>
....
|
in questo caso il file sound.mp3 si trova nella stessa cartella del file html
*********************************************************
Le impostazioni di default (A) significano che qualsiasi elemento marcato con classe .mp3 sarà sostituito dal player mp3, essendo privo di qualsiasi opzione il risultato di un tag del genere
| Codice: |
<span class="mp3">sound.mp3</span>
|
verra sostituito dal seguente bottone 
che una volta premuto suonera' la canzone.
******************************************************
Le impostazioni personalizzate (B) invece permettono di
- personalizzare il tag o l'id del layer che verra' sostituito
| Codice: |
$("#miodiv").jmp3(.....)
|
in questo caso la sostituzione avverrà solo per il layer #miodiv ossia
| Codice: |
<div id="miodiv">NOME_CANZONE.MP3</div>
|
se mostrare o no il nome della canzone
| Codice: |
showfilename: "false", // "true" per mostrarlo, impostazione di default
|
l'impostazione di un colore di sfondo (con dicitura esadecimale solita), in questo caso nero:
| Codice: |
backcolor: "000000"
|
l'impostazione di un colore di primo piano (con dicitura esadecimale solita), in questo caso verde
| Codice: |
forecolor: "00ff00"
|
l'impostazione della larghezza del controllo, in questo caso 200 pixel
il permesso o no di scaricare l'mp3 (appare un piccolo triangolino sul controllo)
| Codice: |
showdownload: "true" // permette oppure "false" non permette
|
il file path iniziale ossia il percorso in cui risiedono gli mp3 (se omesso presume che siano nella stessa cartella in cui si trova la pagina).
il path iniziale puo' puntare sia ad una cartella locale:
| Codice: |
filepath: "/public/mp3/"
|
sia un percorso remoto
| Codice: |
filepath: "http://www.sitoesterno.com/directoryEsterna/"
|
Se il suono deve ripetersi una volta finito oppure no ("no" oppure "yes")
Impostazione iniziale del volume (scala da 0 a 100)
Se l'mp3 deve essere suonato automaticamente o al click dell'utente ("false" oppure "true")
| Codice: |
"autoplay": "false",
|
Esempi completi di codice
- SEMPLICE SENZA PERSONALIZZAZIONI
| Codice: |
<html>
<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.jmp3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sound").jmp3();
});
<script>
</head>
<body>
<div id="#sound">sound.mp3</div>
</div>
</body>
</html>
|
output:
COLORI PERSONALIZZATI, NESSUN NOME FILE E POSSIBILITA' DI DOWNLOAD
| Codice: |
<html>
<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.jmp3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sounddownload").jmp3({
showfilename: "false",
backcolor: "000000",
forecolor: "00ff00",
width: 150,
showdownload: "true"
});
});
<script>
</head>
<body>
<div id="#sounddownload">sound.mp3</div>
</div>
</body>
</html>
|
output: 
il player è nero con comandi verdi, largo 150px, non mostra il nome dell'mp3 e mostra l'iconcina per il download
COLORI PERSONALIZZATI E CARICAMENTO DA MP3 REMOTO (NO DOWNLOAD)
| Codice: |
<html>
<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.jmp3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#external").jmp3({
filepath: "http://www.miosito.net/PearlJam/",
showfilename: "false",
backcolor: "ffd700",
forecolor: "8B4513",
width: 300,
showdownload: "false"
});
});
</script>
</head>
<body>
<div id="external">ocean.mp3</div>
</body>
</html>
|
output: 
il controllo pesca l'mp3 da remoto, è largo 300 pixel, colore giallo e comandi color marroncino (lievemente merdina oserei dire  ), non mostra il nome dell'mp3 e non mostra l'icona per scaricare il file
REQUISITI PER IL CORRETTO FUNZIONAMENTO:
- Javascript attivo
- Plugin flash installato
L'ultima modifica di kluster il 18 Dic 2007 10:50, modificato 1 volta |
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
