https://github.com/shershen08/vuejs-sound-player
▶️ 🎹 🎵 HTML5 <audio> tag sound player UI for Vue.js - supports single, loop, pause/stop modes etc
https://github.com/shershen08/vuejs-sound-player
audio player sound vuejs2
Last synced: about 1 month ago
JSON representation
▶️ 🎹 🎵 HTML5 <audio> tag sound player UI for Vue.js - supports single, loop, pause/stop modes etc
- Host: GitHub
- URL: https://github.com/shershen08/vuejs-sound-player
- Owner: shershen08
- Created: 2017-01-05T09:16:51.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:22:28.000Z (almost 3 years ago)
- Last Synced: 2025-09-26T00:24:08.893Z (about 2 months ago)
- Topics: audio, player, sound, vuejs2
- Language: JavaScript
- Homepage: https://shershen08.github.io/vue-plugins-demo-static/index.html#/sound
- Size: 1.31 MB
- Stars: 178
- Watchers: 3
- Forks: 30
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-audio - audio-tag wrapper; sound player component for Vue 2.x (Components & Libraries / UI Components)
- awesome-vue-refactor - vue-audio ★9
- awesome-vue-zh - Vue音频 - 音频标签包装;Vue 2.x的声音播放器组件 (UI组件 / 音频视频)
- awesome-vue - vue-audio ★112 - audio-tag wrapper; sound player component for Vue 2.x (UI Components / Audio / Video)
- awesome-vue - vue-audio - HTML5 `<audio>` tag sound player UI for Vue.js - supports single, loop, pause/stop modes etc ` 📝 7 months ago` (UI Components [🔝](#readme))
- awesome-vue - vue-audio - audio-tag wrapper; sound player component for Vue 2.x (UI Components / Audio / Video)
README
## Vue.js sound player
Vue.js sound audio player UI. Covers audio-tag API and adds more.
 [](https://www.jsdelivr.com/package/npm/vue-audio)
### Demo
See [DEMO](https://shershen08.github.io/vue-plugins-demo-static/index.html#/sound) here
### Installation
Use npm: ```npm install vue-audio --save```
Or bower: ```bower install vue-audio```
### Usage
Add in the component ```import VueAudio from 'vue-audio';```
Use in the template ``````
The component has following attributes:
- **file** (String), required;
- **autoPlay** (Boolean), optional, false by default;
- **loop** (Boolean), optional, false by default;
For styling the Bootstrap classes v 3.7 are used, so you may want to add [bootstrap css](https://www.npmjs.com/package/bootstrap-css) package or add via stylesheet link ``````
### Questions, bugs
Create [an issue](https://github.com/shershen08/vuejs-sound-player/issues) or try to ping me on twitter [@legkoletat](https://twitter.com/legkoletat)
### Contribute
### 1. install dependencies
```
yarn install
```
### 2. run the dev server
```
yarn dev
```
and then access the url which the project is running at(example: http://localhost:8081/) . Otherwise, you can simplify run this command.
```
yarn open
```
It will open the website after building.
### License
MIT