{"id":19430763,"url":"https://github.com/jmrashed/custom-audio-player","last_synced_at":"2026-06-11T13:31:49.540Z","repository":{"id":84181011,"uuid":"581428243","full_name":"jmrashed/Custom-Audio-Player","owner":"jmrashed","description":"Custom Audio Player","archived":false,"fork":false,"pushed_at":"2023-03-31T09:20:39.000Z","size":319,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-30T05:05:15.069Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/jmrashed.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-23T06:45:51.000Z","updated_at":"2023-03-31T09:10:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"0755fc0a-005c-42a6-b28c-0438c336a13a","html_url":"https://github.com/jmrashed/Custom-Audio-Player","commit_stats":null,"previous_names":["mrzstack/custom-audio-player","jmrashed/custom-audio-player"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jmrashed/Custom-Audio-Player","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmrashed%2FCustom-Audio-Player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmrashed%2FCustom-Audio-Player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmrashed%2FCustom-Audio-Player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmrashed%2FCustom-Audio-Player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jmrashed","download_url":"https://codeload.github.com/jmrashed/Custom-Audio-Player/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmrashed%2FCustom-Audio-Player/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34201840,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"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":"2024-11-10T14:26:27.612Z","updated_at":"2026-06-11T13:31:49.522Z","avatar_url":"https://github.com/jmrashed.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Audio Player with HTML and CSS\nThis code provides an example of how to create an audio player using HTML and CSS. It uses the audio element in HTML5 to load an MP3 file and allows users to play, pause, and adjust the volume of the audio file.\n\n# Demo\nHere's a demo of the audio player in action:\n\n### Demo 'demo1.html'\n\u003cimg src=\"./assets/images/1.png\"\u003e\n\n### Demo 'demo2.html'\n\u003cimg src=\"./assets/images/2.png\"\u003e\n\n\n# How to Use\nTo use the audio player, simply embed the code into an HTML file, replace the src attribute in the source element with the URL of your MP3 file, and adjust the name attribute to match the name of your audio file.\n\n```html\n\n\u003caudio controls\u003e\n  \u003csource src=\"https://example.com/audio.mp3\" type=\"audio/mp3\"\u003e\n\u003c/audio\u003e\n\u003cdiv class=\"audio-player\"\u003e\n  \u003cdiv class=\"timeline\"\u003e\n    \u003cdiv class=\"progress\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"controls\"\u003e\n    \u003cdiv class=\"play-container\"\u003e\n      \u003cdiv class=\"toggle-play play\"\u003e\n    \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"time\"\u003e\n      \u003cdiv class=\"current\"\u003e0:00\u003c/div\u003e\n      \u003cdiv class=\"divider\"\u003e/\u003c/div\u003e\n      \u003cdiv class=\"length\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"name\"\u003eAudio File Name\u003c/div\u003e\n    \u003cdiv class=\"volume-container\"\u003e\n      \u003cdiv class=\"volume-button\"\u003e\n        \u003cdiv class=\"volume icono-volumeMedium\"\u003e\u003c/div\u003e\n      \u003c/div\u003e\n      \n      \u003cdiv class=\"volume-slider\"\u003e\n        \u003cdiv class=\"volume-percentage\"\u003e\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n```\n \n\n# Styling\nThe audio player is styled using CSS. You can customize the look of the player by modifying the CSS.\n\n# Credits\nThe icon used for the volume button is from fontawesome.\n\n# License\nThis code is licensed under the MIT License.\n\n\n## 🚀 About Me\nHello, my name is [Md Rasheduzzaman](https://github.com/jmrashed). I am a seasoned Full-Stack Developer, Software Architect, and System Analyst with over six years of experience in the field. I hold a B.Sc degree in Computer Science and Engineering.\n\nMy area of expertise includes PHP, JavaScript, and Python. Throughout my career, I have developed a strong understanding of web development, including front-end and back-end programming, database management, and web architecture design. I enjoy working on challenging projects that allow me to push my skills to the limit.\n\nAs a full-stack developer, I am comfortable working with both the client-side and server-side of web development, which enables me to build web applications that are both functional and aesthetically pleasing. My experience as a software architect and system analyst has also helped me to understand the importance of designing scalable and maintainable software systems.\n\nIn my free time, I enjoy learning about new web technologies and experimenting with new programming languages. I believe that keeping up with the latest trends and technologies is essential for staying relevant and delivering top-quality work.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmrashed%2Fcustom-audio-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjmrashed%2Fcustom-audio-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmrashed%2Fcustom-audio-player/lists"}