YouTubeと自分のPC内メディアを同時に再生できるメディアプレイヤーを作ってみた

私はよくPCで何か作業をするときには音楽を垂れ流していることが多い。
そういう時にかける曲は、手持ちのアルバムCD等からPCに取り込んだ音源だったり、さらにはYouTubeの動画だったりとメディアや再生環境がバラバラだ。なので、PC内の音源であればPCにインストール済みのメディア・プレイヤーで再生し、YouTubeの動画であればブラウザでYouTubeにアクセスして聴いていた次第。ま、普通のことなんだが、でもこれだとPCの音源とYouTubeの動画のお気に入りはそれぞれ別々に管理することになるわけで、これがちょいと難儀だなぁ……と不満が募っていたのだ。

どっちのメディアだろうが一元的に管理できて、ついでにプレイヤーを切り替えなくても再生までできるとイイよなぁ……。

おそらく探せば、そんな要求を満たしてくれるソリューションもあるのかもしれないが、探すの面倒だし、無料で利用できない場合も考えられるので、何とかならんもんかと思っていたら、ひらめいた。

YouTubeのIframe埋め込み型のプレイヤーとHTMLの<audio>や<video>といったメディアタグを同居させたWEBアプリケーションなら、YouTubeの動画も自分のPC内のメディアファイルも同時に再生できるはずじゃね？

──ちゅーわけで、さっそくWEBブラウザ用のYouTube&ローカルメディア両用プレイヤーを作ってみた。

その名も「Ambient」。

コア処理については数日でサクッと作れたわりに、アイコンやロゴ、NO IMAGEの画像とか作ってたら何気に時間がかかってしまった……こういうところに凝ってしまってリリースが遅れたりするのはいつものことだ（笑）
でもまぁ、個人的にメディアプレイヤーとしてとても満足のいく出来になった。

今まで趣味の個人開発で色々と作ってきた中でも、かつてない傑作じゃないだろうか……！

──と、まぁ自画自賛はおいておいて、本記事では、「Ambient」メディアプレイヤーのドキュメントも兼ねた、基本的な使い方や機能説明などを紹介していこうかと（この記事をベースに公式なドキュメントを作ろうかと思っているのよね）。

動作環境について

基本的に「Ambient」はWEBアプリケーションなので、WEBブラウザでアクセスするだけで利用可能だ。
そして「Ambient」が真価を発するのは、自分のPC上などのローカルPC環境にインストールした時で、その時はYouTubeメディアもPC上のメディアもどちらも再生できるハイブリッドなメディアプレイヤーとして使用できるようになる。そもそも「Ambient」はデプロイされた環境上の相対パスによってローカルのメディアファイルを探すため、インストールした環境に存在しないメディアファイルを再生できないのだ。一方でYouTubeメディアの場合は、「YouTube Iframe Player API」を使ってURL経由でメディアを参照できるので特にインストール環境に左右されない。
そんなわけで、そのうちデモ用にクラウド版を公開しようかとも思っているものの、そちらのクラウド版ではYouTubeのメディアしか再生できない出来損ないのメディアプレイヤーになってしまうだろう。

さて、本題の「Ambient」を動かすには、PHPの実行環境とローカルPC上にWEBブラウザでアクセスできるようにするWEBサーバ（Apache）環境の準備が必要になる。
まぁ、Windowsマシンなら「 XAMPP 」を、Macなら「 MAMP 」をインストールしてしまうのが一番お手軽だろう。知識があれば、dockerやVirtualBox等で仮想サーバを立ててしまっても構わないし、WEBサーバもApacheでなくNginxでも利用可能だ（URLをRewriteする設定さえ行えば動作する）。

PHPの動作バージョンだが、PHP7.4以降なら問題なく動くだろう。私はPHP8.2.4の環境で「Ambient」を開発しているが、8.x以降のみでしか動作しないコードは含めていないので。
また、インストールパッケージのJavaScriptやCSSはデプロイ済みなので、特に最新のブラウザで動作しないということはないはずだ。

