Pubblicato il 17/01/11 - aggiornato il  | 19 commenti :

Come inserire una radio con un player musicale in un blog di qualsiasi piattaforma.

Dopo aver presentato un metodo per inserire una musica di sottofondo e aver presentato il player My Flash Fetish vi illustro come inserire una sorgente radio in un blog di qualsiasi piattaforma. Ci si basa sul sito inglese Internet Radio che offre un servizio particolare che forse merita di essere spiegato, sia pure brevemente. Nei suoi server sono presenti delle emissioni di playlist musicali suddivise in generi musicali. L'utente clicca sull'icona del suo player preferito per scaricare un piccolo file che può essere aperto facendo doppio click.

Le radio sono ordinate in ragione del numero di persone che stanno ascoltandole in quel momento. E' visibile anche il dato riguardante la velocità di connessione e quindi la qualità della emissione in numero di Kilobyte per secondo. I player che possono essere usati per ascoltare la musica sono tra gli altri Flash, Windows Media Player e Real Player.

Dopo aver scelto la nostra stazione preferita, clicchiamo sull'icona di uno di questi player. Se avete un OS Windows, cliccate su WMP come mostrato nello screenshot e andate sul sicuro

internet radio

Il file scaricato, se si apre con un doppio click, comincerà a riprodurre musica. Si tratta di un file con estensione M3U che è un formato creato appositamente per le playlist musicali. In realtà si tratta solo di una riga di testo, come può essere constatato aprendolo con un programma come Notepad++ 

file in formato m3u

che dà l'URL di emissione del server di Internet Radio. Per inserire questo file su un blog abbiamo bisogno di due cose

  1. Un hosting compatibile con questo tipo di file
  2. Un player che permetta di riprodurlo

Per l'hosting c'è l'ottima soluzione di DropBox che funziona a meraviglia praticamente con tutti i tipi di file. Nell'articolo linkato ci sono tutte le istruzioni su come caricare file su DropBox. Ricordo che per condividerli occorre caricarli nella cartella Public e che se ne può ottener l'hotlink cliccandoci sopra con il destro del mouse e scegliendo DropBox > Copy Public Link 

dropbox copy public link

Se ancora non siete registrati a DropBox potete farlo attraverso questo modulo. Per quanto riguarda il player, si può utilizzare questo ottimo codice di player musicale. La prima e l'ultima riga servono per centrare il player e quindi, se non si vuole in quella posizione, si possono eliminare. Sono colorate di rosso. In subordine si può posizionare il player a sinistra o a destra sostituendo center con left o right. Le personalizzazioni sono evidenziate di viola e riguardano

  1. L'URL del file M3U ottenuto da DropBox
  2. Le dimensioni del player: larghezza (width) e altezza (heigh)
  3. autostart="0" significa che per ascoltare la musica bisogna andare sul pulsante play. Se si vuole che parta in automatico occorre sostituire 0 con 1.

L'aspetto del riproduttore musicale sarà questo

player audio

e avrà tutti i comandi tipici come il pulsante Play/Pausa, il bottone per interrompere immediatamente l'audio e il cursore per regolare il volume. Questo codice può essere incollato in un post o in una pagina statica andando in modalità HTML. Si può anche scegliere di inserirlo in una sidebar del blog. Se si ha Blogger, si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla il codice in Sezioni del sito.

Concludo osservando che questo player audio può anche essere utilizzato per riprodurre qualsiasi file in formato MP3 di cui si conosca l'indirizzo o che sia stato caricato su DropBox. Invece di una radio potete inserire un player per canzoni in MP3 completamente personalizzabile.



