Incorporar áudio do Google Drive no blogue

IAGD_000.jpg

Adicionar um leitor de música personalizado como complemento a um artigo pode ser uma excelente forma de destacar e enriquecer o conteúdo.
Considerando que o Blogger é uma plataforma da Google, a possibilidade de hospedar essas músicas no Google Drive era uma vantagem adicional, uma vez que, até não há muito tempo, era relativamente fácil integrar ficheiros do Google Drive no blogue, fossem eles de imagem, vídeo ou áudio.

No entanto, sublinho o "era" porque, infelizmente, algumas alterações nos serviços da Google acabaram por complicar esta integração.
Muitos dos métodos práticos que antes utilizávamos para adicionar ficheiros ao blogue já não estão disponíveis ou foram descontinuados.

Mas nem tudo está perdido!
Quando se trata de ficheiros de áudio, mesmo que a aplicação de um leitor personalizado já não seja uma opção tão simples, existem soluções alternativas.
Com um pouco de criatividade e algumas ferramentas à disposição, é possível contornar o problema e incorporar áudios no seu blogue de uma forma eficaz.
Afinal, onde há vontade e criatividade, há sempre um caminho! ;)

É bastante fácil incorporar ficheiros de áudio em sites e blogues utilizando várias plataformas que permitem o armazenamento e partilha de áudio, como o SoundCloud, o GitHub, ou o Archive.org.
Contudo, vou deixar esses métodos para um artigo futuro, uma vez que o foco deste texto será o Google Drive.

O primeiro passo é carregar o ficheiro de áudio para o Google Drive.
Partindo do pressuposto de que já tens uma conta Google, começa por aceder a https://drive.google.com/.
No canto superior esquerdo, encontrarás a opção: , onde podes escolher carregar um novo ficheiro ou até mesmo uma pasta inteira.

Pessoalmente, prefiro manter tudo bem organizado, por isso já tenho uma pasta dedicada a músicas.
Dentro desta pasta, basta clicar em qualquer lugar com o botão direito do rato que também abre o menu para seleccionar a opção de carregamento de ficheiros.

A seguir, e como pretendemos partilhar este ficheiro, é necessário definir a opção de partilha, fazemos isso clicando com o botão direito do rato no ficheiro e no menu que aparece, clicamos em Partilhar Partilhar Qualquer pessoa com o link.

No entanto, e antes de avançar para o método actual, quero começar por mostrar alguns métodos agora obsoletos para incorporar ficheiros de áudio MP3 no blogue a partir do Google Drive.
Ah, para ilustrar este artigo, vou utilizar o arquivo mostrado nas imagens acima.
Trata-se de uma canção intitulada Dance Playful Night, de autoria de AleXZavesa, que pode ser obtida gratuitamente no Pixabay, um site que disponibiliza músicas gratuitas para uso em demonstrações e similares. ;)

ATENÇÃO: os DOIS (2) PRIMEIROS métodos apresentados a seguir foram descontinuados no Google Drive e apenas os menciono aqui por contexto histórico e informativo.!!!

  1. Integrar o ficheiro num leitor de áudio HTML simples, usando formato de download direto

    Começamos por clicar em Copiar link tal como mostra na imagem acima, onde vamos obter um link do tipo: https://drive.google.com/file/d/A_ID_DO_TEU_FICHEIRO/view?usp=sharing
    Agora copiamos a parte A_ID_DO_TEU_FICHEIRO e colamos no final do seguinte link para ficar assim: https://drive.google.com/uc?export=download&id=A_ID_DO_TEU_FICHEIRO, e é este link que vamos colocar no leitor:

    DEMONSTRAÇÃO:

    <audio controls>
  <source src="https://drive.google.com/uc?export=download&id=1xj9_ppcJkXpSGK9bjYTEX1KzQyML1xyC" type="audio/mp3">
  O teu navegador não suporta o elemento de áudio.
</audio>

    /* NÃO TEM ESTILOS CSS */

     
     /* NÃO TEM JAVASCRIPT */
    Resultado

    Como podes verificar clicando em , este método já não funciona.

  2. Integrar o ficheiro num leitor de áudio HTML simples, usando o formato de preview

    Repetimos o processo para obter o link de partilha tal como descrito no método anterior.
    Agora substituimos a parte view?usp=sharing por preview, ficando assim: https://drive.google.com/file/d/A_ID_DO_TEU_FICHEIRO/preview, e é este link que vamos colocar no leitor:

    DEMONSTRAÇÃO:

             
