Player de áudio flutuante para todo o fórum

Obrigado! Funciona perfeitamente. Uma coisa em que eu precisaria de aconselhamento é sobre a interface do usuário para iPhone. Quando acesso com um iPhone, notei que o “ícone do jogador” sai da tela e o usuário não consegue fechar o reprodutor de música. Você se importaria de me direcionar para a linha de código para corrigir isso.

1 curtida

Olá :wave:

Obrigado, mesclei um patch e adicionei suporte para iPhone (footer-nav) etc..: UX: fix music player height and add iphone (footer-nav) support · VaperinaDEV/soundcloud-music-player@40509c7 · GitHub

Editar: também corrige a largura e a posição na visualização de desktop UX: fixe music player width and position on desktop · VaperinaDEV/soundcloud-music-player@56eb89b · GitHub

Editar: mais atualizações UX: Add arrow to music player button by VaperinaDEV · Pull Request #2 · VaperinaDEV/soundcloud-music-player · GitHub

music-player

2 curtidas

Continuando a melhorar este componente de tema, alguma chance de alguém me ajudar com uma melhoria na UI. @Don é o autor original deste componente e fez um trabalho fantástico!

Seria ótimo se o botão Ouvir aparecesse como um reprodutor de música como abaixo e os usuários ainda pudessem ocultar este novo reprodutor de música. Observação: isso seria apenas para a versão desktop e tablet. A menos que você saiba de uma maneira de fazer com que ainda fique bom e não poluído na versão móvel

Exemplo de reprodutor de música

  1. Reproduzir/pausar
  2. Aleatório
  3. Avançar ou retroceder
  4. Nome da música e nome do artista
  5. Posicionado no lado esquerdo da tela
  6. Seta para ocultar o reprodutor de música

Versão atual

O que pode ser feito com o componente de tema ao qual você se vinculou será limitado porque é um invólucro em torno do código de incorporação do SoundCloud. Isso limita a interface do usuário a algo como isto (para uma playlist):

Parte do que você está pedindo poderia ser feito com o componente de tema existente, mas não será possível fazer alterações no player de música real. Para fazer isso, você precisaria de um componente de tema que fizesse solicitações à API do SoundCloud: API - Wrappers - SoundCloud Developers.

2 curtidas

Essa API requer credenciais, então você provavelmente não deveria implementá-la como um Componente de Tema, pois isso exporia essas informações ao navegador - seria melhor transformá-la em um plugin e lidar com essa conexão privadamente no back-end.

3 curtidas

Para requisições autenticadas, você precisaria de um plugin, mas a API do SoundCloud permite fazer muita coisa com requisições não autenticadas, apenas fornecendo um CLIENT_ID. Um player do SoundCloud poderia ser feito apenas com um componente de tema. O proprietário do site precisaria registrar um aplicativo no SoundCloud e fornecer seu CLIENT_ID como uma configuração de tema.

Um plugin do SoundCloud seria realmente interessante, porém. Ele poderia fazer coisas como permitir que os usuários enviem faixas para uma playlist, gravem faixas diretamente do Discourse, etc.

Essencialmente, você precisa de autenticação para fazer requisições PUT, POST e DELETE. Você não precisa de autenticação para fazer requisições GET.

Editar: tudo isso seria ótimo, mas eles não facilitam o registro de um aplicativo:

Pesquisando um pouco, parece que é possível registrar um aplicativo enviando um e-mail para eles, mas isso não é confiável o suficiente para um componente de tema ou plugin que exigiria que o proprietário do site registrasse um aplicativo. Se as coisas mudarem com o processo de aplicação da API deles, eu voltarei a isso.

2 curtidas

@Don

Este componente é maravilhoso, tão bom. Agradeço seu trabalho.
Torna o fórum tão alegre…

Uma sugestão,
agora está codificado em configurações, apenas uma lista.
Será que poderia aprimorá-lo para suportar várias playlists?

Poderia adicionar uma lista de playlists nas configurações, {id da lista, nome da lista}
Então, na UI, dar aos usuários a opção de selecionar uma lista, isso seria muito, muito bom :slight_smile:
Por exemplo, adicionar um dropdown no painel deslizante, talvez no topo, permite escolher uma playlist,

Muito obrigado… e espero que considere este aprimoramento…

1 curtida

Olá @fbpbdmin :wave:

Eu mesclei uma atualização para isso. Agora você pode adicionar mais usuários / playlists ao player. Ela contém uma nova configuração.
Aqui você pode escolher o tipo de incorporação para cada playlist. users ou playlists

por exemplo.

:arrow_down_small:


Mais playlists…

4 curtidas

ei @Don
isso é tão bom, realmente aprecio! :100: :+1: :beers:

2 curtidas

Olá @Don

para mais diversão, :slight_smile:
parece que o Spotify também poderia ser integrado a este bom componente de rádio
por exemplo, uma playlist do Spotify pode ser renderizada/incorporada como um player semelhante,
(precisa adicionar https://open.spotify.com/embed/ aos iframes permitidos nas configurações primeiro)

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/37i9dQZF1E37rs1nnrBO2K?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

isso renderiza como

obrigado novamente por este bom componente e boas festas!

1 curtida

Don, este é um componente de tema realmente incrível :fire:
Gostaria de saber se é viável desenvolver um componente de tema comparável para exibir vídeos, funcionando como um player de vídeo. Tal adição seria imensamente benéfica para hospedar tutoriais em vídeo, entre outros conteúdos, para os usuários do fórum. As fontes de vídeo poderiam incluir plataformas como YouTube, Vimeo e recursos semelhantes.

sim, @Aizada_M pensando no mesmo caminho.

as músicas no soundcloud não são tantas quanto em outros sites de mídia, músicas enviadas podem ser identificadas incorretamente por questões de direitos autorais.
incorporar os players em um iframe, acho que deve funcionar para a maioria dos players, youtube, spotify etc…
e até alguns pequenos jogos da web, haha…

espero que @Don tenha tempo para isso :slight_smile: obrigado novamente!

1 curtida

Este tópico foi automaticamente fechado após 298 dias. Novas respostas não são mais permitidas.