Pubblicato il 14/01/11 - aggiornato il  | 27 commenti :

Come inserire un player audio in un post o in un widget di Blogger.

Come installare un player audio su Blogger.
Ho già trattato come inserire una musica di sottofondo nel blog che si basava su MyFlashFetish. Vediamo adesso come adattare un plugin di Wordpress per la creazione di un player audio anche nella piattaforma Blogger. Il progetto si trova su Google Code e si chiama SWFObject 2.0. Questo script può rilevare i plugin Flash in tutti i browser. Se volete saperne di più leggetevi questa ampia documentazione in italiano.

Si inizia trovando il link diretto di canzoni o file audio sul web. Può essere fatto attraverso dei motori di ricerca per MP3 oppure caricando un nostro pezzo su un servizio di hosting che supporta questo formato. Vi consiglio di usare DropBox, nel caso non siate ancora registrati potete farlo attraverso questo modulo. Ho anche trattato l'argomento specifico di come caricare file MP3 su DropBox e come ottenerne il link diretto. Ricordo che, per questioni di copyright, potete hostare solo canzoni senza diritti o licenze. Ci sono siti che offrono musica in cambio del solo link di attribuzione.

Andate su Design > Modifica HTML e cercate la riga </head>. Immediatamente sopra incollate il codice

<!--Player Audio-->
<script language='JavaScript' src=' ....player-audio.js'/>
<!--Player Audio Fine - www.ideepercomputeredinternet.com-->

Dove al posto di ....player-audio.js incollate l'URL di questo javascript caricato su Dropbox. Salvate il modello. Il vostro player musicale potete installarlo in un widget andando su Design > Aggiungi un gadget > HTML/Javascript oppure anche in un post o in una pagina statica scegliendo la Modalità HTML.
Il codice da incollare lo potete trovare in questo file di Google Documenti. Il file player-audio.swf  si può scaricare dal link e caricarlo sulla cartella Public di Dropbox. Come detto si può installare in un widget o anche in un post. Prima però bisogna personalizzare il player e immettere l'hotlink della canzone in URL MUSICA. I codici, evidenziati di rosso, riguardano i colori del player e devono essere inseriti senza cancelletto (#). Vale a dire cccccc e non #cccccc per rappresentare il colore grigio. I codici dei colori riguardano i seguenti elementi del player
codici dei colori del player audio

L'aspetto del player audio sarà quello mostrato nel precedente screenshot con i colori che avete scelto. Ci sarà uno scorrimento verso a destra quando si cliccherà sulla freccia Play. Inizierà a riprodursi il pezzo musicale che si interromperà quando si premerà su Pausa.

Aggiornamento importante: Questo player è stato ripresentato in un post più recente, consultate quindi



