Gerador de código para incorporar o Spotify

Cole um link do Spotify para uma faixa, álbum, playlist, artista ou episódio de podcast e obtenha um leitor gratuito que pode colocar no seu site, sem necessidade de registo.
Gerador de código para incorporar o Spotify
Um link de faixa, álbum, playlist, artista, podcast ou episódio (os URI spotify: também funcionam), por exemplo https://open.spotify.com/playlist/…Quer o seu próprio leitor de áudio com a sua playlist?

Incorporar o leitor

<iframe src="https://open.spotify.com/embed/track/4uLU6hMCjMI75M1A2tKUQC?utm_source=generator" title="Leitor do Spotify" width="100%" height="352" style="border:0;border-radius:12px;" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
<p style="margin:4px auto 0;text-align:center;font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#a3a7b0;">Criado com <a href="https://elfsight.pt/tools/spotify-embed-generator/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Elfsight</a></p>

  1. Clique em Copiar código acima para o copiar.
  2. Abra o ficheiro HTML ou o modelo da página.
  3. Cole o código dentro de <body>, onde o conteúdo deve aparecer.
  4. Guarde e carregue a página e abra-a num navegador para verificar.

Quer o seu próprio leitor de áudio com a sua playlist e a sua marca? Experimente o widget Audio Player. Ver Audio Player →

Antes de sair

Quer o seu próprio leitor de áudio com a sua playlist e a sua marca? Experimente o widget Audio Player.

Ver Audio Player →
Ou partilhe esta ferramenta gratuita:
Widget Audio Player

O seu próprio leitor de áudio, com a sua playlist

Partilhe lançamentos, programas de áudio ou palestras a partir de um único leitor no seu site. Suporta fontes como SoundCloud, YouTube, Vimeo e Google Drive, e ficheiros que carregar.

  • Faixas do SoundCloud, YouTube, Google Drive e mais

  • Carregue ficheiros ou adicione-os por link

  • A música toca diretamente no seu site

Criar widget gratuitamente
Sem cartão de crédito
Conhecer o Audio Player

Gerador de código do Spotify vs. Partilhar → Incorporar do Spotify

O menu de incorporação do próprio Spotify funciona bem quando tem a aplicação de computador ou o leitor web abertos. O gerador parte de um link, por isso pode criar o código a partir de qualquer lugar.
Partilhar → Incorporar do Spotify
Este gerador
No telemóvel
A aplicação móvel do Spotify não lhe dá o código de incorporação.
Funciona com um link copiado da aplicação móvel.
Tipos de conteúdo
Faixa, álbum, playlist, artista, programa de podcast e episódio.
Os mesmos seis tipos, detetados a partir do link.
Links desarrumados
Não é problema: parte do próprio item.
Remove o parâmetro de partilha ?si= e partes de idioma como /intl-de/ dos links colados.
Tamanho e cor
Opções de cor e tamanho no menu de incorporação.
Altura normal ou compacta e um tema de cor.

No telemóvel

Partilhar → Incorporar do Spotify

A aplicação móvel do Spotify não lhe dá o código de incorporação.

Este gerador

Funciona com um link copiado da aplicação móvel.

Tipos de conteúdo

Partilhar → Incorporar do Spotify

Faixa, álbum, playlist, artista, programa de podcast e episódio.

Este gerador

Os mesmos seis tipos, detetados a partir do link.

Links desarrumados

Partilhar → Incorporar do Spotify

Não é problema: parte do próprio item.

Este gerador

Remove o parâmetro de partilha ?si= e partes de idioma como /intl-de/ dos links colados.

Tamanho e cor

Partilhar → Incorporar do Spotify

Opções de cor e tamanho no menu de incorporação.

Este gerador

Altura normal ou compacta e um tema de cor.

Opções de incorporação do Spotify

