{"id":15611490,"url":"https://github.com/fengkx/svelte-aplayer","last_synced_at":"2025-07-28T00:10:07.485Z","repository":{"id":57375179,"uuid":"353415618","full_name":"fengkx/svelte-aplayer","owner":"fengkx","description":"Music player in Svelte with custom element (web component) build","archived":false,"fork":false,"pushed_at":"2023-07-28T11:57:10.000Z","size":570,"stargazers_count":28,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-19T06:29:24.892Z","etag":null,"topics":["aplayer","music-player","player","svelte","svelte-components","webcomponents"],"latest_commit_sha":null,"homepage":"https://svelte-aplayer.js.org","language":"Svelte","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/fengkx.png","metadata":{"files":{"readme":"README.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}},"created_at":"2021-03-31T16:07:45.000Z","updated_at":"2025-06-06T07:51:03.000Z","dependencies_parsed_at":"2024-10-22T17:24:52.306Z","dependency_job_id":null,"html_url":"https://github.com/fengkx/svelte-aplayer","commit_stats":{"total_commits":45,"total_committers":2,"mean_commits":22.5,"dds":"0.022222222222222254","last_synced_commit":"98a64121dadfdbbb2f85e2da8230118aa768e5d7"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/fengkx/svelte-aplayer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fengkx%2Fsvelte-aplayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fengkx%2Fsvelte-aplayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fengkx%2Fsvelte-aplayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fengkx%2Fsvelte-aplayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fengkx","download_url":"https://codeload.github.com/fengkx/svelte-aplayer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fengkx%2Fsvelte-aplayer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267442481,"owners_count":24087806,"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-07-27T02:00:11.917Z","response_time":82,"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":["aplayer","music-player","player","svelte","svelte-components","webcomponents"],"created_at":"2024-10-03T06:04:54.190Z","updated_at":"2025-07-28T00:10:07.377Z","avatar_url":"https://github.com/fengkx.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eSvelte APlayer\u003c/h1\u003e\n\n\u003e Aplayer port in Svelte with Custom element (WebComponent) build\n\n## Introduction\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Ffengkx%2Fsvelte-aplayer.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Ffengkx%2Fsvelte-aplayer?ref=badge_shield)\n\n\nThis is a [Aplayer](https://github.com/DIYgod/APlayer) port in [Svelte](https://svelte.dev/).\n\nThanks to Svelte, It is **framework agnostic** and no **runtime required** with prebuild custom element bundle.\n\nIt should be a good alternative to `hexo-tag-aplayer` as well as any environment in which you can customise your HTML by using custom element.\n\nDrawback: Due to the limitaion of custom element, Instead of use object in the props of custom element, You need to pass a **strict json string**. And all props are snake case style naming.\n\n## Usage\n\n```shell\nnpm i svelte-aplayer\n```\n\nUsing in webcomponent\n[Example](https://svelte-aplayer.js.org)\n\nUsing in Svelte\n\n```sveltehtml\nimport Aplayer from 'svelte-aplayer/dist/svelte/svelte-aplayer.es.js'\nimport 'svelte-aplayer/dist/svelte/style.css'\n\n...\n\n\u003cAplayer audio={\n    {name:'君の知らない物語',\n    artist: 'supercell',\n    cover: 'https://blog-static.fengkx.top/svelte-aplayer/bakemonogatari-ed.jpg',\n    url: \"https://blog-static.fengkx.top/svelte-aplayer/bakemonogatari-ed.mp3\"}} /\u003e\n```\n\n## Options\n\n| Name            | Default   | Description                                                                                                                  |\n| --------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------- |\n| mini            | false     | enable mini mode, [see more details](https://aplayer.js.org/#/home?id=mini-mode)                                             |\n| autoplay        | false     | audio autoplay                                                                                                               |\n| theme           | '#b7daff' | main color                                                                                                                   |\n| loop            | 'all'     | player loop play, values: 'all', 'one', 'none'                                                                               |\n| order           | 'list'    | player play order, values: 'list', 'random'                                                                                  |\n| volume          | 0.7       | default volume, notice that player will remember user setting, default volume will not work after user set volume themselves |\n| audio           | -         | audio info, should be an object or object array **strict json string is required in custom element**                         |\n| audio.name      | -         | audio name                                                                                                                   |\n| audio.artist    | -         | audio artist                                                                                                                 |\n| audio.url       | -         | audio url                                                                                                                    |\n| audio.cover     | -         | audio cover                                                                                                                  |\n| audio.lrc       | -         | URL or string of lrc file                                                                                                    |\n| audio.theme     | -         | main color when switching to this audio, it has priority over the above theme                                                |\n| mutex           | true      | prevent to play multiple player at the same time, pause other players when this player start play                            |\n| list_folded     | false     | indicate whether list should folded at first                                                                                 |\n| list_max_height | -         | list max height                                                                                                              |\n| base_font_size  | 12        | base font size to adjust the whole size of the player as well as lrc font size                                               |\n\n## Event\n\nAudio Events\n\n- abort\n- canplay\n- canplaythrough\n- durationchange\n- emptied\n- ended\n- error\n- loadeddata\n- loadedmetadata\n- loadstart\n- mozaudioavailable\n- pause\n- play\n- playing\n- progress\n- ratechange\n- seeked\n- seeking\n- stalled\n- suspend\n- timeupdate\n- volumechange\n- waiting\n\nFor svelte compatibility native events are wrapped in the `detail` property of the CustomEvent.\n\n```js\ndocument.querySelector(\"s-aplayer\").addEventListener(\"play\", (ev) =\u003e {\n  console.log(ev); // CustomEvent object\n  console.log(ev.detail); // audio element play event object\n});\n```\n\nPlayer Events\n\n- listshow\n- listhide\n- listswitch\n- listchange\n- destroy\n- lrcshow\n- lrchide\n\n# Piror Art\n\n- https://github.com/DIYgod/APlayer/\n\n\n## License\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Ffengkx%2Fsvelte-aplayer.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Ffengkx%2Fsvelte-aplayer?ref=badge_large)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffengkx%2Fsvelte-aplayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffengkx%2Fsvelte-aplayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffengkx%2Fsvelte-aplayer/lists"}