Reproductor de audio flotante para todo el foro

¡Gracias! Funciona perfectamente. Algo en lo que necesitaría consejo es la interfaz de usuario para iPhone. Cuando accedo con un iPhone, noté que el “icono del reproductor” se sale de la pantalla y el usuario no puede cerrar el reproductor de música. ¿Podrías indicarme la línea de código para solucionar esto?

1 me gusta

Hola :wave:

Gracias, he fusionado una corrección y añadido soporte para iPhone (footer-nav) etc.: UX: fix music player height and add iphone (footer-nav) support · VaperinaDEV/soundcloud-music-player@40509c7 · GitHub

Editar: también corrige el ancho y la posición en la vista de escritorio UX: fixe music player width and position on desktop · VaperinaDEV/soundcloud-music-player@56eb89b · GitHub

Editar: más actualización UX: Add arrow to music player button by VaperinaDEV · Pull Request #2 · VaperinaDEV/soundcloud-music-player · GitHub

music-player

2 Me gusta

Al seguir mejorando este componente de tema, ¿hay alguna posibilidad de que alguien pueda ayudarme con una mejora de la interfaz de usuario? @Don es el autor original de este componente e hizo un trabajo fantástico.

Sería genial si el botón Escuchar apareciera como un reproductor de música como el de abajo y los usuarios aún pudieran ocultar este nuevo reproductor de música. Tenga en cuenta que esto sería solo para la versión de escritorio y tableta. A menos que conozca una manera de que aún se vea bien y no abarrote la versión móvil.

Ejemplo de reproductor de música

  1. Reproducir/pausar
  2. Aleatorio
  3. Saltar adelante o atrás
  4. Nombre de la canción y nombre del artista
  5. Posicionado a la izquierda de la pantalla
  6. Flecha para ocultar el reproductor de música

Versión actual

Lo que se puede hacer con el componente de tema al que enlazaste será limitado porque es un envoltorio del código de incrustación de SoundCloud. Eso limita la interfaz de usuario a algo como esto (para una lista de reproducción):

Parte de lo que pides se podría hacer con el componente de tema existente, pero no será posible hacer cambios en el reproductor de música real. Para hacer eso, necesitarías un componente de tema que hiciera solicitudes a la API de SoundCloud: API - Wrappers - SoundCloud Developers.

2 Me gusta

Esa API requiere credenciales, por lo que probablemente no deberías implementarla como un componente de tema, ya que expondría esa información al navegador. Sería mejor convertirla en un plugin y gestionar esa conexión de forma privada en el backend.

3 Me gusta

Para solicitudes autenticadas necesitarías un plugin, pero la API de SoundCloud te permite hacer mucho con solicitudes no autenticadas simplemente proporcionando un CLIENT_ID. Se podría crear un reproductor de SoundCloud solo con un componente temático. El propietario del sitio necesitaría registrar una aplicación en SoundCloud y proporcionar su CLIENT_ID como una configuración del tema.

Sin embargo, un plugin de SoundCloud sería realmente interesante. Podría hacer cosas como permitir a los usuarios subir pistas a una lista de reproducción, grabar pistas directamente desde Discourse, etc.

Básicamente, necesitas autenticación para hacer solicitudes PUT, POST y DELETE. No necesitas autenticación para hacer solicitudes GET.

Editar: todo esto sería genial, pero no facilitan el registro de una aplicación:

Después de buscar un poco en Google, parece que es posible registrar una aplicación enviándoles un correo electrónico, pero eso no es lo suficientemente confiable para un componente temático o un plugin que requeriría que el propietario del sitio registre una aplicación. Si las cosas cambian con su proceso de solicitud de API, volveré a esto.

2 Me gusta

@Don

Este componente es maravilloso, muy bueno. Agradezco tu trabajo.
Hace que el foro sea muy alegre…

Una sugerencia,
ahora está codificado en la configuración, solo una lista.
Me pregunto si podrías mejorarlo para admitir múltiples listas de reproducción,

podrías agregar una lista de listas de reproducción en la configuración, {id de lista, nombre de lista}
luego, en la interfaz de usuario, dar a los usuarios la opción de seleccionar una lista, eso sería muy, muy bueno :slight_smile:
por ejemplo, agregar un menú desplegable en el panel deslizante, tal vez en la parte superior, permite elegir una lista de reproducción,

muchas gracias… y espero que consideres esta mejora…

1 me gusta

Hola @fbpbdmin :wave:

He fusionado una actualización para esto. Ahora puedes añadir más usuarios / listas de reproducción al reproductor. Contiene una nueva configuración.
Aquí puedes elegir el tipo de incrustación para cada lista de reproducción. usuarios o listas de reproducción

por ejemplo

:arrow_down_small:


Más listas de reproducción…

4 Me gusta

hey @Don
¡esto es genial, realmente lo aprecio!
:100: :+1: :beers:

2 Me gusta

oye @Don

para más diversión, :slight_smile:
parece que también se podría integrar Spotify en este bonito componente de radio.
por ejemplo, una lista de reproducción de Spotify se puede renderizar/incrustar como un reproductor similar,
(primero hay que añadir https://open.spotify.com/embed/ a los iframes permitidos en la configuración)


<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>

esto se renderiza como

¡gracias de nuevo por este bonito componente y que tengas unas buenas vacaciones!

1 me gusta

Don, este es un componente temático realmente increíble :fire:
Me pregunto si sería factible desarrollar un componente temático comparable para mostrar videos, funcionando como un reproductor de video. Tal adición sería inmensamente beneficiosa para alojar tutoriales en video, entre otros contenidos, para los usuarios del foro. Las fuentes de video podrían incluir plataformas como YouTube, Vimeo y recursos similares.

sí, @Aizada_M estoy pensando en el mismo camino.

las canciones en soundcloud no son tantas como en otros sitios de medios, las canciones subidas podrían identificarse incorrectamente por problemas de derechos de autor.
incrustar los reproductores en un iframe, supongo que debería funcionar para la mayoría de los reproductores, youtube, spotify, etc…
e incluso algunos pequeños juegos web, jaja…

espero que @Don tenga tiempo para esto :slight_smile: ¡gracias de nuevo!

1 me gusta

Este tema se cerró automáticamente después de 298 días. Ya no se permiten nuevas respuestas.