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 19/02/2019, 05:27 ]
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


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 a caixa.


    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.