{"id":15024814,"url":"https://github.com/kimlarocca/vue-sound","last_synced_at":"2025-04-12T12:52:35.361Z","repository":{"id":44237813,"uuid":"274958078","full_name":"kimlarocca/vue-sound","owner":"kimlarocca","description":"Vue Sound is an audio player built with Vue.js. Add a beautiful \u0026 accessible cross-browser HTML5 audio player to your Vue app!","archived":false,"fork":false,"pushed_at":"2024-12-11T19:48:18.000Z","size":4491,"stargazers_count":25,"open_issues_count":7,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-11T21:18:08.840Z","etag":null,"topics":["accessible-audio-player","audio","audio-player","audioplayer","mp3","mp3-player","mp3player","sound","vue","vue-hifi","vue-sound","vuejs","vuejs2","vuesound"],"latest_commit_sha":null,"homepage":"https://www.kimlarocca.com/vue-sound/","language":"Vue","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/kimlarocca.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":"2020-06-25T15:58:36.000Z","updated_at":"2025-02-23T13:14:15.000Z","dependencies_parsed_at":"2024-11-07T18:16:04.617Z","dependency_job_id":null,"html_url":"https://github.com/kimlarocca/vue-sound","commit_stats":{"total_commits":87,"total_committers":1,"mean_commits":87.0,"dds":0.0,"last_synced_commit":"6693a55abb7a3b61f1488b0f7b1fecc744cb32cb"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimlarocca%2Fvue-sound","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimlarocca%2Fvue-sound/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimlarocca%2Fvue-sound/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimlarocca%2Fvue-sound/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kimlarocca","download_url":"https://codeload.github.com/kimlarocca/vue-sound/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248571621,"owners_count":21126520,"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":["accessible-audio-player","audio","audio-player","audioplayer","mp3","mp3-player","mp3player","sound","vue","vue-hifi","vue-sound","vuejs","vuejs2","vuesound"],"created_at":"2024-09-24T20:01:00.454Z","updated_at":"2025-04-12T12:52:35.331Z","avatar_url":"https://github.com/kimlarocca.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"\u003cimg width=\"300\" src=\"https://raw.githubusercontent.com/kimlarocca/vue-sound/main/public/logo.png\" alt=\"vue sound\" /\u003e\n\n# Vue Sound: An accessible audio player built with Vue.js\n\nAdd a beautiful \u0026 accessible cross-browser HTML5 audio player to your Vue app!\n\nDemo: [https://www.kimlarocca.com/vue-sound/](https://www.kimlarocca.com/vue-sound/)\n\n## Installation and Usage\n\n```\nnpm install vue-sound --save-dev\n```\n\nImport Vue Sound:\n\n```\nimport { VueSound } from 'vue-sound'\n```\n\nImport the Vue Sound styles from 'vue-sound/style.css'. For example:\n\n```\n@import 'vue-sound/style.css';\n```\n\n### Example\n\n```\n\u003cvue-sound\n  livestream\n  show-download\n  title=\"The Show\"\n  title-link=\"http://www.google.com\"\n  details=\"Lorem Ipsum Dolor Sit Amet\"\n  details-link=\"http://www.bing.com\"\n  file=\"http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3\"\n/\u003e\n```\n\n### Configuration\n\nAll props except for the audio file are optional.\n\n| Prop          | Type    | Default | Description |\n| ------------- | ------- | ------- | ------------------------------------------------------------------------ |\n| livestream    | boolean | false   | if true, displays slimmer version of audio player meant for a livestream |\n| show-download | boolean | false   | if true, display a download button |\n| image         | string  | null    | url for the track image |\n| title         | string  | null    | the title of the track |\n| title-link    | string  | null    | url for the title link |\n| details       | string  | null    | details for the track |\n| details-link  | string  | null    | url for the details link |\n| file          | string  | null    | url for the audio file (mp3 is highly recommended) |\n\n#### Styles\n\nOverride these CSS variables to customize the look and feel:\n\n```\n:root {\n  --player-background: #00123e;\n  --player-font-family: \"Open Sans\", sans-serif;\n  --player-font-size: 0.9rem;\n  --player-font-size-small: 0.7rem;\n  --player-font-weight: 300;\n  --player-font-weight-bold: 600;\n  --player-text-color: #ffffff;\n  --player-icon-color: var(--player-text-color);\n  --player-link-color: var(--player-text-color);\n  --player-progress-color: #41b883;\n  --player-buffered-color: #41b883;\n  --player-seeker-color: #ffffff;\n  --player-input-range-color: var(--player-text-color);\n}\n```\n\n### Browser Support\n\nThe audio element is supported by all modern browsers. We recommend using MP3 audio files since that format is also supported by all modern browsers.\n\n### Accessibility\n\nVue Sound is 100% keyboard accessible. The enter/space keys toggle play/pause, the up/down arrows control the volume, and the right/left arrows skip ahead/back. Other audio player controls such as mute and download can be tabbed to and controlled by the keyboard.\n\n## Local Development Environment\n\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n\n```\nnpm run dev\n```\n\n### Compiles and minifies for production\n\n```\nnpm run build\n```\n\n#### Runs unit tests\n\n```\nnpm run test\n```\n\n## Questions / Contributing\n\nReport issues or open pull requests on github: https://github.com/kimlarocca/vue-sound\n\n## Need support for streaming or audio fallbacks?\n\nTry adding `vue-hifi` by NY Public Radio to your project! [https://github.com/nypublicradio/vue-hifi](https://github.com/nypublicradio/vue-hifi)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimlarocca%2Fvue-sound","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkimlarocca%2Fvue-sound","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimlarocca%2Fvue-sound/lists"}