전체 포럼용 플로팅 오디오 플레이어

감사합니다! 완벽하게 작동합니다. 한 가지 조언이 필요한 부분은 iPhone용 UI입니다. iPhone으로 접속했을 때 "Player icon"이 화면 밖으로 나가서 사용자가 음악 플레이어를 닫을 수 없었습니다. 이 문제를 수정할 수 있는 코드 줄을 알려주실 수 있을까요?

안녕하세요 :wave:

감사합니다. 수정 사항을 병합하고 iPhone(푸터 내비게이션) 등 지원 기능을 추가했습니다: 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 - Pull Request #2 - VaperinaDEV/soundcloud-music-player - GitHub

music-player

이 테마 컴포넌트를 지속적으로 개선하고 있는 중인데, UI 개선에 도움을 주실 분이 있을까요? @Don은 이 컴포넌트의 최초 작성자로, 정말 훌륭한 작업을 해주셨습니다!

아래와 같이 ‘듣기’ 버튼이 음악 플레이어 형태로 표시되고, 사용자가 이 새로운 음악 플레이어를 여전히 숨길 수 있으면 좋겠습니다. 참고로 이는 데스크톱 및 태블릿 버전에만 적용될 예정입니다. 모바일 버전에서도 여전히 깔끔하게 보일 수 있는 방법이 알고 계신다면 예외가 될 수 있겠습니다.

음악 플레이어 예시

  1. 재생/일시정지
  2. 무작위 재생
  3. 앞/뒤로 건너뛰기
  4. 곡명과 아티스트 이름
  5. 화면 왼쪽에 위치
  6. 음악 플레이어를 숨기는 화살표

현재 버전

링크하신 테마 컴포넌트로 할 수 있는 일은 제한적입니다. 이는 SoundCloud 임베드 코드를 감싸는 래퍼이기 때문입니다. 따라서 UI는 다음과 같은 수준으로만 제한됩니다(플레이리스트의 경우):

요청하신 내용 중 일부는 기존 테마 컴포넌트로 구현할 수 있지만, 실제 음악 플레이어 자체를 수정하는 것은 불가능합니다. 이를 위해서는 SoundCloud API에 요청을 보내는 테마 컴포넌트가 필요합니다: API - Guide - SoundCloud Developers.

해당 API는 자격 증명이 필요하므로, 브라우저에 해당 정보가 노출될 수 있으므로 테마 컴포넌트로 배포하는 것은 권장하지 않습니다. 대신 플러그인으로 만들어 백엔드에서 해당 연결을 비공개로 처리하는 것이 가장 좋습니다.

인증된 요청을 수행하려면 플러그인이 필요하지만, SoundCloud API는 CLIENT_ID만 제공하면 인증되지 않은 요청으로도 많은 작업을 수행할 수 있습니다. SoundCloud 플레이어는 테마 컴포넌트 하나만으로 만들 수 있습니다. 사이트 소유자는 SoundCloud에서 앱을 등록하고 CLIENT_ID를 테마 설정으로 제공해야 합니다.

SoundCloud 플러그인은 정말 흥미로울 것입니다. 사용자가 플레이리스트에 트랙을 업로드하거나, Discourse에서 직접 트랙을 녹음하는 등의 작업을 수행할 수 있겠죠.

결론적으로, PUT, POST, DELETE 요청을 보내려면 인증이 필요합니다. GET 요청을 보내려면 인증이 필요하지 않습니다.

수정: 위 내용들은 모두 훌륭하지만, 앱 등록 과정이 쉽지가 않습니다:

여기저기 검색해 보니 이메일을 보내면 앱 등록이 가능한 것 같지만, 사이트 소유자가 앱을 등록해야 하는 테마 컴포넌트나 플러그인에는 그 정도 신뢰성이 부족합니다. API 신청 절차가 변경되면 다시 이 주제를 다뤄보겠습니다.

@Don

이 컴포넌트는 정말 훌륭하고 좋습니다. 수고하신 점 감사드립니다.
이 덕분에 포럼이 훨씬 더 즐거워졌어요…

한 가지 제안이 있는데요,
현재 설정에 하드코딩되어 있어 목록이 하나만 지원됩니다.
여러 개의 재생 목록을 지원하도록 개선할 수 있을지 궁금합니다.

설정에서 재생 목록 목록을 추가할 수 있게 하면, {list id, list name} 형식으로 관리할 수 있겠죠.
그리고 UI에서 사용자가 목록을 선택할 수 있는 옵션을 제공하면 정말 정말 좋을 것 같습니다 :slight_smile:
예를 들어, 슬라이드 패널 상단에 드롭다운을 추가해서 재생 목록을 선택할 수 있게 하는 거예요.

정말 감사합니다… 이 개선 사항을 고려해 주시길 바랍니다…

안녕하세요 @fbpbdmin :wave:

이 문제에 대한 업데이트를 병합했습니다. 이제 플레이어에 더 많은 사용자/재생 목록을 추가할 수 있습니다. 새로운 설정이 포함되어 있습니다.
여기서 각 재생 목록에 대한 임베드 유형을 선택할 수 있습니다. users 또는 playlists

예를 들어

:arrow_down_small:


더 많은 재생 목록…

hey @Don
정말 감사해요, 너무 좋아요!
:100: :+1: :beers:

hey @Don

더 재미있게 즐기려면 :slight_smile:
이 멋진 라디오 컴포넌트에 스포티파이를 통합할 수도 있을 것 같아요.
예를 들어, 스포티파이 플레이리스트를 비슷한 플레이어 형태로 렌더링/임베드할 수 있죠.
(먼저 설정에서 허용된 iframe 목록에 https://open.spotify.com/embed/를 추가해야 합니다)

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

이렇게 렌더링됩니다.

이 멋진 컴포넌트를 만들어 주셔서 다시 한번 감사드립니다. 즐거운 휴가 보내세요!

Don, 정말 멋진 테마 컴포넌트네요 :fire:
비슷한 테마 컴포넌트를 개발하여 비디오를 표시하고 비디오 플레이어 역할을 할 수 있을지 궁금합니다. 이러한 추가 기능은 포럼 사용자들이 비디오 튜토리얼 등 다양한 콘텐츠를 호스팅하는 데 매우 유용할 것입니다. 비디오 소스는 YouTube, Vimeo 및 유사한 플랫폼을 포함할 수 있습니다.

네, @Aizada_M 님과 같은 방향으로 생각하고 있습니다.

사운드클라우드의 곡 수는 다른 미디어 사이트만큼 많지 않고, 업로드된 곡이 저작권 문제로 잘못 식별될 수 있습니다.
플레이어를 iframe에 임베딩하는 방식이라면, 유튜브, 스포티파이 등 대부분의 플레이어에서 작동할 것으로 생각합니다.
심지어 일부 작은 웹 게임도 가능하겠네요, 하하…

@Don 님이 이 문제에 시간을 내주실 수 있기를 바랍니다 :slight_smile: 다시 한번 감사합니다!