インストールの方法

「Ambient」のインストールはgithubのリポジトリからパッケージリソースを取得するだけだ。
コマンドラインからだと、インストールするパス（ドキュメントルート直下等）で、

git clone https://github.com/ka215/ambient.git ambient

もしくは、

git clone git@github.com:ka215/ambient.git ambient

──を実行するだけだ。これでambientディレクトリが作られて、その下にインストールされる。
ドキュメントルート直下に上記コマンドでインストールした場合、ブラウザでURL欄にlocalhost/ambientとかlocalhost:8888/ambient等と入力すれば起動するはずだ。もし仮想ホスト名を指定している場合は`http://{ホスト名}/ambient`等でアクセスできるようになるだろう。

また、AmbientのgithubリポジトリからZIPファイルをダウンロードして、それをインストールしたい場所へ展開することでも導入できる。

プレイリストを作る

次に「Ambient」で再生するメディアのプレイリストを作る必要がある。
初期インストール時には空のプレイリストがバンドルされているので、これをひな形にして自分用のプレイリストを作って行くことになる。
プレイリストは「Ambient」のインストールディレクトリ内のassetsフォルダ内に入っている。複数作ることも可能なので、ひな形のassets/PlayList.jsonをコピーして使うのが良いだろう。
プレイリストの書式はJSON形式で、JSON Schemaは https://ka2.org/schemas/ambient-playlist.json で確認できる。

スキーマ定義だけだと分かりづらいので、実際のプレイリストの一例を下記に掲載しておこう。

{
    "YouTube お気に入り": [
        {
            "title": "Thunder",
            "artist": "Imagine Dragons",
            "videoid": "fKopy74weus",
            "start": "21"
        },
        {
            "title": "Numb",
            "artist": "Linkin Park",
            "videoid": "kXYiU_JCYtU"
        },
        {
            "title": "Unity",
            "artist": "TheFatRat",
            "videoid": "n8X9_MgEdCg"
        }
    ],
    "ローカルPCのミュージック": [
        {
            "disc": 1,
            "track": 1,
            "file": "グランディアのテーマ.mp3",
            "title": "グランディアのテーマ『忘れられない冒険へ』",
            "desc": "ベスト・オブ・グランディア Disc1",
            "artist": "岩垂徳行",
            "image": "The_Best_of_GRANDIA.jpg"
        },
        {
            "disc": 1,
            "track": 1,
            "file": "幻想の世界へ.mp3",
            "title": "プロローグ ～幻想の世界へ",
            "desc": "タイトルBGM",
            "artist": "幻想水滸伝 オリジナル・ゲーム・サントラ DISC1",
            "image": "gensousuikoden.webp"
        }
    ],
    "options": {
        "autoplay":   true,
        "random":     true,
        "seek":       true,
        "dark":       false
    }
}

プレイリストの設定内容を簡単に説明しておく。
まず、プレイリストのJSONデータのルートオブジェクトのプロパティは「カテゴリー名」として自由に命名できる。
ただしプロパティ名が「options」の場合のみ、「Ambient」の初期設定として取り扱われるので注意が必要だ（この「options」設定はなくても構わない）。
そして、カテゴリープロパティの値として、再生メディアを配列型で記載していくことになる。
メディアデータの構造は下記のようになっている。

