{"id":24560874,"url":"https://github.com/ka215/ambient","last_synced_at":"2026-06-06T19:00:47.972Z","repository":{"id":199306640,"uuid":"702196858","full_name":"ka215/ambient","owner":"ka215","description":"Ambient is the hybrid media player that seamlessly plays YouTube and your own PC media files.","archived":false,"fork":false,"pushed_at":"2026-05-16T13:08:43.000Z","size":3800,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-16T15:12:38.022Z","etag":null,"topics":["ai-agents","apache","flowbite","php","playwright","tailwindcss-v4","typescript","youtube"],"latest_commit_sha":null,"homepage":"https://amp.ka2.org/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ka215.png","metadata":{"files":{"readme":"README-ja.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2023-10-08T19:14:31.000Z","updated_at":"2026-05-16T13:04:23.000Z","dependencies_parsed_at":"2023-10-13T08:24:21.131Z","dependency_job_id":"527e7ddc-adb4-421d-9b55-a5bd0f4a44ac","html_url":"https://github.com/ka215/ambient","commit_stats":null,"previous_names":["ka215/ambient"],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/ka215/ambient","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ka215%2Fambient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ka215%2Fambient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ka215%2Fambient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ka215%2Fambient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ka215","download_url":"https://codeload.github.com/ka215/ambient/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ka215%2Fambient/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33394672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T04:15:53.637Z","status":"ssl_error","status_checked_at":"2026-05-23T04:15:53.242Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-agents","apache","flowbite","php","playwright","tailwindcss-v4","typescript","youtube"],"created_at":"2025-01-23T07:19:08.822Z","updated_at":"2026-06-06T19:00:47.958Z","avatar_url":"https://github.com/ka215.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\r\n  \u003cdiv align=\"center\"\u003e\r\n    \u003cimg src=\"./views/images/ambient-logo-color.svg\" width=\"64\" align=\"center\" /\u003e\r\n  \u003c/div\u003e\r\n  Ambient\r\n\u003c/h1\u003e\r\n\r\n\u003e English README: [README.md](README.md)\r\n\r\nAmbient は、YouTube IFrame Player API と HTML5 の audio/video を組み合わせて、\r\nYouTube とローカルメディアをシームレスに再生できるハイブリッド型メディアプレイヤーです。\u003cbr\u003e\r\nお気に入りの YouTube 動画と手元のメディアファイルを 1 つのプレイリストで管理し、連続再生できます。\u003cbr\u003e\r\n**あなたの Ambient メディア体験を始めましょう。**\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg alt=\"GitHub package.json version\" src=\"https://img.shields.io/github/package-json/v/ka215/ambient\"\u003e\r\n  \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/ka215/ambient\"\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"#概要\"\u003e概要\u003c/a\u003e \u0026middot;\r\n  \u003ca href=\"#動作環境\"\u003e動作環境\u003c/a\u003e \u0026middot;\r\n  \u003ca href=\"#インストール\"\u003eインストール\u003c/a\u003e \u0026middot;\r\n  \u003ca href=\"#プレイリストの作成\"\u003eプレイリストの作成\u003c/a\u003e \u0026middot;\r\n  \u003ca href=\"#メディアアセット\"\u003eメディアアセット\u003c/a\u003e \u0026middot;\r\n  \u003ca href=\"#互換性\"\u003e互換性\u003c/a\u003e \u0026middot;\r\n  \u003ca href=\"#ローカライズ\"\u003eローカライズ\u003c/a\u003e \u0026middot;\r\n  \u003ca href=\"#参考\"\u003e参考\u003c/a\u003e \u0026middot;\r\n  \u003ca href=\"#最後に\"\u003e最後に\u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n## 概要\r\n\r\nPC で作業中に BGM を流す場合、ローカル音源はローカルプレイヤー、YouTube はブラウザ、と再生環境が分かれがちです。\r\nAmbient はこの分断をなくし、1 つの Web UI で再生管理できるようにするために作られました。\r\n\r\nYouTube の埋め込みプレイヤーと HTML の `\u003caudio\u003e` / `\u003cvideo\u003e` を組み合わせることで、\r\nYouTube とローカルメディアの双方を同じ操作感で扱えます。\r\n\r\n![Ambient Media Player](https://ka2.org/assets/2023/10/Ambient_Media_Player_03.jpg)\r\n\r\nデモ（クラウド版）:\r\n\r\n[Ambient DEMO (cloud ver.)](https://amp.ka2.org/)\r\n\r\n## 動作環境\r\n\r\nAmbient は Web アプリケーションのため、基本的にはブラウザで利用できます。\r\nただしローカルメディア再生を含む本来の使い方では、ローカル PC 上で PHP 実行環境と Web サーバー（Apache/Nginx）を用意する必要があります。\r\n\r\n- 推奨構成: Windows + XAMPP（または macOS + MAMP）\r\n- PHP: 8.4 以上（推奨）\r\n- URL リライト設定が必要\r\n\r\nクラウド版デモではサーバー上にローカルメディアを置かないため、YouTube 再生中心の挙動になります。\r\n\r\n## インストール\r\n\r\n以下のようにドキュメントルート配下などへ clone します。\r\n\r\n```bash\r\ngit clone https://github.com/ka215/ambient.git ambient\r\n```\r\n\r\nたとえばドキュメントルート直下に配置した場合、`http://localhost/ambient` などでアクセスできます。\r\nclone 後は `.env.example` を `.env` にコピーし、必要に応じて環境依存値を調整してください。\r\nAmbient は現在、以下の設定を `.env` から読み込みます。\r\n\r\n- `DEBUG_MODE`: ブラウザおよび PHP のデバッグログ出力の有効/無効\r\n- `ASSETS_DIR`: プロジェクトルートからのアセットディレクトリ\r\n- `LOGS_DIR`: プロジェクトルートからのログディレクトリ\r\n- `ASSET_MODE`: `build` ならビルド済み asset、`dev` なら Vite dev server を使用\r\n- `VITE_DEV_SERVER_URL`: 開発モード時に使用する Vite asset URL\r\n\r\nリリースページの ZIP を展開して導入する方法でも問題ありません。\r\n\r\n### フロントエンド開発とビルド\r\n\r\nAmbient は現在、フロントエンドの asset pipeline に Vite を使用します。\r\n\r\n- 開発起動:\r\n  - `npm run dev`\r\n- 型チェック:\r\n  - `npm run typecheck`\r\n- 商用ビルド相当:\r\n  - `npm run build`\r\n\r\nApache の reverse proxy 配下でローカル開発する場合は、以下を設定します。\r\n\r\n```env\r\nASSET_MODE=dev\r\nVITE_DEV_SERVER_URL=https://dev-amp.ka2.org/vite\r\n```\r\n\r\n商用ビルド相当のローカル確認では、以下を設定します。\r\n\r\n```env\r\nASSET_MODE=build\r\n```\r\n\r\n詳細な運用手順:\r\n\r\n- `docs/operations/20260510-v2-3-0-vite-development-and-build-runbook-ja.md`\r\n- `docs/operations/20260510-v2-3-0-vite-development-and-build-runbook.md`\r\n\r\n## プレイリストの作成\r\n\r\nプレイリストは `assets/` 配下の JSON ファイルです。\r\n初期状態ではテンプレートとして `assets/PlayList.json` が含まれます。\r\n必要に応じてコピーして複数作成してください。\r\n\r\nJSON Schema:\r\n\r\n- https://ka2.org/schemas/ambient.json\r\n\r\nサンプル:\r\n\r\n```json\r\n{\r\n  \"YouTube Favorites\": [\r\n    {\r\n      \"title\": \"Thunder\",\r\n      \"artist\": \"Imagine Dragons\",\r\n      \"videoid\": \"fKopy74weus\",\r\n      \"start\": \"21\"\r\n    },\r\n    {\r\n      \"title\": \"Numb\",\r\n      \"artist\": \"Linkin Park\",\r\n      \"videoid\": \"kXYiU_JCYtU\"\r\n    }\r\n  ],\r\n  \"Local PC Music\": [\r\n    {\r\n      \"disc\": 1,\r\n      \"track\": 1,\r\n      \"file\": \"Grandia_Theme.mp3\",\r\n      \"title\": \"Unforgettable Adventure\",\r\n      \"desc\": \"The Best of Grandia Disc1\",\r\n      \"artist\": \"Noritaka Iwadare\",\r\n      \"image\": \"The_Best_of_GRANDIA.jpg\"\r\n    }\r\n  ],\r\n  \"options\": {\r\n    \"autoplay\": true,\r\n    \"random\": true,\r\n    \"seek\": true,\r\n    \"dark\": false\r\n  }\r\n}\r\n```\r\n\r\n### メディア項目の主なプロパティ\r\n\r\n| Property | Value Type | 説明 |\r\n|:--------:|:----------:|:-----|\r\n| title | string | 再生タイトル。未指定/空文字は無効扱い。 |\r\n| file | string | `assets/media` からの相対パス。 |\r\n| videoid | string | YouTube 動画 ID（`v=` の値）。`file` より優先。 |\r\n| desc | string | 説明・サブタイトル。 |\r\n| artist | string | アーティスト名。 |\r\n| image | string | `assets/images` からの相対パス。YouTube は自動取得。 |\r\n| volume | integer | 個別初期音量（0-100）。 |\r\n| start / end | string/integer | 再生開始/終了時刻（秒または `H:MM:SS`）。 |\r\n| fadein / fadeout | integer/float | フェードイン/フェードアウト時間（秒）。 |\r\n| fs | integer/boolean | メディア単位のフルスクリーン制御。 |\r\n| cc | integer/boolean | 字幕表示の切替（主に YouTube）。 |\r\n\r\n### options の主なプロパティ\r\n\r\n| Property | Value Type | Default | 説明 |\r\n|:--------:|:----------:|:-------:|:-----|\r\n| autoplay | boolean | true | 自動再生フラグ。 |\r\n| random | boolean | false | ランダム再生。 |\r\n| shuffle | boolean | false | シャッフル再生。 |\r\n| seek | boolean | false | シーク再生有効化。 |\r\n| volume | integer | 100 | 全体の初期音量。 |\r\n| fader | boolean | false | 擬似フェーダー処理。 |\r\n| dark | boolean | false | ダークモード。 |\r\n| background | string | - | 背景画像パス。 |\r\n| caption | string | `%artist% - %title% - %desc%` | キャプション表示フォーマット。 |\r\n| playlist | string | `%artist% - %title%` | プレイリスト表示フォーマット。 |\r\n| fs | boolean | false | 全体のフルスクリーン制御。 |\r\n| cc | boolean | false | 全体の字幕表示制御。 |\r\n\r\n## メディアアセット\r\n\r\nローカルメディアを再生する場合は、以下を配置します。\r\n\r\n- 再生メディア: `assets/media`\r\n- 画像ファイル: `assets/images`\r\n\r\n既存のメディア配置を変えたくない場合は、`assets/media` 配下にシンボリックリンクを作成する運用が便利です。\r\n\r\n### Ambient 側でのプレイリスト読み込み\r\n\r\n- 起動時に `assets` 配下の JSON を自動探索して有効なプレイリストを読み込み\r\n- 更新後は「Refresh」で再読み込み\r\n- 設定メニューからプレイリストを選択\r\n\r\n### 再生操作\r\n\r\n- 下部メニューの再生ボタンで再生開始\r\n- 左ドロワーから任意メディアを直接再生\r\n- サムネイル付き前後ボタンで前後候補へ遷移\r\n\r\n![Ambient UI](https://ka2.org/assets/2023/10/Ambient_Media_Player_UI.jpg)\r\n\r\n## 互換性\r\n\r\n### ブラウザ\r\n\r\n以下の主要ブラウザで動作確認済みです（HTML5 audio/video と JavaScript が有効であることが前提）。\r\n\r\n| Chrome(\u003e=^118) | Firefox(\u003e=^118) | Edge(\u003e=^118) | Safari(\u003e=^16) | Opera(\u003e=^103) |\r\n|:--------------:|:---------------:|:------------:|:-------------:|:-------------:|\r\n| Ok | Ok | Ok | Ok | Ok |\r\n\r\n### メディア形式\r\n\r\nローカルメディアは HTML5 `\u003caudio\u003e` / `\u003cvideo\u003e` で再生可能な形式に準拠します。\r\n\r\n| MP3(.mp3) | WAVE(.wav) | MP4(.mp4) | AAC(.aac) | WEBM(.webm) | OGG(.ogg) | M4A(.m4a) | WMA(.wma) |\r\n|:---------:|:----------:|:---------:|:---------:|:-----------:|:---------:|:---------:|:---------:|\r\n| Ok | Ok | Ok | Ok | Ok | Ok | ✕ | ✕ |\r\n\r\n## ローカライズ\r\n\r\n`assets/langs/lang.json` を翻訳定義で上書き、または `assets/langs/lang-{langCode}.json` を追加することで UI を多言語化できます（後方互換として `assets/lang-{langCode}.json` も引き続き読み込めます）。\r\n`$language` キーで表示言語名を定義し、各 UI 文言をキーとして翻訳値を設定します。\r\n\r\n例: `lang-de.json` を配置すればドイツ語 UI に切り替え可能です。\r\n\r\n## 参考\r\n\r\n- [YouTube Player API Reference](https://developers.google.com/youtube/iframe_api_reference)\r\n- [tailwindcss](https://tailwindcss.com/docs/installation)\r\n- [Flowbite](https://flowbite.com/docs/getting-started/introduction/)\r\n- [M+FONTS](https://mplusfonts.github.io/)\r\n\r\n利用例（ブログ記事）:\r\n\r\n- [Introducing the initial release (Japanese)](https://ka2.org/ambient-media-player)\r\n- [About features added in version 1.1.0 (Japanese)](https://ka2.org/released_ambient_demo_version)\r\n\r\n## 最後に\r\n\r\nAmbient は YouTube IFrame Player API と HTML5 メディア要素を中心に構成されるオープンソースプロジェクトです。\r\nライセンスは MIT License です。\r\n\r\n- Repository: https://github.com/ka215/ambient\r\n\r\nフィードバックや Issue は歓迎します。\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fka215%2Fambient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fka215%2Fambient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fka215%2Fambient/lists"}