{"id":30136449,"url":"https://github.com/wraith13/web-media-player","last_synced_at":"2026-03-16T08:34:31.720Z","repository":{"id":307573044,"uuid":"1027099735","full_name":"wraith13/web-media-player","owner":"wraith13","description":null,"archived":false,"fork":false,"pushed_at":"2025-08-09T11:01:44.000Z","size":2122,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-09T13:03:40.175Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsl-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wraith13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE_1_0.txt","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}},"created_at":"2025-07-27T10:08:45.000Z","updated_at":"2025-08-09T11:01:47.000Z","dependencies_parsed_at":"2025-08-01T00:54:06.213Z","dependency_job_id":"bbde8b36-4f85-4257-9d2e-52f16853267f","html_url":"https://github.com/wraith13/web-media-player","commit_stats":null,"previous_names":["wraith13/web-media-player"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wraith13/web-media-player","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wraith13%2Fweb-media-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wraith13%2Fweb-media-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wraith13%2Fweb-media-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wraith13%2Fweb-media-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wraith13","download_url":"https://codeload.github.com/wraith13/web-media-player/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wraith13%2Fweb-media-player/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269803855,"owners_count":24477658,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2025-08-10T23:08:32.220Z","updated_at":"2025-12-28T06:06:20.482Z","avatar_url":"https://github.com/wraith13.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Media Player\n\n[![pages-build-deployment](https://github.com/wraith13/web-media-player/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/wraith13/web-media-player/actions/workflows/pages/pages-build-deployment)\n[![TypeScript](https://img.shields.io/badge/TypeScript-%E2%9C%93-3178C6?logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n![SCSS](https://img.shields.io/badge/SCSS-%E2%9C%93-CC6699?logo=sass\u0026logoColor=white)\n[![License](https://img.shields.io/badge/License-Boost_1.0-lightblue.svg)](./LICENSE_1_0.txt)\n\n## ▶️ Live Site\n\n\u003cp align=\"center\" style=\"padding:1rem;\"\u003e\n\u003ca href=\"https://wraith13.github.io/web-media-player/\"\u003e\n\u003cimg src=\"./play-now-button.svg\" alt=\"Open live site\" width=\"240\" height=\"48\"/\u003e\u003cbr/\u003e\nhttps://wraith13.github.io/web-media-player/\n\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e [!NOTE]\n\u003e Please make sure your operating system and web browser are up to date.\n\n\u003e [!NOTE]\n\u003e If media playback on your iPhone or iPad isn't working correctly, try restarting your device.\n\n## 🎯 Feature\n\n- ✅ Supports image, audio, and video media that can be played in your web browser! (Supported media types depend entirely on your environment.)\n- ✅ Because it's web-based, you can run multiple instances (multi-window support), use it on smartphones and tablets, and even install it as an app!\n- ✅ Safe shuffle playback (prevents issues such as media that never gets played or a just-played item playing again immediately.)\n- ✅ Stretch settings to control how much content can exceed the screen size, preventing excessive enlargement.\n- ✅ Padding settings to fill extra space with enlarged content.\n- ✅ Various visualizers based on volume, waveform, and frequency.\n- ✅ Stylish analog clock display ( ⚠️ This feature can be quite resource-intensive. )\n- ✅ Crossfade transitions: Alpha, Blur, Wipe, Random\n- ✅ Weather, clock, date, calendar, and visualizer can be overlaid.\n- ✅ Keyboard shortcut style presets: Apple Music, YouTube, Spotify, Windows Media Player\n- ✅ Generally, when small images (such as pixel art) are enlarged in a web browser, they become blurry, but this player displays them sharply using pixelated rendering.\n- ✅ Full offline support for all features except weather display (weather requires an Internet connection)\n- ✅ For practical browser compatibility, everything that doesn't need to be split into a separate file is embedded in index.html. This reduces requests and enables very fast loading, so the single index.html file provides nearly all functionality with minimal issues.\n- ✅ FPS display\n- ✅ Full keyboard navigation support\n- ✅ Conforms to WAI-ARIA\n- ✅ Multi-language support: العربية(ar), বাংলা(bn), Deutsch(de), Ελληνικά(el), English(en), Español(es), فارسی(fa), Français(fr), हिन्दी(hi), Bahasa Indonesia(id), Italiano(it), 日本語(ja), 한국어(ko), Nederlands(nl), Polski(pl), Português(pt), Русский(ru), ไทย(th), Türkçe(tr), اردو(ur), Tiếng Việt(vi), 简体中文(zh-cn), 繁體中文(zh-tw)\n- 🚫 Because it's web-based, playlists cannot be saved. (Technically possible, but not practical, so it's not implemented.)\n- 🚫 Because it's web-based, background playback and timers do not work reliably.\n\n## 📷 Screenshot\n\nUI\n![UI](./screenshot/ui.png)\n\nSettings Panel\n![Settings Panel](./screenshot/settings.png)\n\nPlaying an image with padding and overlays\n![Tokyo Metropolitan Government Building](./screenshot/tokyo_metropolitan_government_building.png)\n\nPlaying an audio\n![Audio](./screenshot/audio.png)\n\nPlaying a video on an iPhone Air (installed and running as a App)\n![AC6](./screenshot/ac6.png)\n\nWipe transition\n![Wipe transition](./screenshot/wipe-transition.png)\n\nStylish analog clock ( ⚠️ This feature can be quite resource-intensive. )\n![Stylish analog clock](./screenshot/stylish-analog-clock.png)\n\n## 🔗 Options Available via URL Parameters\n\nThe following options cannot be set via the UI.\n\n- `locale`: Specifies the locale. (Example: [`#locale=en-us`](https://wraith13.github.io/web-media-player/#locale=en-us))\n- `title`: Text displayed in place of the time. (Example: [`#title=Hello!`](https://wraith13.github.io/web-media-player/#title=Hello!\u0026with-clock=true\u0026with-date=true\u0026overlay-position=center))\n- `subtitle`: Text displayed in place of the date. (Example: [`#subtitle=Have+a+nice+day!`](https://wraith13.github.io/web-media-player/#subtitle=Have+a+nice+day!\u0026with-clock=true\u0026with-date=true\u0026overlay-position=center))\n- `screenshot`: Specifies the screenshot mode. Accepts one of `favicon` or `twitter-card`. (Example: [`#screenshot=twitter-card`](https://wraith13.github.io/web-media-player/#screenshot=twitter-card))\n\n## 🛠️ How to build\n\n### Prerequisites\n\n- Git\n- Node.js (version 16 or higher recommended)\n- npm (Node Package Manager)\n\n### Steps\n\n1. Install dependencies:\n   ```sh\n   git submodule update --recursive --merge --init\n   npm install\n   ```\n2. Build the project:\n   ```sh\n   npm run-script \"build all\"\n   ```\n\nMore information: see [`./BUILD.md`](./BUILD.md#build-commands)\n\n## 📁 Files\n\nDetailed file reference: [FILES.md](./FILES.md)\n\n- [Template files](./FILES.md#template-files)\n- [Source files](./FILES.md#source-files)\n- [Generated files (do not edit)](./FILES.md#generated-files-do-not-edit)\n- [Runtime files](./FILES.md#runtime-files)\n- [Other](./FILES.md#other)\n\n## 🗣️ How to add a supported language\n\nCreate a JSON file for the language you want by copying one of the existing language JSON files in the [`./resouce/lang/`](./resouce/lang/) directory, then run the build. The Web Manifest, README.md, and other necessary files will be generated automatically and the language will be added.\n\n## 🌐 How to publish\n\n1. Fork [this repository](https://github.com/wraith13/web-media-player/) on GitHub.\n2. Go `Settings`(→`Options`)→`GitHub Pages` or `Pages`, select `master` branch and `/(root)` folder from drop down list, and click `Save`.\n\n## 💪 Powered by\n\n- [build.js](https://github.com/wraith13/build.js)\n- [evil-commonjs](https://github.com/wraith13/evil-commonjs)\n- [evil-timer.js](https://github.com/wraith13/evil-timer.js)\n- [flounder.style.js](https://github.com/wraith13/flounder.style.js)\n- [wttr.in](https://github.com/chubin/wttr.in)\n\n## ⚖️ License\n\n[Boost Software License](./LICENSE_1_0.txt)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwraith13%2Fweb-media-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwraith13%2Fweb-media-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwraith13%2Fweb-media-player/lists"}