{"id":15357192,"url":"https://github.com/gera2ld/h5player","last_synced_at":"2025-10-12T17:21:44.286Z","repository":{"id":30615029,"uuid":"34170391","full_name":"gera2ld/h5player","owner":"gera2ld","description":"HTML5 music player","archived":false,"fork":false,"pushed_at":"2018-03-03T16:29:23.000Z","size":337,"stargazers_count":30,"open_issues_count":0,"forks_count":13,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-12T04:48:38.054Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gera2ld.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-18T15:10:58.000Z","updated_at":"2022-12-19T07:22:59.000Z","dependencies_parsed_at":"2022-08-03T15:14:40.311Z","dependency_job_id":null,"html_url":"https://github.com/gera2ld/h5player","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gera2ld%2Fh5player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gera2ld%2Fh5player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gera2ld%2Fh5player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gera2ld%2Fh5player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gera2ld","download_url":"https://codeload.github.com/gera2ld/h5player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248578864,"owners_count":21127713,"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","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":"2024-10-01T12:33:51.802Z","updated_at":"2025-10-12T17:21:39.255Z","avatar_url":"https://github.com/gera2ld.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## H5Player\n\n![NPM](https://img.shields.io/npm/v/h5player.svg)\n![License](https://img.shields.io/npm/l/h5player.svg)\n\n### Installation\n\n``` sh\n$ yarn add h5player\n# or\n$ npm install h5player -S\n```\n\n### Usage\n\n1. Load `h5player`\n\n  * Via global\n\n    ``` html\n    \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/h5player/dist/style.css\"\u003e\n    \u003cscript src=\"https://unpkg.com/h5player/dist/index.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n    const { H5Player } = window;\n    \u003c/script\u003e\n    ```\n\n  * Via CMD\n\n    ``` javascript\n    const H5Player = require('h5player');\n    ```\n\n  * Via ESModule\n\n    ```js\n    import H5Player from 'h5player';\n    ```\n\n2. Create a player and append it to `document.body` (or any mounted element).\n\n   ``` javascript\n   const player = new H5Player({\n     image: 'http://example.com/path/to/default/image',\n     getLyric: (song, callback) =\u003e {\n       const lyric = getLyricFromSomewhereElse(song);\n       callback(lyric);\n     },\n   });\n   document.body.appendChild(player.el);\n\n   player.setSongs([\n     {\n       name: 'Song1',\n       url: 'http://example.com/path/to/song1.mp3',\n       additionalInfo: 'whatever',\n     }, {\n       name: 'Song2',\n       url: 'http://example.com/path/to/song2.mp3',\n     }\n   ]);\n   player.play(0);\n   ```\n\n### Document\n\nEach player is built with `player = new H5Player(options)`. *options* is an object with properties below:\n\n* `theme`: *optional* string\n\n  Possible values are `normal` (by default) and `simple`.\n  Can be changed by `player.setTheme(theme)`.\n\n* `mode`: *optional* string\n\n  The repeat mode for the playlist, possible values are `repeatAll` (by default), `repeatOne` and `repeatOff`.\n  Can be changed by `player.setMode(mode)`.\n\n* `showPlaylist`: *optional* Boolean\n\n  Whether to show playlist. Can be changed by `player.setPlaylist(show)`.\n\n* `image`: *optional* string *or* object\n\n  Image shown when no image is assigned for the current song.  \n  It can be a string of the path to the image or an object with theme names as the keys and\n  image paths as the values.  \n  The recommended image size for **normal** theme is 130 * 130, and 34 * 34 for **simple** theme.\n\n* `getLyric`: *optional* function\n\n  An async function to get the lyric. There are two parameters for the callback. The first parameter is the song object and the second is a callback to send the lyric to the player.\n\nThe `player` object has following methods:\n\n* `setSongs`(*Array* songs)\n\n  Set playlist for the player, *songs* is a list of `object`s with properties below:\n\n  * `name`: *required* string\n\n    The name of the song.\n\n  * `url`: *required* string\n\n    A downloadable URL.\n\n  * `artist`: *optional* string\n\n    The name of the artist.\n\n  * `duration`: *optional* integer\n\n    Length of the song in seconds.\n\n  * `image`: *optional* string *or* object\n\n    The image for the current song. Similar to the default image in common settings.\n\n  * `lyric`: *optional* string\n\n    Lyric of the song, e.g. `[00:00]foo\\n[00:05]bar\\n...`.\n\n* `play`(*int* index)\n\n  Start playing the *index*-th song.\n\n* `setTheme`(*string* theme)\n\n  Change theme.\n\n* `setMode`(*string* mode)\n\n  Change repeat mode.\n\n* `setPlaylist`(*boolean* show)\n\n  Toggle playlist on / off.\n\nWhen the play status is changed, a `PlayerEvent` will be fired with its `detail` set to an object with following attributes:\n\n* `player`\n\n  The `Player` object that is related to this event\n\n* `type`\n\n  `'play'` or `'pause'`\n\nThe player is mounted to `player.el`, you need to append it to the container.\n\n### Snapshots\n\nNormal theme:\n\n![snapshot](snapshots/normal.png)\n\nSimple theme: (multiple players)\n\n![snapshot](snapshots/simple.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgera2ld%2Fh5player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgera2ld%2Fh5player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgera2ld%2Fh5player/lists"}