Um aplicativo da web para exibir sua música atualmente tocando no Spotify. Permite pular músicas, reproduzir/pausar e curtir/diferente. Analisa a obra de arte do álbum para escolher a cor de fundo e primeiro plano para combinar com a imagem. Pesquisas a cada dois segundos para atualizar a tela para mostrar sua música atualmente tocando. Escalas para o tamanho da sua tela usando layout dinâmico.
Comecei meu projeto configurando um site básico para mostrar o JSON RAW dos meus dados do Spotify utilizando o Spotipy, uma API do Spotify Python de código aberto. Mais tarde, escrevi um JavaScript para pesquisar a API do Spotify a cada dois segundos para verificar se há alterações. Se a música mudou, a página será atualizada com as novas informações.
Eu calculei a paleta de cores usando uma biblioteca JavaScript chamada ColorThief, que agarra a cor dominante para o fundo e uma cor alternativa contrastante da paleta para o texto. A cor do texto não é apenas preta ou branca, mas mostra algumas cores alternativas para formar uma paleta inteira e encontra uma cor dessa paleta que contrasta com a cor de fundo selecionada.
Eu uso símbolos de material do Google para os ícones de controle de reprodução. Isso permite uma escala fácil para diferentes tamanhos de tela sem precisar de imagens separadas.
Obter o arranjo de elementos na tela e a escala para diferentes exibições foi um desafio. Eu queria que parecesse pelo menos tolerável em qualquer coisa de um PC com uma tela de paisagem, para algo como um telefone celular. Não é perfeito, mas é bastante sólido. Além disso, descobrir em que ponto o texto deve ser branco em vez de preto era difícil. Eu tive que garantir que os detalhes da música fossem facilmente legíveis, não importa o que a música estivesse tocando naquele momento.
Existem muitas maneiras diferentes de hospedar este webApp. Eu pessoalmente uso o Fly.io. Você também precisará configurar um aplicativo de desenvolvedor do Spotify para obter o seu ID do cliente e segredo do cliente do Spotify.
Crie uma conta do Spotify Developer se você não tiver uma e crie um novo aplicativo. Você precisará anotar o ID do cliente e o segredo do cliente. Hospedar o WebApp usando uma das três opções a seguir:
Em seguida, volte para o painel do Spotify Developer e digite o URI de redirecionamento. Certifique -se de remover qualquer corte à direita. Deve ser funcional!
Há informações extras sobre como definir as variáveis do ambiente e hospedar localmente em um grande comentário no topo do app.py.
Originalmente, este era um projeto para o curso de Harvard CS50. Desde então, tenho adicionado recursos próprios. Você pode ver a versão CS50 original em uma filial separada. Desde então, eu melhorei massivamente o algoritmo de detecção de cores. Agora também existe uma filial designada "Raspi" que contém linhas de código extras para chamar um servidor da web local para desligar a tela do Raspberry Pi quando a música não está tocando.
Ainda pretendo atualizá -lo para corrigir bugs com a detecção de cores e a escala de tela, e mais alguns botões e recursos de bônus e muito mais.