Come inserire musica e audio sul blog #metodivari

Primo metodo

Il servizio web che ci aiutato è il notissimoSoundCloud una sorta di social musicale ma che si presta benissimo ad un semplice quanto efficace lavoro di streaming audio.
Dopo la veloce iscrizione e la conferma dell'account passiamo direttamente all'upload del nostro file audio


cliccando su "choose file to upload" possiamo andare a cercare il nostro file e lanciare l'upload vero e proprio.





Una volta caricato il file dalla home del servizio, dove ci sono tutti i file caricati, clicchiamo su "share".


Puntiamo a prelevare il codice necessario ad effettuare l'embedded (incorporamento) sul nostro sito o blog personale.

Copiamo quindi il codice evidenziato e trasferiamolo così com'è in uno spazio adatto ad ospitare puro codice html.
Quasi tutti i blog e siti web hanno gadget speciali per fare questa operazione.
Con Blogger è ancora più semplice: è sufficiente cliccare sul bottone "html" sulla barra di formattazione e incollare il codice.
La pagina del sito web che ospita il breve intervento musicale inserito grazie a SoundCloud

Secondo metodo 

Quando si vuole inserire un video in un articolo di Blogger o di qualsiasi altra piattaforma si carica su Youtube quindi si apre il player , si va su Condividi, si copia il codice e si incolla nella pagina web in cui si vuole mostrare.

Questo lo si può fare anche per i file audio. Basta creare un video che abbia una immagine fissa e inserirvi l'audio che invece vogliamo condividere. Il video anche in questo caso andrebbe caricato su Youtube o in un altro sito di video sharing per poi ottenerne il codice. Alternativamente si può usare un sito di audio sharing come Audioo.com che funziona più o meno come Youtube ma che ci permette di caricare i nostri audio per poi condividerli nel nostro sito. Dopo la registrazione a Audioo.com e aver caricato il file audio




si va sulla icona Embed e si copia il codice da incollare nel nostro sito. In questo articolo vedremo invece come si possano inserire file audio e file video a beneficio dei lettori che potranno riprodurli senza dipendere da servizi esterni come Youtube o Audioo.com.

CARICARE I FILE SU GOOGLE DRIVE E AVERNE IL LINK DIRETTO

Se i file audio e video volete inserirli in un blog gratuito del tipo Blogspot allora potete caricare i vostri file su Google Sites creando una nuova pagina in Modalità Schedario. Se invece avete un dominio personalizzato allora dovrete usare Google Drive per caricare i file e ottenerne il link diretto. I passaggi da compiere sono i seguenti:

Creare una cartella e darle un nome qualsiasi 

Cliccandoci sopra con il destro del mouse si va su Condividi e si imposta come Pubblica sul web


Si apre tale cartella quindi si va su Nuovo > Caricamento di file





Si selezionano i file da caricare e si aspetta la fine del processo. Nella barra del browser si copia l'ID della cartella che è la stringa alfanumerica dopo folders/




Si crea un URL come il seguente

https://googledrive.com/host/ID_CARTELLA

dove al posto di ID_CARTELLA si incolla l'ID appena ricavato. Tale indirizzo si incolla nel browser e si va su Invio. Si aprirà una pagina web con tutti i file presenti nella nostra cartella



Per ottenere il link diretto dei file in oggetto bisogna cliccarci sopra con il destro del mouse e scegliere Copia indirizzo link o voce analoga a seconda del browser utilizzato. Tale URL va incollato in un file di testo ed è appunto l'hotlink al file video o audio che abbiamo caricato su Google Drive. L'URL del file audio terminerà in.ogg (o in .mp3) mentre quello del file video terminerà in .mp4.

INSTALLARE I PLAYER AUDIO CON HTML5

Per mostrare un player audio che riproduca il nostro file dovremo incollare in modalità HTMLo in un widget HTML/Javascript un codice come questo

<audio controls=""> <source src="https://www.dropbox.com/s/1zuhrnjp23bxsrk/%E3%80%90MIDI%E3%80%91%20%E3%80%8CConan%20x%20Lupin%20MIX%E3%80%8D%E3%82%92%E6%8E%A1%E8%AD%9C%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F?dl=0.mp3"></source></audio>

Se non riesci a vedere il player significa che il tuo browser non supporta il tag audio </audio>

che mostrerà un player in grado di riprodurre il file audio caricato su Google Drive.

Ovviamente al posto dell'URL colorato di rossodovrete mettere l'indirizzo del vostro file.