19 commenti :

  1. Scusami una domanda...è possibile inserire il lettore in pagine fan di facebook?
    grazie mille....

    RispondiElimina
  2. @Unistrani
    Sistemi basati su codice da mettere in riquadri non ne conosco. Potrebbero esserci però delle applicazioni ad hoc

    RispondiElimina
  3. Per favore mi potete aiutare.. vorrei mettere questa radio http://tunein.com/tuner/?StationId=27980& nel mio blog ho provato a mettere questo altro link http://lamusica.com/sbsplayer-lanueva94.php ma il risultato è questo è non è che sia molto bello perchè fa lo sfondo bianco ..parsifal guarda http://www.reggaetonitalia.com/p/radio-reggaeton-94-fm.html grazie spero leggiate il messaggio

    RispondiElimina
    Risposte
    1. @PizzarroDJ
      Prova a inserire un iFrame con questo codice

      <iframe align="center" height="600" width="900" scrolling="yes" src="http://tunein.com/tuner/?StationId=27980&"></iframe>

      in una pagina statica. Puoi personalizzare le dimensioni.

      Elimina
  4. grazie mille ernesto!!! mi puoi spiegare come hai fatto? ah poi siccome sulla mia email non mi è arrivata la notifica che mi hai risposto al commento volevo sapere come fare perchè mi arrivino le mail quando mi rispondete..ciao e grazie ancora

    RispondiElimina
    Risposte
    1. @PizarroDj
      Come ho fatto è semplice. Ho inserito la pagina in quello che si chiama iFrame. Se vedi dopo src= c'è l'URL della pagina che mi hai indicato. Per avere le notifiche relative alle risposte a un commento di un singolo post devi cliccare su Iscriviti per email in basso a destra.

      Elimina
  5. Ernesto volevo chiederti un'altra cosa. Sempre del mio blog www.reggaetonitalia.com io volevo cancellare da tutti i post quella stringa per condividere dove dice
    Consiglia questo indirizzo su Google, e mettere al suo posto i due fumetti Mi Piace & Tweet come sono qua sotto il video http://video.gazzetta.it/guarda-puntata-extra-time/8014d5cc-6c42-11e1-a8a0-63cb291e857e per esempio. Spero tu mi abbia capito grazie.

    RispondiElimina
  6. Sono riuscito a togliere quella stringa andando su layout nelle opzioni post. Ora mi manca mettere quei due Bottoni fumetto di FB e Twitter. come vedi ne ho messo uno ma se clicco sopra lo condivide. Io volevo che esca mi piace sulla bacheca di FB, come il bottone della gazzetta.it.

    RispondiElimina
    Risposte
    1. @PizzarroDJ
      Prova con questo sistema
      http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html
      solo che ci metti solo i bottoni che ti interessano.

      Elimina
  7. alla ricerca disperata di un html per un lettore mp3 con playlist

    RispondiElimina
  8. Ciao,
    Ho provato a seguire le tue istruzioni per pubblicare una radio sul mio blog. il problema è che quando provo a farla partire mi dice che l'estensione del file che si sta tentando di riprodurre non corrisponde al formato del file..intanto cosa vuol dire? e poi io ho la nuova versione di dropbox in cui non c'è la cartella public può essere quello il problema?
    qualche consiglio?
    grazie
    Giulia

    RispondiElimina
    Risposte
    1. @# Nella nuova versione di Dropbox, la cartella Public deve essere creata dall'utente. Forse è quello il problema

      Elimina
  9. Hai qualche suggerimento per integrare in un player interno al blog i link m3u che riguardano trasmissioni video?

    RispondiElimina
    Risposte
    1. @# Neppure sapevo che i file m3u supportassero anche gli stream dei video :-(

      Elimina
    2. eh, io ne ho uno serbo (pallanuoto) e vorrei integrarlo con un player sul blog. E' leggibile da videolan e media player, ma non riesco ad integrarlo... Grazie in ogni caso, anche della rapidità di risposta!

      Elimina
  10. Scusate, ho un problema per quanto riguarda la riproduzione dei file m3u con il mio iphone. Mi spiego, all'interno della mia cartella public di dropbox ho 2 file m3u, due flussi streaming, uno riesce a riprodurlo normalmente, e quindi riesco a sentirlo, l'altro no. Qualcuno può aiutarmi? Può essere un problema di compressione. Intanto riesco a sentire entrambi benissimo dal pc. Ringrazio anticipatamente!

    RispondiElimina
    Risposte
    1. Se dal PC funzionano bene è certo un problema dell'iPhone o forse di iOS che però non conosco e quindi non ti posso aiutare :(
      @#

      Elimina
    2. Ti ringrazio lo stesso, il problema è che l'iphone, avendone due di playlist m3u nella cartella public di dropbox, una di queste la produce correttamente. Vedrò come fare, grazie ancora.

      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