mpd Web Client 製作の日々: 7月 2017

Mpd クライアントの製作ですが
　・現在の主力はAndroid Nexus7
　・先々iPadを購入したい。
　・PCでPLaylistを編集したい。（文字入力はPCで）
ということで、Webで作成することにしました。（HTML/PHPは素人。なにができるのか!!!!）
MpdClientを製作している方を参考にさせて頂き、基本的な部分は動き始めました。
ブログも慣れてきたら謝辞なども掲載したいと思います。
デバックしたら公開を考えています。
以下どんな機能かを照会します。

・動作環境
　O/S   linux        Volumio 5.6   VoyageMPD
   APACHE2 / nginx
   PHP5.3以上


1.再生中リスト(PlayList)／MPD再生コントロール

(１) Playlistを編集
　・Move : タブレットように Up/Down機能
　　　　　 Pcようにドラッグ＆ドロップ
　・Delete:
　※InsertはList/Fileで行う
・保存
(2) Start/Stop/Skip
(3) Volum
(4) アルバムアート
　ミュージックデータのディレクトリにあるJpgを表示
　 Folder.jpgなどを設定できる
(5) MPDのD/B Update
(6) Artist/Album画面に遷移

2.List機能

(1) List種類
　・Artist
　・AlbumArtist
　・Date（Year）
　・Genre
　・Album (アルバム数が多くなると遅くなるまた探しにくいので考案中)

(2) 定冠詞のSort除外
(3) 選択ラインのPlaylist追加
(4) 選択ラインのAlbum画面に遷移（Album選択時はFind画面）

3.Album機能

(1) ソートは設定できる。
　・Artist
　・Date

(2) アルバムアート
ミュージックデータのディレクトリにあるJpgを表示
　Folder.jpgなどを設定できる

(3) 選択したアルバムをPlaylist追加

(4) 選択したアルバムをFind機能に遷移
　　Find機能でミュジックデータを表示する。　　

(5) ３タイプのAlbum機能画面を用意し切り替える

・ソートなし高速タイプ　　　　　　　　　　・リストタイプ

※他にもソート可能なmpdクライアントがありますが、専用のD/Bを持っていないソフトは表示するアルバム数が多くなると遅くなる。
mpdの機能としてListにDateがないため2度mpdと交信するかFindでミュージックデータごと取得するため。今回数タイプ作成することにしました。

3. Find機能
　ミュジックデータを表示する。

(1) 詳細を表示する機能
(2) 選択したミュジックデータをPlaylistに追加する

3. File機能
　ディレクトリにあるJpgを表示する画面と２タイプ作成

　・画像なしタイプ　　　　　　　　　　　　　　・画像ありタイプ　
　

　　　　　　　　　　　　　　　　　　　　　　　　　　ミュージックデータのディレクトリにあるJpgを表示
　
(1) 選択したディレクトリ／ファイルをPlaylistに追加
(2) 選択したディレクトリの階層に移動

※ファイル／ディレクトリが多くなると遅くなるまた、中間階層のディレクトリには画像がないので2タイプ用意する。

　・ミュジックデータがあった場合の表示　
　

4.Playlist
・Playlist一覧　　　　　　　　　　　選択→　・Playlist内容

　　

(1) 選択したPlaylistを再生リスト(Playlist)に追加する

5. Search機能
・検索で見つかったデータのアルバム　　・検索で見つかったミュジックデータ

(1) 検索単位
　・Title （文字で指定）
　・Artist　
　・Date（Year）
　・Genre
　組み合わせで検索する
(2) 索したミュジックデータをPlaylistに追加
(3) 選択したミュージックデータのアルバムを表示するFind機能に遷移

駆け足ですが、こんな機能のWebとなっていますが興味を持って頂けましたか。

まだデバック、位置合わせが完了していませんが、近いうちにベータ版として公開したいと思います。

まだ、設定画面が作っていないので、設定XMLを直編集ですが.....

現在の状況は（何しろHTML/JS/PHP未知の世界なので・・・）

未対応/対応計画
・不具合処理中(時計マーク)がRequestUnLoadDisp()でUnlockできない(CreatしたIDでdocument.getElementById(id_name)=nullとなる）
   Search:Select Timeoutで逃げている
・各表示の位置合わせ(Android)
・Current画面表示の速度Up
  - Style Class化
  - Func機能のHeader化(tdを止めるJs化)
・各画面の調整
     - Func機能のHeader化(tdを止めるJs化)
・MoveのタッチでToを決定(Current画面表示の速度Up後でないと面倒)
　※Jsとの連携で今一つ案がない
・mpd Connect Passwordの検証
・UpperBoxのデザイン
　対応予定なし
・VolumioRc2でUSBDacの電源On/Off環境で,Volumが表示されなくなる。
　このとき他のMPD ClintもVolumが動作しない
   VolumioRc2 GUIも同様。Volumio Rebootで復旧した。
　App/Volumio...原因不明(BitPerfect環境なので未対応)
・DispFileで表示内容がなく不要なディレクトリを表示。
　(多段階ディレクトリを最後まで見れば良いがレスポンスのため対応していない)

機能追加予定計画（どこまで対応できるか？）
・Netmask範囲外時の設定追加
・List Album 機能の細分化(a-c,d-...設定)
・List Date/Genreの多段階選択 →Artist/AlbumArtist→Album

今後計画（対応できるか？？？？）
・複数 mpd の対応別モジュールでXMLをコピー
   現スタンス:各mpd環境にinstall(Volumio Rc2以外)
    ・設定画面の作成(別モジュール)
・Volumio Rc2 Queue表示の追加(別モジュール)
   Volumio Rc2構成は?
    /data/playlist /data/queue (Current) json形式?
・再生情報の表示(別モジュール)
   last.fm https://www.last.fm/ja/music/Carly+Rae+Jepsen/_/I+Really+Like+You
           　 h ttps://www.last.fm/ja/music/Taylor+Swift/Red/Red
   Track List
              https://www.last.fm/ja/music/Taylor+Swift/Red/
   Wiki    https://ja.wikipedia.org/w/index.php?　　　
　　　　　　search=Taylor+Swift&title&searchToken=5n6deipabntafqbx1r3gw1pqr
   google https://www.google.co.jp/search?hl=ja&q=google+Taylor#hl=ja&q=Taylor+Swift&spf=381

何とかならないか考え中
・HTML5対応?(現在4.1としてHTML5を一部使っている)
・HTML5を使用したmpd Streaming Port:8000の再生
・各ディレクトリの画像ファイルを表示
と壮大な計画です。
　

MPDのクライアントを探していましたが、良いものもあるのですが、日本語の対応が今一つ。日本のアーチストが英語アーチストの間に入ったり。安定した接続状態も今一つのものも。たまに再接続を促されたり。(iPadは持っていないので不明ですが)。Web版もありましたが、動作環境を作るのが大変なものが多いです。Linuxに詳しければ良いのでしょうが。
HTMLも素人ですが、無謀にもMPD Web Client を製作することにしました。
製作をこのブログで記録することにしました。
といってもブログの作成もHTMLの知識が．．．
訪問してくれる方はブログのデザインは多めに見て下さい。

mpd Web Client 製作の日々

MPDWEB 紹介/特徴

2017年7月10日月曜日

ブログ投稿で今の悩み

2017年7月8日土曜日

Mpd クライアントのデザイン

ブログを開始しました