O que pode definir no código de incorporação e o que cada tipo de conteúdo lhe oferece.
Opção
O que faz
Valores
Notas
Conteúdo
O que o leitor mostra: uma música, uma coleção ou um podcast.
Faixa, álbum, playlist, artista, programa, episódio
Detetado a partir do link. Uma faixa com um videoclipe elegível mostra o vídeo automaticamente, com o mesmo código de incorporação.
Altura
A altura do leitor.
Normal (352 px) ou compacto (152 px)
O compacto serve para uma única música ou episódio num espaço estreito. O normal dá mais espaço a álbuns, playlists e artistas.
Largura
A largura do leitor.
100% por predefinição
A 100%, o leitor preenche o contentor e adapta-se aos telemóveis.
Tema
O esquema de cores do leitor.
Predefinido ou escuro
O menu de incorporação do próprio Spotify oferece o mesmo tipo de escolha de cor.
allow
Concede ao leitor as funcionalidades do navegador de que precisa.
autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture
É o que o código do próprio Spotify utiliza. Mantenha encrypted-media: sem ele, o leitor só reproduz pré-visualizações.
loading
Quando o navegador carrega o leitor.
lazy
O leitor carrega quando um visitante se aproxima dele ao deslocar a página, para que o resto da página carregue mais depressa.

Conteúdo

O que faz

O que o leitor mostra: uma música, uma coleção ou um podcast.

Valores

Faixa, álbum, playlist, artista, programa, episódio

Notas

Detetado a partir do link. Uma faixa com um videoclipe elegível mostra o vídeo automaticamente, com o mesmo código de incorporação.

Altura

O que faz

A altura do leitor.

Valores

Normal (352 px) ou compacto (152 px)

Notas

O compacto serve para uma única música ou episódio num espaço estreito. O normal dá mais espaço a álbuns, playlists e artistas.

Largura

O que faz

A largura do leitor.

Valores

100% por predefinição

Notas

A 100%, o leitor preenche o contentor e adapta-se aos telemóveis.

Tema

O que faz

O esquema de cores do leitor.

Valores

Predefinido ou escuro

Notas

O menu de incorporação do próprio Spotify oferece o mesmo tipo de escolha de cor.

allow

O que faz

Concede ao leitor as funcionalidades do navegador de que precisa.

Valores

autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture

Notas

É o que o código do próprio Spotify utiliza. Mantenha encrypted-media: sem ele, o leitor só reproduz pré-visualizações.

loading

O que faz

Quando o navegador carrega o leitor.

Valores

lazy

Notas

O leitor carrega quando um visitante se aproxima dele ao deslocar a página, para que o resto da página carregue mais depressa.

Spotify for Developers: Creating an Embed ↗

Problemas comuns com a incorporação do Spotify

Só é reproduzida uma curta pré-visualização.

Em algumas situações, o Spotify transmite um excerto de pré-visualização com menos de 30 segundos em vez da música completa. Os visitantes que não têm sessão iniciada no Spotify no navegador ouvem uma pré-visualização e é-lhes pedido que iniciem sessão ou se registem. Não é possível alterar isto a partir do código de incorporação.

Só são reproduzidas pré-visualizações, mesmo para visitantes com sessão iniciada.

Verifique se allow="encrypted-media" continua no iframe. Alguns construtores de sites e plugins removem atributos; sem este, o Spotify só reproduz pré-visualizações.

A reprodução completa não funciona em alguns navegadores.

O Spotify indica o Chrome, o Firefox, o Edge, o Opera e o Safari como os navegadores com melhor suporte. Noutros, as músicas e os episódios completos podem não ser reproduzidos na incorporação.

O leitor não arranca sozinho.

Navegadores como o Safari bloqueiam a reprodução automática até o visitante interagir com a página. O Spotify também recomenda não reproduzir podcasts automaticamente em sites externos, para manter as estatísticas de audição rigorosas.

Não encontra a opção de incorporação no telemóvel.

A aplicação móvel do Spotify não fornece código de incorporação. Copie o link de partilha na aplicação e cole-o aqui, ou use a aplicação de computador ou o leitor web.

O leitor desaparece depois de guardar a página.

Alguns editores removem os iframes dos blocos de texto normais. Cole o código num bloco de HTML personalizado ou de incorporação.

Como incorporar o Spotify num site

  1. Copie o link do Spotify

    No Spotify, escolha Partilhar → Copiar link numa faixa, álbum, playlist ou episódio.

  2. Escolha o leitor

    Cole o link e escolha o leitor compacto ou completo e o tema.

  3. Cole o código

    Adicione o código a um bloco HTML da sua página.

Perguntas frequentes

Mais Geradores de código de incorporação

Gerador de iframe

Crie um iframe responsivo para qualquer página, formulário ou aplicação.Gerador de iframe