MUSICA DI SOTTOFONDO PER IL BLOG

Si utilizza il tag audio che fa parte dell'HTML5 e che quindi non viene rilevato dalle versioni di Internet Explorer precedenti alla 9.
Prima di inserire una musica di sottofondo, il relativo file MP3 dovrà essere caricato online. Si può usare DropBox oppure Google Sites nella modalità Schedario. Se avete un dominio personalizzato, i file caricati su Google Sites non verranno riprodotti. Alternativamente si può usare un nostro dominio per caricarvi gli MP3 e i file di altri formati. Ricordo che non si può inserire nel blog della musica protetta dal copyright se il sito produce reddito in qualche modo, per esempio con banner pubblicitari, sponsorizzazioni, programmi di affiliazione o altro ancora.

Dopo aver acquisito il link diretto al file MP3 che vogliamo riprodurre si incolla in questo codice

<audio autoplay='true' loop='true' width='0' height='0' src='URL_MP3'type='audio/mp3'></audio>
<noembed><bgsound src='URL_MP3' loop='infinite'></noembed>


Gli altri parametri vanno così personalizzati:
Le dimensioni 0 servono per rendere invisibile il player
Autoplay true significa una riproduzione automatica
Loop true per riprodurre all'infinito; false se si vuole che si riproduca solo una volta. In questo caso va cambiato anche loop='infinite' con loop='0'

Se si incollasse il codice così com'è non verrebbe salvato da Blogger in moltissimi modelli. Occorre quindi effettuare una conversione in XML. Si va su Blogcrowds, si incolla il codice e si clicca su Parse. Si seleziona e si copia il codice risultante . Si va quindi su Modello > Modifica HTML > Procedi, si cerca la riga </head> e si incolla subito sopra.

Osservazione conclusiva: Si può anche inserire una musica di sottofondo solo in una determinata pagina o un tipo di pagine utilizzando i tag condizionali. Con questo stesso metodo si possono caricare anche file audio diversi da riprodurre in pagine diverse. I relativi codici vanno incollati uno di seguito all'altro preceduti e seguiti dalle due righe dei tag condizionali.


Se non riesci a vedere il player significa che il tuo browser non supporta il tag audio </audio>


Commenti

  1. La musica di sottofondo per un blog può essere IL male, quindi non incoraggiarla :D

    Moz-

    RispondiElimina
    Risposte
    1. No, guarda qui non funziona nessun tentativo.
      Uff 😭

      Elimina
    2. Devo provare dal pc forse è dal cellulare che non funziona.

      Elimina
    3. Ahahah
      A me Rosy ha insegnato ad inserire i video da youtube in autoplay e a renderli minuscoli, in modo che non si vedano nella pagina.

      Elimina
    4. Allora. Lo faccio in automatico copiando da un vecchio post, quindi non so dirti precisamente.
      Per sommi capi, si inserisce il video da youtube, secondo la classica procedura di Blogger (basta cliccare sul simbolo del ciak ed inserire il link).
      Poi si passa alla versione html e si riduce la dimensione del video, in proporzione.
      Infine dopo il codice embed, si cancella il resto e si scrive =autoplay.
      Ecco, qualcosa del genere.

      Elimina
    5. Il senso l''ho afferrato ma sulla messa in pratica ho qualche dubbio 😅

      Elimina
  2. Anna, io non apro mai le casse per non sentire la musica dal blog. E' roba vecchia e superata.
    Ciao.

    RispondiElimina
    Risposte
    1. Sì' hai ragione ma la cosa principale non è la musichetta sul blog ma gli audio sui post. A quelli volevo arrivare ma evidentemente non è possibile inserirli senza vie traverse. Sto studiando con calma queste vie traverse 😂 o meglio giovedì dal pc cerco di arrivarena qualcosa 😅

      Elimina
  3. Anch'io non amo quei blog nei quali entro ed una striscia in alto mi impone un ascolto non voluto o ancora quei blog nei quali scatta subito un video musicale tratto da youtube. Ciò scritto, resta da ammirare la tua bravura e la tua curiosità nell'interessarti di tutte queste simpatiche diavolerie di cui io proprio non ho la minima idea (o quasi) :-)))

    RispondiElimina
    Risposte
    1. Grazie ♡ tengo allenata la mia curiosità. A prescindere dalla metà. Perché Senza curiosità la vita perde di ogni senso per me.

      Per la musichetta sul blog come sopra. 😊

      Elimina

Posta un commento