{"id":19101449,"url":"https://github.com/likev/html5-audio-player","last_synced_at":"2025-04-18T18:32:29.069Z","repository":{"id":55486919,"uuid":"54776285","full_name":"likev/html5-audio-player","owner":"likev","description":"html5 audio player(with playlist) forked from @k-ivan","archived":false,"fork":false,"pushed_at":"2020-12-27T15:12:18.000Z","size":6579,"stargazers_count":72,"open_issues_count":3,"forks_count":40,"subscribers_count":6,"default_branch":"master","last_synced_at":"2023-08-11T09:29:52.177Z","etag":null,"topics":["html5-audio","html5-audio-player"],"latest_commit_sha":null,"homepage":"https://likev.github.io/html5-audio-player/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/likev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-26T11:35:52.000Z","updated_at":"2023-08-07T11:30:33.000Z","dependencies_parsed_at":"2022-08-15T01:30:30.934Z","dependency_job_id":null,"html_url":"https://github.com/likev/html5-audio-player","commit_stats":null,"previous_names":[],"tags_count":1,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/likev%2Fhtml5-audio-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/likev%2Fhtml5-audio-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/likev%2Fhtml5-audio-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/likev%2Fhtml5-audio-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/likev","download_url":"https://codeload.github.com/likev/html5-audio-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223783090,"owners_count":17201907,"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":["html5-audio","html5-audio-player"],"created_at":"2024-11-09T03:53:18.269Z","updated_at":"2025-04-18T18:32:29.058Z","avatar_url":"https://github.com/likev.png","language":"JavaScript","funding_links":[],"categories":["others"],"sub_categories":[],"readme":"# html5-audio-player\n\n## 1. introduce\nhtml5 audio player(with playlist) using flexbox, svg, css animations and  js api.\n\nforked from @k-ivan at http://codepen.io/k-ivan/pen/pJMLmJ\n\ndemo: [html5-audio-player](https://likev.github.io/html5-audio-player/ 'html5-audio-player demo')\n\n![html5-audio-player-screenshot](html5-audio-player.png)\n\n## 2. how to use\n1. insert Google Material Icons and AudioPlayer.css before `\u003c/head\u003e`\n2. insert AudioPlayer.js before `\u003c/body\u003e`\n3. use AP.init function\n\ncode example:\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml \u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eAudio player HTML5\u003c/title\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n\n    \u003clink href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"css/AudioPlayer.css\"\u003e\n    \u003cstyle\u003e\n\n    #player{\n        position: relative;\n        max-width: 700px;\n        height: 500px;\n        border: solid 1px gray;\n    }\n    \u003c/style\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n      \u003c!-- Audio player container--\u003e\n     \u003cdiv id='player'\u003e\u003c/div\u003e\n\n    \u003c!-- Audio player js begin--\u003e\n    \u003cscript src=\"js/AudioPlayer.js\"\u003e\u003c/script\u003e\n\n    \u003cscript\u003e\n        // test image for web notifications\n        var iconImage = null;\n\n        AP.init({\n            container:'#player',//a string containing one CSS selector\n            volume   : 0.7,\n            autoPlay : true,\n            notification: false,\n            playList: [\n                {'icon': iconImage, 'title': 'Try Everything', 'file': 'mp3/try-everything.mp3'},\n                {'icon': iconImage, 'title': 'Let It Go', 'file': 'mp3/let-it-go.mp3'}\n          ]\n        });\n    \u003c/script\u003e\n    \u003c!-- Audio player js end--\u003e\n\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nit will work!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flikev%2Fhtml5-audio-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flikev%2Fhtml5-audio-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flikev%2Fhtml5-audio-player/lists"}