Blogger e Google SITEs (Clássico e Novo): Como inserir um leitor de MP3?

Publicado a 17/01/2017, 03:46 por Luis Pitta ‎[org]‎   [ atualizado a 08/03/2020, 13:54 ]
Objetivo:

Inserir um leitor de mp3 no Blog ou no Google SITEs (clássico ou novo), que vai "tocar" uma musica armazenada no nosso DRIVE?

Exemplo:

Musica gratuita descarregada do JamendoTitulo: "To the Roofs" / Banda: Colaars



Procedimento


1. Carregar o ficheiro áudio (WAV ou MP3) para uma pasta DRIVE partilhada públicamente (não pode ser partilhada só com alguns, tem de ser pública).


Pasta DRIVE, partilhada publicamente, com ficheiros gratuitos de musica MP3:

Sons MP3


a. Cria uma pasta DRIVE com o nome "Publico" (ou outro nome qualquer) e partilha-a de modo Público (esta partilha tem mesmo de ser pública)


b. Copia o ficheiro de áudio para a pasta DRIVE criada anteriormente.


c. Como a pasta já foi partilhada os ficheiros lá contidos herdam o mesmo tipo de partilha (neste caso Público) por isso basta copiar o URL de partilha do ficheiro, que terá o seguinte aspeto: 


URL da partilha do ficheiro MP3: https://drive.google.com/file/d/1INcON5zWhMrX76iLWh8EA2wY4E29zHjl/view?usp=sharing


d. Copia agora o seu ID (parte a vermelho retirado do URL de partilha): 1INcON5zWhMrX76iLWh8EA2wY4E29zHjl



2. Criação do URL convertido para web


Para obtermos o URL convertido, temos de colar o ID do ficheiro de audio no final do seguinte URL (onde está escrito aqui a vermelho):


https://drive.google.com/uc?export=download&id=aqui


Ou seja, vamos adicionar o ID no final da linha a seguir ao símbolo de igual:


https://drive.google.com/uc?export=download&id=1INcON5zWhMrX76iLWh8EA2wY4E29zHjl



(Em alternativa podemos enviar o URL original para este site sites.google.com/site/gdocs2direct/ que cria o url convertido por nós)



3. Copiar e colar o URL convertido para o atributo src do HTML do Player (parte a vermelho da 3ª linha):

    <br/>
    <audio controls="">
       <source src="
    https://drive.google.com/uc?export=download&id=1INcON5zWhMrX76iLWh8EA2wY4E29zHjl">
       </source>
        Se não conseguir ver o botão de Play quer dizer que o seu navegador de Internet (browser) não suporta este elemento. Deve utilizar um navegador mais recente.
    </audio>
    <br/><br/>


    4. Agora temos de incorporar no Blog, no Google SITEs Clássico ou Novo Google SITEs


    a. No caso do Blog: Copiar o HTML do passo 3 para uma nova noticia no Blog em modo HTML.



    b. No caso do Google SITEs (Clássico ou Novo Google SITEs) proceder do seguinte modo:


    1. Google SITEs Clássico:

    Editar a pagina e no menu Inserir, escolher Mais miniaplicaçoes... > "Embed gadget"


    Copiar e colar o código HTML do passo 3 para esta caixa.

    Configura a mini aplicação para Largura:100%  e Altura: 50 pixel.

    Guardar a caixa e guardar a página. 



    Ver exemplo no caso do Google SITEs Clássico:

    Musica gratuita descarregada do JamendoChama-se "To the Roofs" (Banda: Colaars)



    2. Novo Google SITEs:

    Clicar na pagina e escolher Incorporar > Incorporar Código
    Copiar e colar o código HTML do passo 3.
    Clicar em Seguinte e Inserir.
    Publicar e visualizar o site Publicado para verificar se o Player está a funcionar em boas condições. 




    Procedimento alternativo através de uma mini aplicação. Só funciona no Google Sites Clássico.