Всплывающий аудиоплеер для всего форума

Спасибо! Всё работает отлично. Мне нужен совет по поводу интерфейса для iPhone. Когда я захожу с iPhone, я заметил, что «иконка игрока» выходит за пределы экрана, и пользователь не может закрыть музыкальный плеер. Не могли бы вы указать строку кода, которую нужно исправить?

Привет :wave:

Спасибо, я объединил исправление и добавил поддержку iPhone (footer-nav) и т.д.: UX: fix music player height and add iphone (footer-nav) support · VaperinaDEV/soundcloud-music-player@40509c7 · GitHub

Редактирование: также исправлена ширина и положение в настольной версии UX: fixe music player width and position on desktop · VaperinaDEV/soundcloud-music-player@56eb89b · GitHub

Редактирование: ещё одно обновление UX: Add arrow to music player button by VaperinaDEV · Pull Request #2 · VaperinaDEV/soundcloud-music-player · GitHub

music-player

Продолжая улучшать этот компонент темы, не мог бы кто-нибудь помочь мне с улучшением интерфейса? @Don — оригинальный автор этого компонента, и он проделал фантастическую работу!

Было бы здорово, если бы кнопка «Слушать» отображалась в виде музыкального плеера, как показано ниже, и пользователи могли бы скрывать этот новый музыкальный плеер. Обратите внимание: это применимо только к десктопной и планшетной версиям. Если вы знаете способ сделать так, чтобы это выглядело хорошо и не создавало беспорядка на мобильной версии — дайте знать.

Пример музыкального плеера

  1. Воспроизведение / пауза
  2. Перемешивание
  3. Переход вперед или назад
  4. Название трека и имя исполнителя
  5. Расположение в левой части экрана
  6. Стрелка для скрытия музыкального плеера

Текущая версия

Возможности использования компонента темы, на который вы ссылались, ограничены, так как он является обёрткой вокруг кода встраивания SoundCloud. Это ограничивает интерфейс пользователя чем-то вроде этого (для плейлиста):

Некоторые из запрашиваемых вами функций можно реализовать с помощью существующего компонента темы, но изменить сам музыкальный плеер не получится. Для этого потребуется компонент темы, который делает запросы к API SoundCloud: API - Wrappers - SoundCloud Developers.

Этот API требует учетные данные, поэтому, вероятно, не стоит развертывать его как компонент темы, так как это раскроет эту информацию в браузере. В таком случае лучше сделать его плагином и обрабатывать это соединение приватно на бэкенде.

Для аутентифицированных запросов потребуется плагин, но SoundCloud API позволяет выполнять множество операций без аутентификации, просто указав CLIENT_ID. Проигрыватель SoundCloud можно реализовать исключительно с помощью компонента темы. Владелец сайта должен будет зарегистрировать приложение в SoundCloud и указать свой CLIENT_ID в настройках темы.

Однако плагин для SoundCloud был бы действительно интересен. Он мог бы, например, позволять пользователям загружать треки в плейлист, записывать треки напрямую из Discourse и многое другое.

В сущности, аутентификация необходима для выполнения запросов PUT, POST и DELETE. Для выполнения GET-запросов она не требуется.

Редактирование: всё это было бы замечательно, но зарегистрировать приложение у них непросто:

Судя по результатам поиска в Google, возможно зарегистрировать приложение, отправив им электронное письмо, но этот метод недостаточно надёжен для компонента темы или плагина, требующих регистрации приложения владельцем сайта. Если процесс подачи заявки на их API изменится, я вернусь к этой теме.

@Don

Этот компонент просто чудесный, очень понравился. Спасибо за вашу работу.
Он делает форум таким радостным…

Есть одно предложение:
сейчас в настройках прописана только один список. Не могли бы вы улучшить его, чтобы поддерживались несколько плейлистов?

Можно добавить в настройки список плейлистов: {id списка, название списка}.
А в интерфейсе дать пользователям возможность выбирать список — это было бы очень здорово :slight_smile:
Например, добавить выпадающий список в боковую панель, возможно вверху, чтобы можно было выбрать плейлист.

Огромное спасибо… и надеюсь, вы рассмотрите это предложение…

Привет @fbpbdmin :wave:

Я объединил обновление для этого. Теперь вы можете добавлять больше пользователей / плейлистов в плеер. Оно содержит новую настройку.
Здесь вы можете выбрать тип встраивания для каждого плейлиста. users или playlists

например,

:arrow_down_small:


Больше плейлистов…

Привет, @Don! Это так здорово, большое спасибо! :100: :+1: :beers:

Привет, @Don

Для большего удовольствия :slight_smile:
Кажется, можно также интегрировать Spotify в этот отличный компонент радио.
Например, плейлист Spotify можно отобразить/встроить в виде похожего плеера.
(Сначала нужно добавить https://open.spotify.com/embed/ в список разрешённых iframe в настройках)

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

Это отображается так:

Ещё раз спасибо за этот отличный компонент и приятных праздников!

Дон, это действительно крутой компонент темы :fire:
Интересно, возможно ли разработать аналогичный компонент темы для отображения видео, функционирующий как видеоплеер? Такое дополнение было бы чрезвычайно полезным для размещения видеоуроков и другого контента для пользователей форума. Источниками видео могут служить такие платформы, как YouTube, Vimeo и подобные ресурсы.

Да, @Aizada_M, думаю в том же направлении.

Песен на SoundCloud не так много, как на других медиа-сайтах, загруженные треки могут быть неверно определены из-за проблем с авторскими правами.
Встраивание плееров в iframe, думаю, должно работать для большинства плееров: YouTube, Spotify и т. д.
И даже для некоторых небольших веб-игр, ха-ха…

Надеюсь, у @Дона найдётся время на это :slight_smile: Спасибо ещё раз!