プロパティ名	値の型	値について
`title`	`?string`	再生メディアのタイトル名。これが指定されていないか、もしくは空文字の場合、そのメディアは無効なデータとしてAmbient側で再生できない
`file`	`?string`	再生メディアのファイルパス。Ambientインストールディレクトリ下の`assets/media`フォルダからの相対パスで指定する。指定パスにメディアファイルがない場合は再生されない
`videoid`	`?string`	再生メディアのYouTubeでのVIDEO ID（YouTubeの動画URLのv=～で表されるパラメータ値）。この`videoid`と`file`の両方が定義されたメディアについては`videoid`で指定されたYouTubeの動画再生が優先される
`desc`	`?string`	再生メディアの説明やサブタイトルなど。Ambient側のキャプション欄などの出力に利用される
`artist`	`?string`	再生メディアのアーティスト名。Ambient側のキャプション欄などの出力に利用される
`image`	`?string`	再生メディアのサムネイル画像のファイルパス。Ambientインストールディレクトリ下の`assets/images`フォルダからの相対パスで指定する。そのメディアがYouTube動画の場合はYouTube側からサムネイルを自動で取得するので、ローカルのメディアファイル用のサムネイル指定である。指定パスに画像ファイルがない場合はサムネイルは表示されない
`start`	`?string ?integer`	メディアの再生開始時間（秒）。オプションにて「シーク再生」が有効になっている場合、これが指定されているメディアは指定の秒数までシークしてから再生が開始される。秒数の整数値、もしくは`HH:MM:SS`の形式で指定できる
`end`	`?string ?integer`	メディアの再生終了時間（秒）。オプションにて「シーク再生」が有効になっている場合、これが指定されているメディアは再生時間が指定の秒数に達した時点で再生が終了する。秒数の整数値、もしくは`HH:MM:SS`の形式で指定できる

上記以外にもプロパティは自由に追加できるので、自分用の管理項目等をプロパティ化しておくこともできる。

次にAmbient用の初期設定用の「options」プロパティのデータ構造を説明しておく。

プロパティ名	値の型	初期値	値について
`autoplay`	`?boolean`	`true`	自動再生用のフラグ。現在は固定値で`true`のみが有効
`random`	`?boolean`	`false`	ランダム再生をするかどうかのフラグ。Ambient側の設定で都度変更可能
`seek`	`?boolean`	`false`	シーク再生を有効化するかどうか。Ambient側の設定で都度変更可能
`dark`	`?boolean`	`false`	AmbientのUIをダークモードにするかどうか。Ambient側の設定で都度変更可能
`background`	`?string`	“	AmbientのUIに背景画像を表示する場合の画像ファイルパス。Ambientインストールディレクトリ下の`assets/images`フォルダからの相対パスで指定する
`caption`	`?string`	`%artist% - %title% - %desc%`	Ambientのキャプション欄に出力するメディアデータの書式フォーマット。`%{プロパティ名}%`のプレースホルダーを使うことでメディアデータに定義したプロパティ値を参照できる
`playlist`	`?string`	`%artist% - %title%`	Ambientのプレイリスト一覧（左側ドロワー）に表示されるメディアデータの書式フォーマット。`%{プロパティ名}%`のプレースホルダーを使うことでメディアデータに定義したプロパティ値を参照できる

「options」プロパティについては初期値の変更がなければ、省略してしまっても問題ない。

再生メディアのアセットを準備する

プレイリストに設定したメディアがすべてYouTubeのメディアであれば、このフェーズはスキップして構わない。

もしローカルPCのメディアを再生対象とする場合、再生メディアや画像ファイル等をAmbientのアセット・ディレクトリ内に配置する必要がある。
アセットファイルの設置手順は下記の通りだ。

再生メディアファイル: Ambientのインストールディレクトリ直下にあるassets/mediaフォルダ内
各種画像ファイル: Ambientのインストールディレクトリ直下にあるassets/imagesフォルダ内

しかしながら、ローカルPCのメディアファイルを移動させるのは面倒なうえに他のメディアプレイヤーの参照先と齟齬が出る。かといって、コピーだと無駄にPCのストレージ領域を圧迫してしまう。なので、元々メディアファイルが入っているフォルダへのシンボリックリンクをassets/media内に作成するのがオススメだ。
ちなみにAmbientはショートカットには対応していないので、シンボリックリンクにする必要がある。
で、シンボリックリンクの作成例は下記の通りだ。

Windowsの場合

ExplorerにてAmbientのメディアフォルダへ移動して、アドレス欄にcmdと入力してEnter。
コマンドプロンプトが起動するので、

