フォーラム全体向けフロートオーディオプレーヤー

ありがとうございます!完璧に動作します。iPhoneのUIについていくつかアドバイスをいただきたいのですが。iPhoneでアクセスすると、「プレイヤーアイコン」が画面外に出てしまい、ユーザーはミュージックプレイヤーを閉じることができません。この問題を修正するためのコードの行を教えていただけますでしょうか。

「いいね!」 1

こんにちは :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 by VaperinaDEV · Pull Request #2 · VaperinaDEV/soundcloud-music-player · GitHub

music-player

「いいね!」 2

このテーマコンポーネントの改善を続けるにあたり、UIの改善についてどなたか手伝っていただけませんか? @Don はこのコンポーネントの元の作者であり、素晴らしい仕事をしてくれました!

再生ボタンが以下のような音楽プレーヤーとして表示され、ユーザーがこの新しい音楽プレーヤーを非表示にできるようにすると素晴らしいでしょう。これはデスクトップ版とタブレット版のみを対象とします。モバイル版でも見栄えが良く、煩雑にならない方法をご存知ない限りは。

音楽プレーヤーの例

  1. 再生/一時停止
  2. シャッフル
  3. 早送りまたは巻き戻し
  4. 曲名とアーティスト名
  5. 画面の左側に配置
  6. 音楽プレーヤーを非表示にする矢印

現在のバージョン

リンクされたテーマコンポーネントでできることは限られています。なぜなら、それはSoundCloudの埋め込みコードのラッパーだからです。そのため、UIは(プレイリストの場合)以下のようになります。

ご要望の一部は既存のテーマコンポーネントで実現可能ですが、実際のミュージックプレイヤーに変更を加えることはできません。それを行うには、SoundCloud APIにリクエストを行うテーマコンポーネントが必要です:API - Wrappers - SoundCloud Developers

「いいね!」 2

そのAPIは認証情報を必要とするため、ブラウザにその情報が公開されるため、テーマコンポーネントとしてデプロイするのは避けるべきです。代わりにプラグインにして、バックエンドでその接続をプライベートに処理するのが最善でしょう。

「いいね!」 3

認証されたリクエストにはプラグインが必要ですが、SoundCloud APIでは、CLIENT_IDを指定するだけで、認証されていないリクエストで多くのことができます。SoundCloudプレーヤーは、テーマコンポーネントだけで作成できます。サイト所有者はSoundCloudでアプリを登録し、CLIENT_IDをテーマ設定として提供する必要があります。

しかし、SoundCloudプラグインは非常に興味深いものになるでしょう。ユーザーがトラックをプレイリストにアップロードしたり、Discourseから直接トラックを録音したりできるようになります。

基本的に、PUTPOSTDELETEリクエストを行うには認証が必要です。GETリクエストを行うには認証は必要ありません。

編集:これらはすべて素晴らしいでしょうが、アプリの登録を簡単にはさせてくれません。

少しグーグルで検索したところ、メールでアプリを登録することは可能のようですが、サイト所有者がアプリを登録する必要があるテーマコンポーネントまたはプラグインとしては信頼性が低すぎます。APIアプリケーションプロセスに変更があった場合は、これに戻ります。

「いいね!」 2

@Don
このコンポーネントは素晴らしいですね。あなたの仕事に感謝します。
フォーラムがとても楽しくなります…

提案が1つあります。
現在、設定でハードコーディングされており、リストは1つだけです。
複数のプレイリストをサポートするように強化できないでしょうか。

設定にプレイリストのリストを追加できますか? {リストID、リスト名}
その後、UIでユーザーにリストを選択するオプションを提供できれば、それは非常に素晴らしいでしょう :slight_smile:
たとえば、スライドパネルにドロップダウンを追加して、おそらく一番上に、プレイリストを選択できるようにします。

本当にありがとうございます…そして、この機能強化を検討していただけると幸いです…

「いいね!」 1

こんにちは @fbpbdmin さん :wave:

アップデートをマージしました。これで、プレイヤーにユーザー/プレイリストを追加できるようになりました。新しい設定が含まれています。
ここでは、各プレイリストの埋め込みタイプを選択できます。「users」または「playlists」です。

例:

:arrow_down_small:


さらに多くのプレイリスト…

「いいね!」 4

@Don さん、こんにちは。
とても素晴らしいですね。本当に感謝しています!
:100: :+1: :clinking_beer_mugs:

「いいね!」 2

@Donさん、こんにちは。

さらに楽しむために、:slight_smile:
この素敵なラジオコンポーネントにSpotifyを統合することもできそうです。
例えば、Spotifyのプレイリストを同様のプレーヤーとしてレンダリング/埋め込むことができます。
(まず、設定で許可される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>

これは次のようにレンダリングされます。

この素敵なコンポーネントをありがとうございました。良い休日をお過ごしください!

「いいね!」 1

ドン、これは本当に素晴らしいテーマコンポーネントです:fire:
動画プレイヤーとして機能する、同等のテーマコンポーネントを開発することは可能でしょうか。このような追加機能は、フォーラムユーザー向けの動画チュートリアルなどのコンテンツをホストするのに非常に役立ちます。動画ソースには、YouTube、Vimeoなどのプラットフォームを含めることができます。

はい、@Aizada_M さん、同じことを考えていました。

SoundCloudの曲は他のメディアサイトほど多くなく、アップロードされた曲は著作権の問題で誤って識別される可能性があります。
プレイヤーをiframeに埋め込むと、ほとんどのプレイヤー(YouTube、Spotifyなど)で機能するはずです。
小さなウェブゲームでも、ハハ…

@Don さんに時間が取れることを願っています :slight_smile: 再度感謝します!

「いいね!」 1

このトピックは298日後に自動的に閉じられました。返信はもう許可されていません。