<audio controls>
  <source src="https://drive.google.com/file/d/1xj9_ppcJkXpSGK9bjYTEX1KzQyML1xyC/preview" type="audio/mp3">
  O teu navegador não suporta o elemento de áudio.
</audio>
  
    /* NÃO TEM ESTILOS CSS */
  
    /* NÃO TEM JAVASCRIPT */
    Resultado

    Como podes verificar clicando em , este método também já não funciona.

    NOTA: Ambos os métodos acima são a forma correcta de incorporar ficheiros de áudio num blogue ou site, a razão porque não funcionam mais é devido a alterações do próprio Google Drive.

  3. Imitar a incorporação de um leitor HTML personalizado, mas usando uma iframe

    Neste caso, clicamos no nome do ficheiro de áudio para abrir o dito cujo, e no canto superior direito, clica nos 3 pontos [], e a seguir em Abrir num novo separador.
    Nesse separador, no canto superior esquerdo, clica em Ficheiro Partilhar Gerar link de incorporação
    Agora basta copiar o conteúdo fornecido, que deve ser algo do género:

      <iframe src="https://drive.google.com/file/d/1xj9_ppcJkXpSGK9bjYTEX1KzQyML1xyC/preview" width="640" height="480"></iframe>

    Esse código é duma iframe que te permite colocar o ficheiro de áudio onde quiseres.
    Se reparares no HTML na demonstração abaixo, esse código está nas linhas destacadas [17-22], embora com algumas alterações para melhor se adequar ao resultado que quis atingir.

    DEMONSTRAÇÃO:

            
<div id="player">
  <div class="album">
    <div class="thunderbolt"><i class="fas fa-bolt"></i></div>
    </div>
  <div class="music_info">
    <div class="equalizer">
      <span class="bar bar1"></span>
      <span class="bar bar2"></span>
      <span class="bar bar3"></span>
      <span class="bar bar4"></span>
    </div>
    <div class="currently-playing">
      <h2 class="song-name">Dance Playful Night</h2>
      <h3 class="artist-name">AleXZavesa</h3>
    </div>
    <div class="iframe-wrapper">
      <iframe 
      frameborder="0" 
      width="350" 
      height="200" 
      src="https://drive.google.com/file/d/1xj9_ppcJkXpSGK9bjYTEX1KzQyML1xyC/preview">
      </iframe>
    </div>
  </div> 
</div>
  
    @import url("https://fonts.googleapis.com/css?family=Questrial");
.arrow_container > * {
  vertical-align:middle;
}
.arrow_container b {
	color: lime;
	border: 1px solid;
	padding: 0 3px;
	border-radius: 3px;
}
.arrow-bounce {
  animation: arrowbounce 8s infinite;
}

@keyframes arrowbounce {
  /* blue, red, goldenrod, cyan */
  0%,
  5% {
    transform: translateX(0);
    stroke: #2852e2;
  }
  10% {
    transform: translateX(10px);
  }
  12.5% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(5px);
  }
  20%,
  25% {
    transform: translateX(0);
  }

  25%,
  30% {
    transform: translateX(0);
    stroke: #ff0000;
  }
  35% {
    transform: translateX(10px);
  }
  37.5% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(5px);
  }
  45%,
  50% {
    transform: translateX(0);
  }

  50%,
  55% {
    transform: translateX(0);
    stroke: #dacd2a;
  }
  60% {
    transform: translateX(10px);
  }
  62.5% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(5px);
  }
  70%,
  75% {
    transform: translateX(0);
  }

  75%,
  80% {
    transform: translateX(0);
    stroke: #3cddd6;
  }
  85% {
    transform: translateX(10px);
  }
  87.5% {
    transform: translateX(0);
  }
  90% {
    transform: translateX(5px);
  }
  95%,
  100% {
    transform: translateX(0);
    stroke: #2852e2;
  }
}
#player {
  background: #000000;
  position: relative;
  margin: auto;
  width: 350px;
  height: 300px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 3px 3px 10px rgba(52, 132, 179, 0.4);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#player:hover {
  box-shadow: 3px 3px 15px rgba(52, 132, 179, 0.6);
}

.album {
  background: linear-gradient(rgba(54, 79, 60, 0.25), rgba(73, 101, 77, 0.55)),
    url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeUoOoPiVKRPgv1pCH5kJ4MNAf5AYZ79smS7u06U5NvhAChzZ9psABzjXvx8lrpfHPunWEpedduFGKWb4wU554H5f9FtiWMcmRAII2NaNVxPk2ZtNZHMr3ITeQ61yxGlQDSCyXqOacGjfkv0uosibjPrzDPNpMqzvr5uUQ8k4hUfPNt3O6CKw799UbRbNe/s200/AleXZavesa.jpg");
  background-repeat: no-repeat;
  background-size: 350px;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  position: absolute;
  pointer-events: none;
}

