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

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