• webui-plusのドキュメント(document of webui-plus)

    今まで、ソフトウェア開発の方がメインになっていたため、ドキュメント整備がかなり遅れていました。
    という訳で、今後少しづつ整備を行っていきます。

    ※記載の都合上、本来は既にsmpdの正規版でサポートされている機能について解説を行っている場合も有るかもしれませんが、
    その場合はご笑納下さい。

    No. リンク
    01 SETTINGS プラグイン
    02 WEB UI プラグイン
    03 CoverArt(no-image)プラグイン
    04 UPDATE LIBRARY プラグイン
    05 SAVE QUEUEプラグイン
    06 ADD STREAMプラグイン
    07 FILE UPLOADプラグイン
    08 LAST.FMプラグイン
    09 COLOR THEMEプラグイン
    10 AoEプラグイン
    11 キューモードでの拡張(その1)
    12 キューモードでの拡張(その2)
    13 タグによるリスト表示
    14 アルバムモード
    15 ツインビュー
  • SETTINGS プラグイン

    2021-11-20_001.png
    元のwebuiに対して一部機能を追加しています。

    • NAS No.
      従来と異なり、NAS設定としてシステムレベルで最大10台までの登録が可能になりました。
      NAS No. リストより「現在設定が記載されているNAS」と「設定未記載のNAS」のそれぞれ選択可能です。
      設定記載済みのNASをリストから選択するとpath・username・passwordに設定内容が反映されます。
      「設定記載済みNAS」と「設定未記載NAS」のリストでの表記は以下の通り(*内には 0〜9 の数字が入ります)。
    解説 表記
    設定記載済みNAS NAS *
    設定未記載NAS NAS *(empty)
    • NAS の追加・変更
      NAS No. リストより追加・変更を行いたい NAS を選択します。
      次に、path・username・password を入力しダイアログの「OK」ボタンを押すと入力されたパラメータのチェックとNASとの接続速度に応じた専用チューニングが動作します。
      最終的に入力されたパラメータが正常である場合、当該の設定がシステム内部に反映されます。

    • NAS の削除
      NAS No. リストで削除したい設定を選択後、リストの右側にあるdelete チェックボックスにチェックを入れて下さい。
      再度、リストとパラメータの記述を確認してから「OK」ボタンを押すと当該リストの場所の NAS 設定がシステム内部から削除されます。
      (削除後、NAS No. リストの当該番号の場所は(empty)表示に変更されます)

  • WEB UI プラグイン

    webui-plugin.jpg
    webui-plus 向けに追加したメイン機能を設定するためのプラグインになります。

    ○CoverArt 項目
    楽曲再生時に表示されるカバーアートの設定を行います。

    • Access method
      画像ファイルをどのような環境から取り込みするかを設定します。
      通常はRaspberry Piに接続された NAS の楽曲フォルダから直接取得しますので「Raspberry Pi」を選択して下さい。
      もしアルバムアート専用のネットワークファイル共有を所有の際は「NAS(httpd)」を選択します。

    • NAS IP-addr
      Access method で「NAS(httpd)」を選択した際にアルバムアート専用のネットワークファイル共有先を入力して下さい。
      (Access method で 「Raspberry Pi」を選択した場合は、本項目は入力不能になります)

    • testボタン
      Access method で設定したカバーアートが取得可能な状態であるのか確認することが出来ます。

    • CoverArt Filename
      Access method で設定したカバーアートのファイル名をお好みに応じて指定出来ます。

    項目 詳細
    SongEmbeded 楽曲内組込タグの画像を抽出
    (mpd で取得し、/RAM/cover-art.jpgに書き出し)
    folder.jpg 以下、楽曲と同一フォルダ内の左ファイル名を使用
    Folder.jpg 〃
    cover.jpg 〃
    (artist) - (album).jpg 楽曲のアーティスト名とアルバム名を” - "で結合したファイル名を使用

    ちなみに Select ALL をチェックすると、上記の全てが有効になった状態になります(チェックを外すと全てOffになる)。

    • support PNG
      PNG形式のカバーアートに対応する際は本ボタンをONにして下さい。
      (既定ではOFFです)

    • CoverArt (Internet)
      楽曲の曲名・アーティスト名を入力すると当該アルバム画像のURLを返す各種インターネット音楽情報サイトからカバーアートを得ます。
      下記サイトから1つのみ選択可能です(未選択も可能)
      last.fm
      Cover Art Archive (MusicBrainz)
      DIscogs
      Spotify
      fanart.tv

    ※カバーアートの表示順について
    webuiでは楽曲再生中にカバーアートが表示されるのは「ミニプレーヤ左横」と「カバーアートモードの中央部」の2箇所になります。
    上記設定で取得可能なカバーアートは複数枚数がヒットし取得されたとしても実際にユーザから見えているのは下記の優先順位で最も上の画像「URLがヒットした」画像のみとなります。

    順番 詳細
    1. | folder.jpg(チェック有効時)
    2. | Folder.jpg(チェック有効時)
    3. | cover.jpg(チェック有効時)
    4. | (アーティスト名) - (アルバム名).jpg(チェック有効時)
    5. | 画像ファイル組込画像(/RAM/cover-art.jpg)(チェック有効時)
    6. | インターネットサービス経由で取得したカバーアートのURL
    7. | no-image*.jpg
      (webui初期起動時に表示される画像)

    ○View

    • Max Items(Grid View)
      グリッドビュー(アーティスト名・フォルダ名・アルバム名をグリッドの様にカバーアート付きで表示するモード)の際に、画面上に表示される最大アイテム数を指定します。
      webuiの通常表示(リストビュー)では1画面上での最大アイテム数は500個となっていますが、本項目ではグリッドビューの最大表示数を変更することが可能です。
      常識的に考えて最大25個くらいに留めておくことをお勧めします。

    • Max Items(Album View)
      後述するAlbum Viewでの画面上に表示される最大アイテム数を指定します。

    • list/gridボタン
      リストビュー・グリッドビューを切替するためのボタンです。

    • Cover Art in List View
      リストビューの各アイテム行の一番左列のアイコンを縮小表示のカバーアートに切替する機能です。
      (本表示では「CoverArt(Internet)」で指定したURLの検索は行われません)

    • Notify
      楽曲変更時など、ステータスが変わった時点で画面の左下(スマホ向けの場合は画面下)に通知を表示/非表示にする機能です。
      また、数字部分を設定することで通知が表示され続ける時間を変更可能です(標準設定では2000ミリ秒=2秒間表示)

    ※通知については、エラー発生時などはNotifyの設定問わず行われます。

  • CoverArt(no-image)プラグイン

    2021-11-21_001.png
    本プラグインは楽曲再生時に表示されるカバーアートのうち、「該当するカバーアートが存在しない場合」の仮で表示される画像の取扱に関するものです。

    元々のwebuiでは実行プログラム内部組込で2枚(no-image0.jpg, no-image1.jpg)の画像が用意されていましたが、
    webui-plus では /var/lib/mpd/music/assets/ ディレクトリに no-image*.jpg(* の箇所には2以上の数値を連続で入力)という名称で画像ファイルを保存することにより、
    プリセットの2枚画像と合計でランダムにこれを表示できるように改良されています。

    ※上記の通りファイルの命名・ナンバリング情報は開示しておりますが、webui-plus での no-image*.jpg の取扱については原則「CoverArt(no-image)」プラグインでのみサポートといたします。
    (手動でのアップロード・変名によるナンバリング不整合には対応出来ません。)

    • maint image
      /var/lib/mpd/music/assets/ ディレクトリに保存されている no-image*.jpg の全名称をリストから選択可能です。

    • download
      前項のリストでファイル名を選択後、「download」ボタンを押すと、選択したファイルを使用中の端末にダウンロード可能です。

    • delete
      前項のリストで選択したファイルを当該ディレクトリから削除します。
      なお、no-image*.jpgの仕様(本ファイルは楽曲再生切り替わりに時にランダムで表示)上、
      削除動作時には現状最大値の画像ファイルが削除されたファイル名と置換されるという動作になります。
      (例:no-image2.jpg 〜 no-image5.jpg のファイルがディレクトリに存在し、no-image3.jpg を削除した場合、 no-image5.jpg の名前を no-image3.jpg に置換)

    • preview
      リストで選択したファイルのプレビューをボタン右下の領域に表示します。
      推奨設定と異なるカバーアートをアップした場合、download・delete前の画像確認などにご使用下さい。

    • upload image
      使用中の端末に保存された画像ファイルを当該ディレクトリにアップロードします。
      アップロードの際は自動的にno-image*.jpgに名前が変更されます。

    • Built-in Image
      webui-plus実行ファイル組込の2枚のイメージを使わずにユーザでアップしたイメージだけを使用する場合は本チェックを有効化して下さい。

    ※webui-plusでのno-image*.jpg推奨仕様について
    ソフトウェア仕様では許容しますが、デザイン性の統一のため下記仕様を推奨します。

    仕様 詳細
    画像形式 jpeg形式(これについてはpngなど他の形式は許容しません)
    画像サイズ 640ピクセル程度
    縦・横比率 1:1を推奨(これ以外の比率の場合はpreviewで実際の見え方を確認して下さい)
    画像色 モノクロ(カラーも問題なく動作しますが、組込イメージがモノクロであるため統一を推奨)
  • UPDATE LIBRARYプラグイン

    2021-11-21_002.png

    元のwebuiに対して一部機能を追加しています。

    • Store tag_cache and playlists in the NAS
      「BACKUP」「RESTORE」ボタンの横にリストを追加しています。
      本リストは「SETTINGS」プラグインの拡張で説明したNAS接続が最大10台になった件にこれらのボタンを対応させた結果になります。
      (従来はNAS0相当に固定でしか対応していなかった。)
      なお、システム内部にNAS設定のないリストは選択不能になっています。

    • rescan this directory
      <<近日実装予定>>
      これは当該の楽曲ディレクトリに対して従来は追加・削除されたファイルの情報のみ更新する動作であったところを、
      既に内部認識済みのファイルに対しても再更新を行う「rescan」を提供するためのチェックボックスです。
      本チェックボックスをOnにするとテキスト領域の指定ディレクトリ部分の文字列先頭に"rescan-"が付与され、内部的に再更新を指示する様にされます。

  • SAVE QUEUEプラグイン

    2021-11-21_003.png
    ※元のプラグインに対して機能を追加しています。

    • maint playlists
      /var/lib/mpd/playlists/ に保存されたプレイリストをリストから選択し、その下のボタンを押すことでプレイリストのメンテナンスを行うことが可能です。
      「download」は利用者の端末へプレイリストファイルをダウンロードし、「delete」では指定したプレイリストファイルを当該ディレクトリから削除します。

    • upload playlists
      利用者の端末内に保存されているプレイリストファイルを指定ディレクトリにアップロードします。

    ※ファイルアップロード最大容量については今後修正予定です。
    (当初FILE UPLOADプラグインで設計した際の50MBをそのまま採用していましたが、カバーアート, playlist, スキン等ではこのサイズは明らかに大きすぎのため)

  • ADD STREAMプラグイン

    2021-11-21_004.png
    ※元のプラグインに対して機能を追加しています。

    ○radio-browsser.info
    radio-browser.infoの提供するラジオ局検索APIに対応し、
    インターネットラジオ局を特定するとURL欄に当該ラジオ局のURL文字列が反映されるように設計しました。

    • category
      検索(絞り込み)のためのカテゴリを指定します。
    項目 詳細
    country 国を指定
    language 言語を指定
    tags タグを指定
    codec コーデック
    カテゴリ決定後、radio-browser.infoに問い合わせし、当該カテゴリの候補が右横のリストに格納されます。
    本リスト欄は入力された文字列に対して一部一致による検索が有効のため、
    キーボードによる絞り込み後に候補をクリックして指定することをお勧めします。
    (tag等で全候補からからスクロールで探すのはかなり困難であるため)
    • station
      codec で指定したカテゴリとその候補に該当するラジオ局が本項目にリストとして表示されます。
      左部分の「−」・数字・「+」ボタンは、候補のラジオ局が11局以上(標準でリスト内に表示されるラジオ局の最大数は10局であるため)であった場合に、
      ページを切替(現ページ数を確認する)ための機能になります。
      右部分のリストから、希望のラジオ局を選択すると、下のURLに当該ラジオ局のURL文字列が複写されます。
      ※stationで表示されるラジオ局の表示順は現在の所、radio-browser.info で記録されている当該リスト内のカウント順になります。
      (要は人気順です)

    ※Firefox ブラウザを使用している場合、httpのアクセス制限数の上限に当たり radio-browser.info へのアクセスが待たされる場合があります。
    この場合、以下の方法でブラウザの設定を変えてみて下さい。

    1. 場所で about:config と入力する。
    2. 警告が表示されるが、「危険を承知の上で使用する」を押す
      (記載の通り自己責任で変更になります)
    3. 設定名を検索のテキストダイアログに network.http.max-connections-per-server と入力する。
      通常は値が設定されていないため「真偽値・整数値・文字列」とラジオボタンが表示されるため「整数値」を選択
    4. 当該設定の値を 6 で設定する。
      6 の根拠はChrome等のブラウザで同値が設定されているとのこと。
  • 2021-11-21_005.png

    これはファイルを指定箇所(/var/lib/mpd/music/RAM/)に格納するためのプラグインです。
    (主にNAS上のライブラリに存在しない楽曲を視聴する際などに使えると思います。)

    • Upload File
      テキストボックス右のフォルダアイコンをクリックし、使用中の端末のファイル選択ダイアログが開いたら希望のファイルを選択して下さい。
      選択後に下部の「Send」ボタンを押すと当該ファイルがアップロード処理されます。

    ※当該アップロード箇所はRAM ディスクのため、ファイルの最大容量に制限(50MB)があること、
    RaspberryPiの再起動後にはファイルが消えていますのでご了承下さい。

  • LAST.FM プラグイン

    2021-11-21_006.png
    last.fmから情報を取得する際、Scrobble(楽曲の視聴履歴をlast.fmに管理させる)に関する設定用のプラグインです。

    ○Information Area

    • Shown Lang
      カバーアートモードのアーティスト名右横のボタンで表示されるアーティスト情報(本情報はlast.fmへの問い合わせ結果)の言語を指定します。
      言語指定はISO 639-1に基づきます。
      リストへの登録上は「en」・「ja」のみですが、これ以外のコードも受付します。
      (ただし、指定言語でアーティスト情報が記載されているかはlast.fm側の対応による)

    ○Scrobble Controls

    • Scrobble
      Scrobble を実行するかしないかをボタンで制御します。
      ボタン右のメッセージでは Scrobble を実行するために必要な sesson-key がシステム内に存在するかを示します。

    • Last.fm Account
      後述のGet Session-key で必要な user と pass の情報を入力します。

    • Get Session-key
      「Get Session」ボタンで先に入力した user・pass を元にSesson-keyを生成し、これをシステム内部に保存します。

    ※Scrobble について補足
    Scrobble の実行方法についてはいくつかやり方がありますが、webui-plus では以下の方法で行っています。

    1. アプリケーションの api_key と secret (api_key が webui-plus のユーザID、secret がパスワードだと思って下さい)。これらは実行ファイル中にそのまま格納されています。

    2. アクセストークン api_key と secret を元にユーザ固有の情報にアクセスするための(一時的な)専用パスワードを生成します。

    3. アクセストークンとユーザ名・パスワードを利用して、Sesson-keyを取得します。

    4. api_key, secret, Sesson-key を使用し、楽曲の再生直後にwebui (が動作中のRaspberryPiが)「Now Playing」のコマンドを last.fm へ伝送すると、last.fm のサーバで当該ユーザに対して 「Last Playing」情報が表示されます。

    5. api_key, secret, Sesson-key を使用し、楽曲の再生時間が基準値を超えた時点でwebuiからScrobbleのコマンドをlast.fm へ伝送すると、last.fm のサーバで当該ユーザに対してScrobble 情報が保存されます。

    ※last.fm 関連機能については利用者の端末並びにRaspberryPiのネットワーク接続がインターネットへのアクセスが可能な状態でのみ有効となります。

  • COLOR THEME プラグイン

    2021-11-21_007.png
    ※元のプラグインに対して機能を追加しています。

    • Select Theme
      カラーテーマ保存ディレクトリ(/opt/plugins/20-color_thme)内のスタイルシートファイル数を自動的に算出してリストに表示させます。
      カラーテーマのリスト選択後、下部の「OK」ボタンを押すと当該テーマを適用した画面に切り替わります。

    • upload color theme
      利用者の端末に保存してあるカラーテーマのスタイルシートファイルをカラーテーマ保存ディレクトリにアップルードする機能です。

  • AoE CONFIG プラグイン

    2021-11-21_008.png

    Audio over Ether の各種機能をwebui-plus で簡易に閲覧・制御するための機能を提供します。

    • 上部ボタン部 + メッセージ表示部
      フロントエンドに対して「lsaoe」・「aoestat」・「aoereset」コマンドを送信した際の結果が下のメッセージ表示部に表示されます。

    • Setting AoE Parameters
      AoEで使用する dreq と recv バッファ数を直接制御できます。
      (数値をテキストボックスで調整し、「set」ボタンで反映)

    • Setting the Backend Device
      バックエンドに対して、「SSH on」・「SSH off」・「Reboot」・「ShutDown」設定を送信することが可能です。

    • Setting the vsound.service
      mac-address テキストボックスでバックエンドのMACアドレスを指定することで、当該バックエンドのみに音楽データを送信する-dオプションを付与したvsound.service を実行出来ます。
      (無指定の場合は-d オプションなしで実行)

  • キューモードでの拡張(その1)

    webui-plus では、従来の webui のキューモードの表示から拡張を行っています。
    以下でその表示モードについて説明します。

    • リスト表示(従来どおり)
      1楽曲(もしくはディレクトリ)の内容を1行にまとめて表示するモードです。
      (表示される文字数が領域幅を超える場合は高さが1行分を超える場合あり)
      2021-11-21_010.png

    • グリッド表示
      1アルバム(ディレクトリ)の指定カバーアートの下に名称を表示するモードです。
      表示の切替は「WEB UIプラグイン」でList/Grid ボタンで行うか、"g"キーで可能です。
      2021-11-21_011.png

    • リストビュー(カバーアート表示)
      従来のリスト表示とほぼ同等ですが、左のアイコン部分がカバーアート表示に対応したものです。
      表示の切替はWEB UI プラグインで「Cover Art In List View」をOn/Off にして下さい。
      2021-11-21_012.png
      ※グリッドビュー・リストビュー(カバーアート表示)で表示されるカバーアートは「NAS内部で保存されたもの」のみとなります。

  • キューモードでの拡張(その2)

    webui-plusでは従来版に対して以下の拡張を行っています。
    2021-11-21_013.png

    • ミニプレーヤーの右上部分に楽曲の拡張子を表示
      ラジオ再生時には「radio」と表示されます。

    • 楽曲のスライダー表示の拡張
      大体の楽曲の再生時に「1秒に1回値が増加する」ように変更しました。
      (従来はスライダーが100段階のため、100秒を超える楽曲の場合は1秒に1回更新しなかったが、
      今回は最大値を楽曲の総時間になるように変更。
      これによりスライダーによるシークもほぼ秒単位で制御可能です。)

    • カウンター表示の変更
      スライダー右横のカウンター(現在再生時間/楽曲の総再生時間)表示をデジタル数字フォントに変更しました。

    • 再生モード変更用ボタンの追加
      「Single」・「Shuffle」・「Repeat」・「Consume」ボタンをスライバー部の下部に追加しました。
      (従来はキーボードでの制御か、カバーアートモードでボタンを押す必要があった。)

  • タグによるリスト表示

    キューモードでは楽曲に付けられたタグに基づき、ライブラリ内部の楽曲を検索表示することが出来ます。
    本方法での検索条件として提供するタグは以下の通り(なお、Albumは他のタグと表示状態が異なるため後述します)。
    tag-gener.jpg

    タグ名 詳細
    Genre ジャンル
    Artist アーティスト
    AlbumArtist アルバムアーティスト
    Composer 作曲家
    Date 日付
    以下では Genre を例に挙げて説明します。
    Genre をクリックすると、まずはライブラリ内の全ジャンルのリストが表示されます。
    genre-list.jpg
    リストから希望ジャンルをクリックすると、当該ジャンル名のタグを持つ楽曲を含むアルバムが表示されます。
    更にアルバムを選択すると、当該ジャンル名のタグを持つ楽曲が絞り込みされます。
    ※アルバム内の楽曲でタグの中身を統一していない場合、アルバム選択後の楽曲が全て表示されないことがあります。
    (例えば あるアルバムの 楽曲の Genre が JapanesePop と Instrumental に別れた場合、 Genre のリストで JapanesePop を選択して当該アルバム内の楽曲リストを表示すると Instrumental の楽曲は表示されません。)
  • アルバムモード

    album-mode.jpg
    タグによるリスト表示で後述したAlbumを選択した際の動作になります。
    ライブラリ内部の全アルバムが表示されます。
    WEBUIプラグインのMax Items(Album)の指定数量に基き、1ページ内の最大表示アルバム数は決定されます。
    (アルバム総数がMax Itemsの数量を超えると表示領域の下部にページ変更用のコンポーネントが表示されます。)
    なお、タグによる検索モードでも遷移で辿った場所は内部的に記録されており、上位の遷移に戻った場合は当該クリック位置まで復元されます。

    ※標準のグリッドビューとアルバムモードの違い
    グリッドビューはあくまで「NAS上のライブラリ管理をディレクトリ管理にした場合にこれをグリッドとして表示する」機能です。
    これに対してアルバムモードは「mpd が楽曲のタグで分類し同一アルバムと判断した」ものを並べて表示する機能になります。
    このため、アルバム名が未登録の場合""にまとめて表示されます。

  • ツインビュー

    twin-view.jpg

    ipad等タブレット〜PCでの横長高解像度デバイスを前提にした画面設計を追加で行いました。
    (個人的にPC画面で従来のwebuiでは横幅を持て余し気味であったため)
    ツインビューを使用する方法は以下の2通りあります。
    1. webuiのIPアドレス/index2.html で起動
     この場合、画面が常にツインビューで表示されます。PC等でウィンドウサイズを変更しない場合はこれが最適になります。
    (タブレットのようにキーボードで切り替えできない場合もこちらの方法となる)

    1. キーボードで"T"キーをクリック
       従来のシングルビューとツインビューを切替可能です。
      (なお、キーボード操作は当該ブラウザのウィンドウ表示をデスクトップの最上位の位置で行って下さい)
       本手法では従来のシングルビューに対してツインビューを整理すさせるためのスタイルシートを追加/削除する方法で対応しています。