• ympdのスタイル変更について

    @Cresson さま
    とりあえず試作はあっさり出来ましたが、既存のWebUI部分との融合とレイアウトの調整が
    重くのしかかってきます。
    急いで使いたい方は居ないと想定し、時間を掛けさせていただきます。

    RaspberryPiへの大量アクセスによる、音質劣化の懸念ですが、
    「楽曲再生中は再生曲の操作以外RaspberryPiへのアクセスを内部で停止する」モードを備えようかと考えています。
    ↑
    当然ながらProcessCutdownのようにユーザが有効にするかを選択できるようにしたい。

    @Grigri さま
    カバーアートについてはWebUIでは以下の方法で表示させています。
    ①アルバムディレクトリ内のFolder.jpgもしくはfolder.jpg
    ②アルバムディレクトリ内のアルバム名 - アーティスト名.jpg
    ③last.fmからダウンロードしたもの

    ということは自分でお好きなカバーアートを①の名前を付けてで保存しておけばよいということです。
    (私のグリッドモード試作でも、プログラム開発の合間に保有するアーティストの画像を先に探してFolder.jpgという名前で保存しておきました。アーティスト名のカバーアートがズラッと並ぶのは
    結構気持ち良いです。)
    ↑
    なお、v1.0向けのリポジトリでは今回新規対応予定の楽曲埋め込みカバーアートが最優先で表示されるようにしています。
    (希望が多いようなら優先度を切替可能な仕組みを考えたいと思います。)
    なお、グリッド表示では現状埋め込みカバーアートは使用していません。

    @hiroget9 さま
    カバーアートのグリッド表示はMPD専用クライアントで実現していますので、やっぱりやってみたかったということですね。

    という訳で、連休中も時間を見つけながら少しづつ進めていきたいと思います。

  • @sunatomo さん
    お世話になりなす。
    聴きたいアルバムを選ぶ時は、アルバム名を思い出せなくても、カバーアートは一瞬でピンと来ます。昔に見たジャケットを中古レコード屋で瞬時に見つけられるのは、アルバム名より視覚的な要因が大きいと思います。
    実現していただけれるとうれしいです(^^♪

  • sunatomoさん

    おはようございます。

    カバーアート表示に際して、ラズパイ(プレーヤ側)の負荷増加を懸念しておられる由。

    当方はMPDクライアント環境からですが、サーバーPC(NAS)のFolder.jpgを直接読みに行くような(プレーヤとしてのラズパイを経由せず)設定としています。クライアントがNASのアドレスに向かってHTTP GETを出す仕組み(NAS側でHTTPサーバーの稼働が前提)です。

    WEB-UIの場合はこれ自体がラズパイの中で動いていますので、上記のケースと負荷の差異が生じるかどうか判りませんが、、、

    ただし、感覚的にはですがカバーアート用のキャッシュがやはり必要かも? とは思います。

  • @ゴンザエモン さま
    NAS側のWebサーバを利用してRaspberryPiへのアクセスを減らすことは確かに出来ますね。
    カバーアートの取得部分を共通化した際に併せて検討します。
    (カバーアートの取得処理は今までは楽曲変更時の関数に含まれていたため、
    グリッド表示でも同処理使用するために共通化することとします。
    試作版ではグリッド向けのカバーアート処理は簡易なもので対応していました。)

  • WebUIグリッドビュー対応板(エンジニアリングプレビュー)
    当方環境にて、動作確認が終了いたしましたので、試用のために貼り付けておきます。
    人柱上等の方はお試しください(元の実行ファイルはバックアップを取って下さい)
    ympd-sample_2020-05-05.zip

    試作版の画面を提示した状態からは以下通り対応済み・対応中です。
    1)楽曲・プレイリストについては従来のリストビューを使用
     (フォルダ上にアルバム・楽曲・プレイリストが混在する場合は上下2段のハイブリッド表示)

    2)カバーアートの制御については未着手
     専用設定ページを含めて検討します(構成案については後述)

    3)グリッド表示の最大同時表示数はリストと同様
     変更出来るようにAPIは用意しましたが、リストとグリッドで表示数が異なることによる
     動作の切替をどうやるか検討中です。

    4)リスト表示の際に実現した「現在位置を記憶する」機能はグリッドでは非対応

    5)リスト←→グリッド切替は暫定的に「Title」左横に設置
     (+ボタンの3挙動化試行しましたが、使い勝手が個人的にはあまり良くないと判断。)

    6)音楽再生時の機能制限も未実装
     とりあえずRaspberryPiに伝送するコマンド一覧は手元で作成して、
     キャンセルするべきコマンドはリストアップしましたが、UI操作のどの段階で止めるのが
     理想的なのか見極めが必要なため。

    7)グリッドビューのカバーアート・タイトル・「+」ボタン配置などは調整済み

    8)再生中楽曲情報の軽微な修正(ディレクトリ表示にプログレスバーが隠れないようにした)


    WebUIでのカバーアート制御(案)
    前回 @Grigri さまの質問にお答えした分を拡張して報告します。

    ・WebUIでのカバーアート取得方法について
     演奏が始まった楽曲のURLに基づき、以下のカバーアートを探します。
     (実際にはカバーアート表示領域のスタイル、background-imageのurlプロパティが①〜⑤の順で複数記載されています。
     正常に読み込まれたurlプロパティの最初の記述の画像が表示されるという訳です。)
     下記の例についてはアーティストを「aaa」・アルバムを「bbb」とした場合とします。
     ①folder.jpg
      例:/NAS/aaa/bbb/folder.jpg
     ②Folder.jpg
      例:/NAS/aaa/bbb/folder.jpg
     ③アーティスト名 - アルバム名.jpg
      例:/NAS/aaa/bbb/aaa - bbb.jpg
     ④last.fmのAPIでアーティスト名・アルバム名を問い合わせした際に返されたURL
     ⑤RaspberryPiでデフォルトで用意されている「イメージなしの際の画像」2種類

     ①〜③、⑤については現状RaspberryPiからデータを返しています。
     (ympdのHTTPサーバが自分の公開用ディレクトリから値を返す。
     公開用ディレクトリの/NASはSambaでNASとファイル共有されている。
     ⑤は当然ながらSDカードにもともと入っている。)

    ・今回実装予定の機能について
     現在の構想では3点ほどあります。
     ①楽曲埋込カバーアートの対応
      MPDの最新版で楽曲を指定するとバイナリデータを返すという対応が追加されたため、
      コード実装は行っているのですが、
      これが原因でympd〜mpd間の接続が切れる場合がある。
      (WebUIで「TimeOut」という赤地のダイアログが表示された際がその状態)
      完全にfixしたと判断出来るまでは実装は待ちになりそう。
     ②NAS側WebサーバへのURL変更
      前項で示した①〜③のURL、ホスト部分は現状ではRaspberryPiを示しています。
      @ゴンザエモン さまのアイデアの通り、NAS側でWebサーバの機能がある場合
      RaspberryPiを経由しないで取りに行くことが出来ます。
      (この場合はホスト部分の参照をNAS側、RaspberryPi側で切替選択する予定)
      なお、folder.jpg ・ Folder.jpg ・ cover.jpg ・ アーティスト名 - アルバム名.jpgのうち,
      どのファイル名を使うかを選択出来ると便利かもしれませんね。
      ↑
      ここで一見急にcover.jpgが見えてきていますが、MPDのv0.21から各フォルダ内の
      cover.jpgを探してバイナリデータとして返すという機能が実装されています。
      cover.jpgを各フォルダに作っている人も恐らくいそうなので、今回対応しようかと。

     ③last.fmのAPI使用の切替
      もう既にカバーアートはNAS上に保存済みだからlast.fm側は要らないということでしたら
      機能を切ってしまうのもアリかと。

  • @sunatomo さん

    使い方が分かりません。
    ympd.release.outを
    /usr/bin/ympdに置き換えるだけじゃ反映されないのですか?

    追記

    わかりました。
    Titleをクリックして切り替えですね。

  • 良いですね。アルバム数が少ないかからなのか、サクサク動きます。
    細かいことを言えば、右サイドのズレが気になります。
    Screenshot_2020-05-07 symphonic-mpd.png

  • 念の為、Vivaldiでも確認してみたら、Vivaldiにはサイドライン無いんですね。
    2020-05-07 15.28.20 smpd.local 07cfb495057f.png

    追伸
    なるほど、Vivaldiでは、マウスカーソルを置いた時だけスクロールバーが現れるのですね。
    Firefoxでは、サイドライン内でスクロールバーが動きます。

  • @Cresson さま
    早速のお試し、お疲れ様です(グリッド表示でカバーアートが見えると、皆さん特色が出ますね:face_with_cowboy_hat: )。

    FireFoxのスクロールバーが常時表示される件、ちょっと調べてみます。
    (スタイルシートの記述追加によりWebKit系のブラウザと挙動を統一できる可能性がありそうです。)

    あと、グリッドとリストの切替については正直分かりにくいかと思います。
    とりあえずの暫定と思ってください。
    (私の独断だけでは決められない事項です)

  • 結局作り込んでおいて申し訳ありませんが、グリッドでフィルタ(簡易検索)可能な方法を思いつきましたので、再度作り直しを行っています。
    (やり方はul/liタグを使う方法です。勉強になりました。)
    なお、見た目はなるべく変えない方向で対応したいと思います。

    FireFoxでのスクロールバー表示を常時は隠す方法、何とかなりました。
    ただし、スクロールバーを隠している際と表示した際に要素の幅が若干ブレるので、
    要対策という形になります。

    それが終わった時点でカバーアート制御について対応します。
    今の案としては以下の通りを考えています。
    「カバーアート設定用のプラグイン」で設定をRaspberryPiに保存。
    WebUI起動時にこの設定があれば読込、反映(無ければ従来と同じ既定動作)。
    ↑
    もちろんプラグインで設定後はその値を即座に反映

  • Ver1.0でのympd改良(案)について
    祝 Ver1.0 というところですが、その先も少しづつ進めたいと思っています。
    便利な機能は増やしたいところですが、やはり「高音質を追求したディストリ」も引き続きの課題ですね。

    まずは現状積み残しの残件から
    ・グリッド表示(カバーアート表示)対応について
     作り直し分、終了しています(簡易検索も実現済み)。
     当然ながらカバーアートを大量に問い合わせするため、その負荷をどうやって下げたり制限するかが今後の検討事項です(後述のカバーアート取得方法の制御との組み合わせが必須と想定)。
     また、現状のリスト表示とグリッド表示の切替をどのようにしたら良いのか、まだ結論は出ていません。

    ・FireFoxでのスクロールバー表示について
     今まで常用していなかったため気づくのが遅れましたが、FireFoxでは常時スクロールバーが
     表示される仕様でした。
     グリッド表示実装の途中段階として「普段は消し、マウスカーソルが領域内に乗った際は表示」させることは実現できましたが、
     「消えている場合と表示した場合でスクロール対象部分の横幅が変わる」現象に直面しています。
     恐らく試行錯誤で何とかなるかもしれませんが、ちょっと時間をかけないとダメかなぁと思っています。

    ・カバーアート取得方法の制御について
     グリッド表示実装の途中でカバーアート取得方法を利用者が選択可能な仕組みを考えました。
     とりあえず私の手元ではプラグインでの設定後は値を反映することは出来ていますが、
     これをRaspberryPi内に保存し、起動時に設定を復元出来る仕組みを実装したいと思います。
     (要は、NAS上で既に特定ファイル名でカバーアートを保存済みなら、
     他のファイル名は見に行かなくても良いように予め設定してしまう。)

    次からは私が考える追加機能です(一部対応中のものもあり)
    ・ファイル形式を情報表示
     流石にコーデックと伝送レートまでは表示が難しいと思われますが、
     現在再生中のURIからファイルの拡張子を拾ってこれを表示することは可能です。
     ちょっとした情報としてあってもよいかと

    ・キューモードでのカバーアート、楽曲情報表示の畳込み+上部余白調整
     私個人的にはキューモードでの利用が殆どなのですが、楽曲を再生していないときはカバーアート・楽曲情報表示部分を畳込み出来ないかなぁと考えています。
    (完全に消すのではなく、上部に少しだけ残っているのが理想かな?)
     また、最近リストビューでのレイアウトを見ていて再確認したのですが、最上部のメニューとリスト間の隙間がちょっと広いんですよね(40pixcel指定されていました)。
     もう少し詰めても良さそうな気がします。

    ・カバーアートモードでの情報表示充実について
     mpdで楽曲が変わった際にその楽曲の情報をRaspberryPiからブラウザに転送するのですが、
     もしかしたらその際に付加価値を付けられるかもしれません。
     (キューモードとの差別化を今後考えたいと思います。)

    いろいろ考えたが対応優先度が落ちそうな機能(理由も書いています)
    ・再生中の機能制限
     実現出来たら面白そうですが、現状でも「再生中に何も操作しない」だけでRaspberriPiへの不要な負荷発生を防止できますので後回しにさせて下さい。

    ・埋め込みカバーアート対応
     パパリウス さまと話し合いを行いましたが、現状のmpd ver0.22では埋め込みカバーアートを読み込んでバイナリとして返す命令をmpdサーバ伝送後にクライアントからの応答に答えなくなることがあるため、
     機能としては休止しています。
     mpd側の開発が進めば状況は変わるかもしれませんが、音質チューニングのことを考えるとソースコードの頻繁な差替はちょっと難しいかと思います。

    引き続き新機能については提案下さい。Webブラウザで実現できそうな機能なら是非考えていきたいと思います。

  • 楽曲から得られる情報について
    カバーアートモードほかでの再生楽曲情報を充実出来そうなネタを調べた結果を記載します。
    mpdにコマンドを送ることによって以下の情報は取得出来そうです。

    ・当該楽曲の音声フォーマット(mpd_song_get_audio_format)
     得られる構造体mpd_audio_formatの内部を見たところ、
     サンプルレート・ビット数・ch数が含まれるようです(コーデックは無理かな)

    ・当該楽曲のタグ(mpd_song_get_tag)
     このコマンドの場合タグ丸ごとではなくmpd_tag_typeで指定したタグを返すようです。
     Searchプラグインで拡張した検索項目と同一のものが取得できますね。
     (実はSearchプラグインで使用した内部命令では本当はもっといろいろなタグで検索は
     出来るのですが、制限を掛けさせていただいています。)

    これらの情報を取得するタイミングとしては楽曲再生が切り替わったタイミングだけにしようと思います。
    (ympdのRaspberryPiサーバで楽曲再生が切り替わりのタイミングで現状はトラック名・アルバム名・アーティスト・楽曲へのアクセスURIを取得していますが、この処理に追加する)

  • 5月24日時点の進捗状況について
    ・FireFoxでのスクロールバー表示
     マウスカーソルがアルバムリスト領域に乗った時点で当該領域の幅を増やし、領域外に出た時点で幅を減らすように調整しました。
     あとはipadなどを含めて不具合がないか調査を行います。
    ・カバーアート取得方法の制御
     RaspberryPi内に設定ファイルを置き、WebUI起動時にこれを読み込むようにしています。
     また、設定はプラグインで提供し、設定が終わった場合はプラグインをOffにすれば良い設計にしています。
     以下は作成中の暫定仕様の画面です。
    Screenshot from 2020-05-24 23-41-04.png
     Access Methodを「NAS(httpd)」にするとNAS IP-addrフィールドが有効になり、
     コチラでNASのカバーアートへのパスを入力するとRaspberryPiを経由せずに
     カバーアートを取得するという仕組みになります。
     
    ・キューモードでのカバーアート、楽曲情報表示の畳込み+上部余白調整
     上部余白調整のみ、少しやってみました。
     実は畳み込みもBootstrapのCollapseの機能で出来るのは確認出来ましたが、
     現状の各パーツの配置を見直ししないと展開時にカバーアートなどが元の一時に戻るために
     移動するのが見えてウザいため、ちょっと時間が必要かと思っています。
     Screenshot from 2020-05-24 23-47-43.png
     (わかりにくいかもしれませんが、最上部のメニューとカバーアートの距離が縮まっています。)

    ・mpd_song_get_audio_formatについて
     楽曲切替わり時にこの情報を取得したのですが、いざWebブラウザに情報を送ろうと思って書込対応をしたところympdがエラーで落ちる現象が発生しています。
    もう少し時間が必要です。

    ・その他いじった所
     これを書きながら改めて気づいたのですが、ympdでの記述ではmpdとの通信やり取り終了後にその使用した関数の後始末を行う部分が不足しているように見えます。
     (私の実装が甘い部分もあるのですが...具体的にはmpd_response_finish関数が書かれていない場所がある。)
     libmpdclientのサンプルを見て、もう少し見直ししたいと思います。
    エンジニアリングプレビューとしてまとまった成果はおおよそ今月末に公開する方向を考えます。

  • 5月31日時点の進捗状況について

    5月24日付けのものとあまり変わっていません。

    ただし、mpd_song_get_audio_formatに代わり、mpd_status_get_audio_format関数で当初予定と同じものが取得できることが判明しましたので、これに簡易対応しました。
    具体的には画面イメージの通り、再生中はカバーアート領域にマウスカーソルを乗せるとbitsとsample_rateが表示されます。
    (bitについてはFloat変換している場合は「Float」、DSDの場合は「DSD」と表示されます。)

    また、先行になりますが、v1.0で報告された「ラジオ局で曲が変わった際に通知されない」に対応しました。
    (具体的には現バージョンのmpdではラジオで曲が変わっても内部のsong_idが変わらないため
    これを検知出来なくなった。
    ただし、ラジオで曲が変わった場合はキューのバージョンが上がるため、その場合は強引に曲が変わったという通知を内部でさせています。
    ただし、本当にキューに変更が加えられたのと違いがわからないため、現在の楽曲と新しい楽曲名に違いがあるかを比較して書換させています。)

    後は24日付で報告した事項は一応全て盛り込んでいます。

    なお、今の時点でいくつか潰しきれていないバグがあります。
    ・同梱した04-webuiプラグインですが、実行に成功しても必ず「error」と報告されます。
    ・既にWebUIを開いている場合、リロードすると思いますがこの場合に表示されるキュー・ディレクトリ表示では最大数は反映されません。
    ・FireFoxによるスクロールバー制御について。Windowsの最新版ではこのコーディングではスクロールバーの幅が合わなく充分潰しきれていないようです。

    Screenshot from 2020-05-31 20-48-41.png

    エンジニアリングサンプル
    以下のリンクよりダウンロード願います。
    ympd_2020-05-31_2.zip ympd_2020-05-31.zip

    • 6/2 正規のファイルに差替済

    インストール方法
    ・添付のファイルをRaspberry-Piに転送して下さい。
     (v1.0からは「FILE UPLOAD」プラグインが増設されましたので、これをお使いになる前提で説明します)
    ・添付ファイルを転送後、sshでRaspberry-Piに接続します。
    ・以下の通りコマンドを入れて、ZIPファイルを解凍します。

    cd /var/lib/mpd/music/RAM
    unzip ympd_2020-05-31.zip 
    

    ・当該ディレクトリには「ympd.release.out」と「04-webui」ディレクトリの2つが追加されたと思います。
    ・次に以下のコマンドでympdを入れ替えします。

    cd /usr/bin
    cp ympd ympd.org
    systemctl stop ympd.socket
    systemctl stop ympd.service
    cp /var/lib/mpd/music/RAM/ympd.release.out ympd
    systemctl start ympd.socket
    systemctl start ympd.service
    

    ・最後にプラグインの転送と有効化です
     以下の通り、コマンドを入れます。

    cd /opt/plugins
    cp -p /var/lib/mpd/music/RAM/04-webui .
    cd attach
    ln -s ../04-webui 04-webui
    

    *6/2プラグインインストールコマンドの修正済

    04-webuiプラグインについて
    以下の2点を制御出来ます。
    ・カバーアートの読込制御
     添付のwebui.cfgの場合は現状のWebUIの標準設定で作り込んであります。
     当方環境がなかったため作り込みが甘い可能性がありますが、NASにHTTPサーバの機能がある場合はそちらのパスを入力することによりRaspberryPiを経由しないように出来るように設計しました。
     また、現状の総当りではなく、既に指定名称でカバーアートをディレクトリに格納した場合はその名前だけ参照するように出来ます。
    ・キュー・ディレクトリでの最大表示数
     標準では500項目ですが、グリッド表示での動作を軽くするため利用者が調節できるようにしました。
     私の環境では50項目に制限して使っていますが、残念ながらipad mini2でのsafari・chrome共に動作が重いと感じるためグリッド表示自体のチューニングが必要かなぁと思っています。

    今後のネタについて
    mpdで現在登録中の楽曲・アルバム・アーティスト数を返す関数があることが分かりました。
    これに対応するプラグインを整備したいと思います。

    あとは、ympdのプロセス安定化をもう一段進めたいと思います。
    (併せて可能ならば、埋め込みカバーアート対応をリベンジで復活させたい...)

    また、個人的には労力の割に効果が薄いかもしれないと思いますが、現状使っている各種ライブラリ(jquery・bootstrap)のバージョンが古いため、刷新することを検討してみようかと。

  • sunatomoさん

    本件早速試してみましたが、最後の方のプラグインのコピーと有効化(リンク)で引っ掛かってしまいました。
    アドバイスなどいただければ幸甚です。

    root [ /var/lib/mpd/music/RAM ]# unzip ympd_2020-05-31.zip
    Archive: ympd_2020-05-31.zip
    creating: 04-webui/
    inflating: 04-webui/app.json
    inflating: 04-webui/form.html
    extracting: 04-webui/run.sh
    inflating: 04-webui/webui.cfg
    inflating: ympd.release.out
    root [ /var/lib/mpd/music/RAM ]# cd /usr/bin
    root [ /usr/bin ]# cp ympd ympd.org
    root [ /usr/bin ]# systemctl stop ympd.socket
    root [ /usr/bin ]# systemctl stop ympd.service
    root [ /usr/bin ]# cp /var/lib/mpd/music/RAM/ympd.release.out ympd
    root [ /usr/bin ]# systemctl start ympd.socket
    root [ /usr/bin ]# systemctl start ympd.service
    root [ /usr/bin ]# cd /opt/plugins
    root [ /opt/plugins ]# cp /var/lib/mpd/music/RAM/04-webui .
    cp: -r not specified; omitting directory '/var/lib/mpd/music/RAM/04-webui'

    ?なので、 「-r」オプションを付けて継続してみました。

    root [ /opt/plugins ]# cp -r /var/lib/mpd/music/RAM/04-webui .
    root [ /opt/plugins ]# ls /opt/plugins
    root [ /opt/plugins ]# cd detach
    root [ /opt/plugins/detach ]# ln -s ../04-webui 04-webui

    うまく行ったみたいですが、ブラウザで画面をリロードすると、、、、
    以下のようなテキスト画面が表示されてしまう。

    Index of /

    Name Modified Size
    NAS/ 17-May-2020 13:45 [DIRECTORY]
    RADIO/ 02-Mar-2020 13:21 [DIRECTORY]
    RAM/ 01-Jun-2020 09:18 [DIRECTORY]
    plugins/ 01-Jun-2020 09:35 [DIRECTORY]
    .version.json 26-May-2020 21:13 95

  • @ゴンザエモン さん、私も同じ現象を確認しました。

  • sunatomoさん

    ちょっと初歩的なことで申し訳ありませんが、

    「plugin設定自体を間違えてオフにしてしまった」

    場合、どのようにするとメニューの復活が可能なのでしょうか。

  • @ゴンザエモン さま
    @hiroget9 さま
    すいません。どうやらこちらの手違いで誤った実行ファイルお付けしたらしいです。
    せっかくお試しいただいたのにもうしわけありません。

    今日は泊まりで家に帰られないので、明日もう一度添付させてください。

    ちなみにプラグイン設定のプラグインを無効化した場合はsshでシェルに入って/opt/plugins/のdetatch,attatch にあるシンボリックリンクを手動で直す必要があります。

  • sunatomoさん

    早速のご教授、深謝です。

    mv /opt/plugins/detach/90-plugins /opt/plugins/attach

    というような感じで「90-plugins」を移動させれば宜しいことがわかりました。

    これ(90-plugins)をオフにしてしまって右往左往していました、、、、

  • 5月31日に添付したエンジニアリングプレビューをお試し使用した方々へ
    先の投稿スレッドの方、添付ファイルを本日入れ替えしましたので、
    そちらをお使い頂けると幸いです。
    また、@ゴンザエモン さまなどにご指摘いただいた、プラグインの追加方法も
    記述を修正しました
    (すいません。インストーラを作る手間を省いて
    シェルで実行するコマンドを書いていました。)