.thunderbolt {
  position: absolute;
  right: 0;
  color: #fff;
  margin: 10px;
  transition: all 0.4s ease;
}
#player:hover .thunderbolt {
  color: #ff0;
  filter: drop-shadow(0 0 5px #fff);
}

.equalizer {
  position: absolute;
  bottom: 150px;
  left: 15px;
  display: flex;
  align-items: flex-end;
  height: 30px;
  gap: 3px;
  z-index: 3;
  pointer-events: none;
}

.equalizer .bar {
  width: 4px;
  background: #ffffff;
  height: 5px;
  border-radius: 2px;
  animation: barbounce 1s infinite ease-in-out;
}

.equalizer .bar1 {
  animation-delay: 0s;
}

.equalizer .bar2 {
  animation-delay: 0.2s;
}

.equalizer .bar3 {
  animation-delay: 0.4s;
}

.equalizer .bar4 {
  animation-delay: 0.6s;
}

@keyframes barbounce {
  0%,
  100% {
    height: 5px;
  }

  50% {
    height: 20px;
  }
}

.music_info {
  max-height: 250px;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: transparent;
  background: rgba(0, 0, 0, 0.2);
  transform: translateY(20px);
  transition: all 0.5s ease-in-out;
  pointer-events: none;
}

.music_info::-webkit-scrollbar {
  width: 6px;
}

.music_info::-webkit-scrollbar-thumb {
  background-color: #8ba989;
  border-radius: 3px;
}

.currently-playing {
  text-align: center;
  line-height: 1.5;
  pointer-events: none;
}

.song-name,
.artist-name {
  font-family: "Questrial", sans-serif;
  text-transform: uppercase;
  margin: 5px auto;
}

.song-name {
  font-size: 0.8em;
  letter-spacing: 3px;
  color: #ffffff;
}

.artist-name {
  font-size: 0.6em;
  letter-spacing: 1.5px;
  color: #ffffff;
  margin-top: 5px;
}
.iframe-wrapper {
  display: block;
  background: #1b1b1b;
  width: 350px;
  height: 55px;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  z-index: 5;
  pointer-events: auto;
}
.iframe-wrapper iframe {
  position: absolute;
  top: -65px;
  pointer-events: auto;
}
 
    /* NÃO TEM JAVASCRIPT */
    Resultado

    Dance Playful Night

    AleXZavesa

    O "leitor HTML" apresentado nesta demonstração constitui uma versão adaptada do leitor personalizado, de criação de LW_19.

    Como podes verificar ao clicar em , este método -- ainda -- funciona e com alguma criatividade podemos até imitar a aparência dum leitor HTML personalizado.

Conclusão

Usar o Google Drive para integrar ficheiros de áudio MP3 no Blogger é uma forma simples e eficaz de enriquecer os teus artigos com conteúdos multimédia.
Embora, com as recentes atualizações, esta funcionalidade seja agora limitada ao uso de um iframe, continua a ser uma opção viável.

Com um pouco de esforço e o auxílio dos trechos de código disponibilizados, é possível incorporar facilmente ficheiros de áudio no teu blogue, proporcionando aos visitantes uma experiência mais interactiva e envolvente.
Esta abordagem assegura compatibilidade tanto com navegadores como com dispositivos móveis, além de oferecer uma solução prática para partilhar ficheiros de áudio.
Podes optar por utilizar directamente o código sugerido ou, se preferires ir um passo além, aplicar alguma criatividade para criar uma interface semelhante a um leitor de áudio em torno da iframe. ;)

E por hoje é tudo. 8)

Até Breve. :-F

Aspirante a Artista Digital, Moderador no site Heromorph desde 2007. Um dos fundadores do Quadradinhos inK, projecto de BD com artistas de Portugal e Brasil.
Gosto de BD, Cinema. Jogos e códigos HTML, CSS e Javascript.
Autor do Coisas K Aprendi por Aí, um blogue sobre nada e mais alguma coisa.
BloggerTwitterFacebookPinterestStackOverflowNexusModsGOG.comSteamContactoPaypal

Comentários

Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.

Mas antes de comentarem, leiam as minhas Regras dos Comentários.

Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.

Caso prefiras comentar numa nova janela, ou se o formulário abaixo estiver nos dias ruins, podes clicar aqui.

Enviar um comentário