mklink /D nzk "C:\Users\ユーザー名\Music\BEST OF VOCAL WORKS [nZk]"

──のように、既にあるローカルPC内のメディアが格納されているフォルダへのパスをシンボリックリンクとして登録する（パス中のフォルダ名に半角空白が含まれている場合はリンクパス全体をクォーテーションで括ればOK）。
3. プレイリストJSONのメディアデータのfileプロパティのファイルパス指定をnzk/friends.mp4のように作成したシンボリックリンク経由のパスにすれば完了だ。

Mac(Linux)の場合

ターミナル等のコマンドライン・ツールを起動して、

cd /Applications/MAMP/htdocs/ambient/assets/media
ln -s /Users/ユーザー名/Music/BEST\ OF\ VOCAL\ WORKS\ [nZk] nzk

──のように、Ambientのメディアフォルダへ移動してから既にあるローカルPC内のメディアが格納されているフォルダへのパスをシンボリックリンクとして登録する（パス中のフォルダ名に半角空白が含まれている場合はバックスラッシュでエスケープすればOK）。
2. プレイリストJSONのメディアデータのfileプロパティのファイルパス指定をnzk/friends.aacのように作成したシンボリックリンク経由のパスにすれば完了だ。

なお、このシンボリックリンク経由で既存のメディアディレクトリをAmbient側にマウントさせる機能は、近いうちにAmbient側のオプションメニューに追加する予定だ（いちいちコマンド発行するのが面倒なので……）。

Ambient側にプレイリストを読み込む

Ambientは起動時にassets内にあるJSONファイルを検索して、有効なプレイリストを自動で読み込んでくれる。
プレイリストを更新した際などは、Ambientを再起動（下部メニューから「Refresh」を実行）すればプレイリストが再読み込みされる。

あとは「Settings」メニュー（右ドロワー）を開いて、読み込みたいプレイリストを選択するだけだ。

再生するプレイリストを選択した後は、プレイリスト内にあるカテゴリーを選ぶことができるようになる。デフォルトではすべてのカテゴリーに属するメディアが再生対象になっているが、カテゴリー毎に再生メディアを絞り込むこともできる。

Ambientでのメディアの再生

プレイリストが読み込まれると、下部メニューの再生ボタンが有効になるので、それをクリックすれば再生が開始される。

① 基本的には下部メニューの再生/一時停止ボタンでメディアの再生を制御できる。もちろん、埋め込まれるYouTubeプレイヤーやHTMLメディアプレイヤーの再生コントロールでも制御可能で、そちら側での制御は下部メニューの再生/一時停止ボタンに同期している。

② プレイリスト一覧（左ドロワー）を開いて再生したいメディアをクリックすることで、任意のメディアを再生できる。

③ メディアのサムネイルが表示されている左右のアローボタンで直前に再生していたメディアや次に再生する候補のメディアを指定することも可能だ。

対応状況

2023年10月20日時点での、ブラウザと再生メディアファイルについての対応状況は以下の通りである。

ブラウザ

「Ambient」の動作確認済みのブラウザ:

Chrome(>=^118)	Firefox(>=^118)	Edge(>=^118)	Safari(>=^16)	Opera(>=^103)
Ok	Ok	Ok	Ok	Ok

HTML5の<audio>と<video>タグに対応していない古いブラウザや、JavaScriptが有効になっていないブラウザ環境では動作しない。

メディアファイル形式

「Ambient」では、公開されているYouTubeの動画であればすべて再生できる。
一方で、ローカルPC上のメディアファイル形式の場合、HTML5の<audio>と<video>タグが再生可能なメディアに準じることになる。一般的なメディアファイル形式での対応状況を下記にまとめてみた。

MP3(.mp3)	WAVE(.wav)	MP4(.mp4)	AAC(.aac)	WEBM(.webm)	OGG(.ogg)	M4A(.m4a)	WMA(.wma)
Ok	Ok	Ok	Ok	Ok	Ok	✕	✕