27 commenti :

  1. Scusa per l'offtopic. Nei miei blog ho notato che quando clicco su uno degli articoli presenti nel widget "Ultimi post" e "Post casuali" non vengono visualizzare gli annunci Adsense presenti sotto il titolo del post. C'è un rimedio?

    RispondiElimina
  2. @Maxso
    E' una cosa comune che avevo notato anch'io, significa che i server di adsense non trovano annunci pertinenti forse perché non fanno in tempo a scannerizzare la parole chiave del post

    RispondiElimina
  3. Il problema non si presenta con il widget "LinkWithin" degli articoli correlati.

    RispondiElimina
  4. Ciao! complimenti per le ottime guide. Vorrei implementare questa sul mio blog però mi stavo chiedendo, il plugin o insomma questo player, si attiva solo se lo applico ai post, vero?

    Oppure, una volta che incollo il codice nel html il plugin verrà caricato in backgroud ad ogni pagina?

    il mio problema è che ho già messo altri plugins nel html e avrei paura che poi diventasse molto lento il blog da caricare.

    Grazie di già!

    RispondiElimina
  5. @Santiago
    Se in una pagina non inserisci il player sostanzialmente non c'è rallentamento così come se lo metti in una pagina statica. Se invece lo metti in una sidebar allora si caricherà sempre.
    Ciao

    RispondiElimina
  6. per pagina statica intendi un post normale?

    io ho intenzione di metterlo ogni tanto all'inizio dei post. Uso la funzione per intenderci, però se lo metto all'inizio finirà anche nella home. Infatti la mia paura è che se creo più di due post con questo plugin poi la home ci metta molto a caricarsi.

    RispondiElimina
  7. @Santiago
    La Home è sempre più lenta di un singolo post. Se vuoi renderla più leggera diminuisci il numero di articoli presenti da 10 a 5 (per esempio) andando su Impostazioni > Formattazione.
    Le pagine statiche sono queste
    http://www.ideepercomputeredinternet.com/2010/02/le-pagine-statiche-di-blogger-sono.html
    Ciao

    RispondiElimina
  8. ah ho capito! ok, ti ringrazio a breve forse metto questo tip nel mio blog personale ;)

    RispondiElimina
  9. Ciao,
    c'è un problema che non riesco a risolvere.
    Quando metto il player nella home page del blog poi ovviamente quando si clicca su un post per leggerlo, o su una qualsiasi altra pagina ovviamente il player si stoppa e riparte la canzone da zero.
    C'è un modo per far andare la canzone in play senza interromperla indipendentemente dalla pagina che clicclo sul mio blog?

    RispondiElimina
  10. @Il Mortificatore
    Ovviamente non c'è un modo. E' come quando vai su Youtube, se cambi pagina il video ricomincia dall'inizio quando la riapri.

    RispondiElimina
  11. Ciao, vorrei chiederti una cortesia. Scusa se ti risp su questo post anche se non è quello da cui ho preso le info. Ho inserito in una pagina statica una musica inserendo questo codice come da te indicato:

    Funziona perfettamente con IE ma non firefox. C'è un modo per farlo funzionare con entrambi? Sostanzialmente a me non serve un riproduttore di vari brani ma solo per questo brano all'apertura di una sola pagina statica. Grazie mille!

    RispondiElimina
  12. Ho visto che non legge il codice html. Ci riprovo togliendo le virgolette embed autostart="true" height="30" loop="true" src="http://dl.dropbox.com/u/24550503/Nuova%20cartella/Omaggio_a_Beethoven.mp3" type="audio/mpeg" width="75"></embed

    RispondiElimina
  13. @***KlArte*** Il player funziona con Chrome, Firefox e IE. Ho appena controllato. Ho anche inserito un codice di prova per far agevolare chi lo volesse utilizzare. In questo player non c'è il comando autoplay='true'

    RispondiElimina
  14. @Ernesto T.
    Ok, grazie Ernesto. Quando ho letto che tu sentivi con entrambi ho pensato che mancasse un plugin ed infatti cosi era. Anche se con qucktime parte un pò in ritardo. Riguardo al comando autoplay='true', sembra che funzioni anche con quello che avevo scritto io autostart='true'.
    Grazie ancora!

    RispondiElimina
  15. Grazieeee!!! Stavo cercando da tempo un sistema del genere!!!! =)

    RispondiElimina
  16. @MariaFelicia99
    Ma come, non lo avevi ancora trovato nel sito? E dire che ormai sei una lettrice abituale :D

    RispondiElimina
  17. Da stupida ho cercato su Google e non su questo sito....!
    Ho passato 1 ora a cercare..
    Successivamente ho scritto "Inserire player in blog" e finalmente è uscito "Idee per Computer ed Internet" e mi sono detta: "Ma come ho fatto a non cercare prima in questo blog?????"

    RispondiElimina
  18. Ciao volevo ringraziarti sia per il player che per il tutorial. Ne approfitto per chiderti 2 cosine: - quando clicco su play come nome della traccia mi appare "track1" si può cambiare? - mi puoi consigliare dove posso poggiare le tracce mp3 visto che non le posso caricare su blogger? Grazie mille in anticipo.

    RispondiElimina
  19. @IndieRock
    La musica la puoi caricare nella cartella Public di DropBox
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html
    Il titolo del brano al posto di Track non mi è chiaro da dove viene ma forse dipende dall'hosting del pezzo che supporta questo tipo di informazione.

    RispondiElimina
  20. ciao non ho avuto nessun problema a installare il lettore dentro il post ma la canzone che ho scelto di importare dal mio dropbox non ne vuole saper di partire e il lettore è sempre in "buffering". sapresti dirmi secondo te come mai????
    (l'mp3 in questione è qui: https://www.dropbox.com/s/bpx582397u12gxv/Vasco%20Rossi-Domenica%20lunatica.mp3)

    grazie

    RispondiElimina
    Risposte
    1. @# Hai sbagliato. Quello che hai postato non è l'URL diretto di DropBox ma l'indirizzo della pagina di Download. Devi creare la cartella Public, se non ci fosse già, quindi caricare i file musicali su quella cartella. Poi vai con il destro del mouse e scegli Copy Public link

      Elimina
    2. mah... ho creato la cartella public, ci ho messo una canzone nuova (https://www.dropbox.com/s/balzklqy25ncsod/01.%20OPUS%204.mp3) ma se clicco col destro non mi chiede Copy public link, l'unica cosa a parte i soliti copia, scarica, ecc... è condividi link che mi permette (premendo GETLINK) di copiare negli appunti l'indirizzo che ti ho scritto..... ma alla fine non viene eseguita da lettore nel post.

      Elimina
    3. @# Il lik deve essere tipo questo
      http://dl.dropbox.com/u/2574553/musica/Army%20Angels.mp3
      Se provi a incollarlo nel browser vedi il player musicale e puoi riprodurre la musica. Quando si vedrà il player anche con il tuo link vuol dire che hai fatto la procedura giusta. Informati anche se è mutato qualcosa su Dropbox

      Elimina
    4. per ora non c'è la procedura come quella che hai indicato tu però ho modificato manualmente il link trasformando www.dropbox..... con dl.dropbox..... ecc ecc. Ora funziona.

      grazie dell'aiuto

      Elimina
  21. Ciao a tutti..
    volevo chiedervi se qualcuno mi riesce a passare il file player-audio.swf
    Leggendo nella descrizione del codice html il player è nel seguente percorso pubblico http://dl.dropbox.com/u/2574553/player-audio.swf ma non riesco a scaricarlo.
    c'è qualcuno che mi può indicare il link esatto.
    grazie

    RispondiElimina
    Risposte
    1. @# Il Player audio lo puoi scaricare da qui
      https://www.dropbox.com/s/nfr5uhlbobap5ko/player-audio.js
      il link è già presente nell'articolo

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy