{"id":15024784,"url":"https://github.com/wilsonwu/vuetify-audio","last_synced_at":"2025-04-06T00:09:04.526Z","repository":{"id":45620059,"uuid":"94118235","full_name":"wilsonwu/vuetify-audio","owner":"wilsonwu","description":"A Vue audio player base on Vuetify UI framework: https://wilsonwu.github.io/dist/index.html#/vuetifyaudio","archived":false,"fork":false,"pushed_at":"2024-03-12T14:39:49.000Z","size":27,"stargazers_count":141,"open_issues_count":6,"forks_count":30,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T22:06:45.488Z","etag":null,"topics":["audio","mp3","player","vue","vuejs2","vuetify"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/wilsonwu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.md","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":"2017-06-12T16:37:49.000Z","updated_at":"2025-01-18T10:48:37.000Z","dependencies_parsed_at":"2024-06-18T16:49:57.849Z","dependency_job_id":"88aed52e-a2ad-4799-8b90-46794ba89ab2","html_url":"https://github.com/wilsonwu/vuetify-audio","commit_stats":{"total_commits":48,"total_committers":8,"mean_commits":6.0,"dds":0.5,"last_synced_commit":"4b1841f58e8821eba24e34d3b0784d3939ffbeaa"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wilsonwu%2Fvuetify-audio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wilsonwu%2Fvuetify-audio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wilsonwu%2Fvuetify-audio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wilsonwu%2Fvuetify-audio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wilsonwu","download_url":"https://codeload.github.com/wilsonwu/vuetify-audio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247415967,"owners_count":20935387,"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":["audio","mp3","player","vue","vuejs2","vuetify"],"created_at":"2024-09-24T20:00:55.075Z","updated_at":"2025-04-06T00:09:04.508Z","avatar_url":"https://github.com/wilsonwu.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vuetify-audio\n\u003ca href=\"https://www.npmjs.com/package/vuetify-audio\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/vuetify-audio.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vuetify-audio\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vuetify-audio.svg\" alt=\"Version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vuetify-audio\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/vuetify-audio.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\nVue.js sound audio player base on Vuetify UI framework. Covers audio-tag API and adds more.\n\n## Features\n- Support most of audio play in this component.\n- You can set the color you want for all component buttons.\n- Support download the audio file.\n- After audio playing finished or before start the playing, you can do something.\n- Support Dark mode of Vuetify.\n- Support auto play, but if user didn't interact with the document first, the audio can't be played.\n- Support turn on and off audio download button.\n- Support disable the Vuetify Card style, and you can use this component in your own Vuetify Card of your page.\n- You can set custom icons supported by vuetify v-icon component.\n\n### Demo\n\nhttps://wilsonwu.github.io/dist/index.html#/vuetifyaudio\n\n### Installation\n\nUse npm: ```npm install vuetify-audio --save```\n\n### Prepare\nAt first make sure your project is Vue project, and has ```Vuetify``` as UI framework:\n1. Install Vuetify:\n```\nnpm install vuetify --save-dev\n```\n2. Add Vuetify to ```app.js``` or ```main.js```:\n```js\nimport Vuetify from 'vuetify';\nimport 'vuetify/dist/vuetify.min.css';\n\nVue.use(Vuetify);\n```\n\nYou also can use Vue plugin to install ```Vuetify``` by only one line command:\n```\nvue add vuetify\n```\n\nNode: Make sure you are using the default Vuetify iconfont (mdi) or override the icon attributes with some other supported by v-icon component.\n\n### Usage\nAdd below code into your ```\u003cscript\u003e```:\n```js\nexport default {\n    components: {\n        VuetifyAudio: () =\u003e import('vuetify-audio'),\n    },\n    data: () =\u003e ({\n        file: 'http://www.hochmuth.com/mp3/Boccherini_Concerto_478-1.mp3',\n    }),\n}\n\n```\n\nAnd below code in the ```\u003ctemplate\u003e```:\n```html\n\u003cvuetify-audio :file=\"file\" color=\"success\" :ended=\"audioFinish\" downloadable\u003e\u003c/vuetify-audio\u003e\n```\n\n\n### Attributes\n\n - **file** (String) (Required): Set audio file for the audio player\n - **ended** (Function) (Optional): Set callback function name after audio finish\n - **canPlay** (Function) (Optional): Set callback function name when audio ready for playing\n - **color** (String) (Optional): Set all component buttons color\n - **autoPlay** (Boolean) (Optional, default is false): Add it to make the audio auto play, but in some web browsers maybe failed, because some browsers need user active in the page first then allow sound auto play.\n - **downloadable** (Boolean) (Optional, default is false): Add it to let the audio file can be downloaded.\n - **flat** (Boolean) (Optional, default is false): When set to true, make the Vuetify Card style to flat, that you can combine other information/image/data with this control in your page.\n - **playIcon** (String) (Optional, default is mdi-play): Set the icon for play\n - **pauseIcon** (String) (Optional, default is mdi-pause): Set the icon for pause\n - **stopIcon** (String) (Optional, default is mdi-stop): Set the icon for stop\n - **refreshIcon** (String) (Optional, default is mdi-refresh): Set the icon for refresh\n - **downloadIcon** (String) (Optional, default is mdi-download): Set the icon for download\n - **volumeHighIcon** (String) (Optional, default is mdi-volume-high): Set the icon for volume\n - **volumeMuteIcon** (String) (Optional, default is mdi-volume-mute): Set the icon for mute\n\n### Known Issues\n1. Audio play pregress bar can't support drag, only support click.\n\n### ToDo\n\n - ~~Create online demo~~\n - ~~Create npm install~~\n - ~~Add customize collor for component~~\n - ~~Add event for end audio~~\n - ~~Add auto play audio~~\n - ~~Add downloadable property for audio file~~\n - ~~Fully support dark mode~~\n - ~~Add prop for Card flat~~\n - ~~Add increase or decrease volume of audio~~\n - ~~Add props for custom icons~~\n \n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilsonwu%2Fvuetify-audio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwilsonwu%2Fvuetify-audio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilsonwu%2Fvuetify-audio/lists"}