上記以外のメディアファイル形式に対応しているかは調べていないのでわからないが、おそらく他にも再生可能なメディアはあると思われる。世の中、マイナーな動画や音声ファイルを含めると相当な数のメディアファイル形式があるので、調べきれていない。また、PC側にインストールされている再生コーデックの状況によっては、再生できるメディア形式が変わって来る可能性もあるだろう。

Ambientの多言語化

「Ambient」はUIの多言語化に対応している。
assetsフォルダ直下に翻訳定義ファイルlang.jsonを設置することで、UIをデフォルトの英記から任意の言語表記へ変更することが可能だ。
サンプルとして、日本語化用の翻訳定義ファイルを下記に紹介しておく。

{
    "$language": "日本語",
    "Ambient Media Player": "",
    "Get choose your playlist you want to play from the settings menu.": "設定メニューより再生したいプレイリストを選んでください",
    "Notify": "お知らせ",
    "Dismiss": "閉じる",
    "Previous Item": "前へ",
    "Next Item": "次へ",
    "Watch on YouTube": "YouTubeで観る",
    "Playlist": "プレイリスト",
    "Refresh": "再起動",
    "Play": "再生",
    "Pause": "一時停止",
    "Settings": "設定",
    "Options": "オプション",
    "Close Playlist": "プレイリストを閉じる",
    "No media available.": "有効なメディアがありません",
    "Close Settings": "設定を閉じる",
    "Current Playlist": "現在のプレイリスト",
    "Choose a playlist": "プレイリストを選んでください",
    "Target Category": "対象のカテゴリー",
    "All categories": "すべてのカテゴリー",
    "Randomly play": "ランダム再生",
    "Seek and play": "シーク再生",
    "Dark mode": "ダークモード",
    "Close options": "オプションを閉じる",
    "Media Management": "メディア管理",
    "Add media to the currently active playlist.": "",
    "Media you add is lost when you switch playlists or end your application session.": "",
    "If you want the additional media to be permanent, you will need to download the playlist after adding the media.": "",
    "Add New Media": "",
    "Playlist Creator": "プレイリスト作成",
    "It is expected to be implemented in the near future.": "",
    "Please look forward to it.": "",
    "Report an issue": "問題を報告",
    "Ambient development code is managed in a github repository.": "",
    "To report bugs or problems, please raise an issue on github.": "",
    "Before reporting a problem, please check to see if a similar issue has already been submitted.": "",
    "Check out and submit issues.": "",
    "About Ambient": "Ambientについて",
    "Ambient is an open source media player that allows you to seamlessly mix and play media published on YouTube and media stored on your local PC.": "",
    "Additionally, since Ambient is designed as a web application, anyone can use it by accessing the application's pages with a common web browser.": "",
    "However, if you want to use Ambient on your local PC, you will need to prepare a PHP execution environment and launch your application onto that environment.": "",
    "Learn more about the technology Ambient uses below:": "",
    "YouTube IFrame Player API": "",
    "tailwindcss": "",
    "Flowbite": "",
    "Version:": "",
    "(user setup)": ""
}

Ambientにバンドルされているassets/lang.jsonの中身を上記の内容で上書きすることで、主要なUI部分はすべて日本語化されるだろう。
翻訳定義ファイルについてはファイル名のサフィックス対応をしているので、日本語の翻訳定義はlang-ja.jsonのようにファイルを分けて管理することも可能だ。ただ、現バージョンのAmbientではlang.jsonを優先的に使用するようになっているので、サフィックス化した翻訳定義ファイルを作った場合は、lang.jsonをどこかに退避させるか、拡張子をjsonから変更して無効化してしまうしかない。
この辺の多言語ファイルの読み込み処理は、将来的に改善するつもりである。

最後に

「Ambient」はMITライセンスのオープンソースとしてリリースしている。
また、全リソースはgithubで公開しているので、興味がある方は是非使ってみて欲しい。

https://github.com/ka215/ambient

感想とか意見とか聞かせてくれると、とても嬉しい♪