Marco un mio amico musicista, ha un semplice sito internet realizzato dalla nostra agenzia web, su cui, tra le altre informazioni, ha voluto inserire i propri brani in formato mp3, le date dei concerti, delle galleria fotografica e ovviamente video. Trattandosi di un progetto semplice e ad aggiornamento frequente, abbiamo scelto di realizzare il sito web su piattaforma WordPress, fornendo ovviamente una formazione ad-hoc sull’utilizzo del CMS WordPress così da consentire alla band di gestire in autonomia gran parte del sito internet.

Per includere i brani MP3 abbiamo scelto una piattaforma esterna, dove è stato creato un profilo ad-hoc per la band. E’ importante sottolineare come i brani musicali, possono essere protetti da copyright e quindi non è detto che sia possibile inserirli a piacimento sul web. In questo caso, il mio amico musicista, voleva inserire le proprie canzoni originali all’interno del sito web quindi nessun problema di copyright.

La scelta di una piattaforma come SoundCloud è stata fatta anche perchè favorisce la condivisione, non viene utilizzata lo “spazio” e la banda del sito internet e può essere un ottimo modo per fare Community e di conseguenza far circolare i brani sulla rete.

La piattaforma scelta è stata quindi SoundCloud, in questo breve post “how-to” illustro quanto sia facile inserire sul proprio sito web realizzato su WordPress (ma la semplicità del procedimento trascende il CMS) dei brani ospitati dalla piattaforma di condivisione SoundCloud!

Inserire su WordPress brani mp3 ospitati da Sound Cloud

Ecco la “mini-guida” vera e propria con tanto di screenshots 😉

1. Devi cliccare su “SHARE” in corrispondenza del brano mp3 che vuoi inserire sul tuo blog (o sul tuo sito web)

In questo esempio faccio riferimento a WordPress, ma il procedimento è molto simile per non dire identico anche se:
vuoi inserire l’embed (il codice di incorporamento) su un altro CMS come Joomla o Drupal oppure su una pagina html statica:

2. Clicca su Embed per visualizzare il codice HTML da incorporare sul tuo sito internet

Cliccando su “share” ti si aprirà una nuova finestra (finestra modale per la precisione) in cui dovrai scegliere tra alcune semplici opzioni per poter inserire sul tuo sito in WordPress il brano musicale da te scelto, fai subito click sul pulsante EMBED:

3. Puoi già copiare ed incollare il codice SoundCloud sul tuo sito o blog

Adesso, se volevi inserire il brano su un sito internet “statico” oppure su un cms come Joomla (ma anche su WP) potresti copiare direttamente il codice HTML che ti ha già generato SoundCloud.

Infatti il sistema genera un codice con un tag IFRAME, un tag html che serve proprio ad includere contenuti esterni ecco qua un esempio:

4. Incorporare SoundCloud sul tuo WordPress: opzioni di visualizzazione del brano

Volendo puoi anche scegliere tra DUE opzioni di visualizzazione diversa del tuo brano, provale, ti basta fare click e SoundCloud ti fa vedere direttamente l’anteprima di come verrebbe sul tuo sito internet il player per ascoltare il brano:

5. SoundCloud mette a disposizione una “opzione” apposita per creare il codice per WordPress

Il nostro esempio riguardava l’inserimento di un brano ospitato su SondCloud all’interno di WordPress (pagine o articoli non fa differenza) di conseguenza, posso “spuntare” l’apposito flag WordPress code:

SoundCloud mette a disposizione anche altre opzioni, valide sia se vuoi inserire il brano nel CMS WordPress sia se lo vuoi inserire su altri CMS o in una pagina html, sono molto intuitive e facili, le visualizzi facendo click su More options e riguardano il colore del player mp3, e l’autoplay:

Non resta che COPIARE il codice visualizzato ed andare ad incollarlo sul nostro CMS WordPress, salvare la pagina (o l’articolo) ed il gioco è fatto, qualora, per mille ragioni il codice “creato” ad-hoc per WP non funzioni, potete utilizzare direttamente l’IFRAME andando ad inserirlo sulla pagina sempre in visualizzazione “testo”. Una volta salvata la pagina o l’articolo su wordpress, apparirà un bel Player per ascoltare direttamente sul sito il brano inserito!!

Facile no? 😉

Il procedimento illustrato è molto simile anche su altri siti che consentono di “embeddare” contenuti come per esempio il famosissimo Youtube oppure Vimeo!