Executando verificação de segurança...
7

[ 🎵💡 Spotify ] Widget do Spotify para integrar na Twitch e Streamlabs, ou no seu Website

Oi! Tudo bom?

Bom,

Eu estava esses dias querendo fazer alguma coisa diferente, e ai tive a ideia de tentar fazer um Widget para o StreamLabs - O aplicativo de Streaming para a Twitch.


Depois de umas horas de madrugada dando umas sofridas, consegui finalmente terminar ele, e o resultado final, integrado no StreamLabs, utilizando o aplicativo ficou assim:

Imagem do Mini Player


Explicação e Entendendo o que o app faz

O Software é uma API em Express, e AXIOS, que vai servir como o intermediador para poder gerar seus Tokens/Auth, e fazer as requisições na API do Spotify.

Com isso, você consegue criar qualquer tipo de Widget em HTML e CSS, precisando usar o JavaScript apenas pra popular os dados.


Com o aplicativo, você consegue puxar as informações do seu Spotify, como que música está ouvindo, como está sua fila...

Dependências do Projeto

A API é relativamente simples, usa as seguintes dependências:

"dependencies": {
    "axios": "^1.6.2",
    "cors": "^2.8.5",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "nodemon": "^3.0.1"
  }

Tem um exemplo 100% Funcional no meu GitHub, neste repositório, onde para fazer a integração com a API do Spotify, você precisa seguir este ReadMe que explica o fluxo e como a API funciona, e ai depois de subir a API, você pode ou utilizar um dos examples nas pastas de "Widgets" e "Examples", ou criar o seu próprio mini-player customizado! 🗿🍷


💖 Contribua

Vale lembrar que o projeto é aberto, então se você quiser contribuir, colocar um exemplo que você fez ou até mesmo inserir novas funcionalidades na API, fique a vontade!

Só não se esqueça de manter a abstração e não inserir nenhum dado sensível nos seus códigos. 🤔
Para ir direto p/ o Repositório, você pode usar o Card abaixo.

Readme Card


Até a próxima! ❤️

Carregando publicação patrocinada...
2
1

Opá, tudo certo ?
Achei bem interessante!
Sempre tive a curiosidade de como elaborar esses widget para streaming.
Vou da uma explorada no repósitorio.

1

Poh! Que massa Oliveira, valeu manin. Fique a vontade, se quiser mandar uns commits lá, mete marcha hahah. Tem algumas coisas q ainda estou com dificuldades ali, como por exemplo a sincronização de algumas coisas (Eu consulto a cada segundo, mas acho que precisa ser pelo menos acada uns 300MS, não sei como a performance vai se comportar assim).

E tem a questão de renovar o token automaticamente, fazer uma cron ou uma rotina pra ficar renovando no back-end o token... Mas acho q vou ajustar isso só mais pra frente kk.

Valeu amigo! ⭐

1

isso deixa a live mais imersiva mudando um pouco a experiência do usuario e alem disso é um excelente projeto que pode ser integrado a diversos outros

1

Poh, verdade. Espero que ele sirva de base ou ajuda alguém que queria fazer algo mais bonito hahah. Eu pessoalmente sou muito ruim no Front-End, tanto que o exemplo eu peguei no CodePen...

Mas tenho certeza que alguém por ai bem criativo consegue fazer uma parada bem daora.

1