https://github.com/kimlarocca/vue-sound
Vue Sound is an audio player built with Vue.js. Add a beautiful & accessible cross-browser HTML5 audio player to your Vue app!
https://github.com/kimlarocca/vue-sound
accessible-audio-player audio audio-player audioplayer mp3 mp3-player mp3player sound vue vue-hifi vue-sound vuejs vuejs2 vuesound
Last synced: about 1 year ago
JSON representation
Vue Sound is an audio player built with Vue.js. Add a beautiful & accessible cross-browser HTML5 audio player to your Vue app!
- Host: GitHub
- URL: https://github.com/kimlarocca/vue-sound
- Owner: kimlarocca
- Created: 2020-06-25T15:58:36.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-12-11T19:48:18.000Z (over 1 year ago)
- Last Synced: 2025-04-11T21:18:08.840Z (about 1 year ago)
- Topics: accessible-audio-player, audio, audio-player, audioplayer, mp3, mp3-player, mp3player, sound, vue, vue-hifi, vue-sound, vuejs, vuejs2, vuesound
- Language: Vue
- Homepage: https://www.kimlarocca.com/vue-sound/
- Size: 4.28 MB
- Stars: 25
- Watchers: 1
- Forks: 5
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Sound: An accessible audio player built with Vue.js
Add a beautiful & accessible cross-browser HTML5 audio player to your Vue app!
Demo: [https://www.kimlarocca.com/vue-sound/](https://www.kimlarocca.com/vue-sound/)
## Installation and Usage
```
npm install vue-sound --save-dev
```
Import Vue Sound:
```
import { VueSound } from 'vue-sound'
```
Import the Vue Sound styles from 'vue-sound/style.css'. For example:
```
@import 'vue-sound/style.css';
```
### Example
```
```
### Configuration
All props except for the audio file are optional.
| Prop | Type | Default | Description |
| ------------- | ------- | ------- | ------------------------------------------------------------------------ |
| livestream | boolean | false | if true, displays slimmer version of audio player meant for a livestream |
| show-download | boolean | false | if true, display a download button |
| image | string | null | url for the track image |
| title | string | null | the title of the track |
| title-link | string | null | url for the title link |
| details | string | null | details for the track |
| details-link | string | null | url for the details link |
| file | string | null | url for the audio file (mp3 is highly recommended) |
#### Styles
Override these CSS variables to customize the look and feel:
```
:root {
--player-background: #00123e;
--player-font-family: "Open Sans", sans-serif;
--player-font-size: 0.9rem;
--player-font-size-small: 0.7rem;
--player-font-weight: 300;
--player-font-weight-bold: 600;
--player-text-color: #ffffff;
--player-icon-color: var(--player-text-color);
--player-link-color: var(--player-text-color);
--player-progress-color: #41b883;
--player-buffered-color: #41b883;
--player-seeker-color: #ffffff;
--player-input-range-color: var(--player-text-color);
}
```
### Browser Support
The audio element is supported by all modern browsers. We recommend using MP3 audio files since that format is also supported by all modern browsers.
### Accessibility
Vue 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.
## Local Development Environment
```
npm install
```
### Compiles and hot-reloads for development
```
npm run dev
```
### Compiles and minifies for production
```
npm run build
```
#### Runs unit tests
```
npm run test
```
## Questions / Contributing
Report issues or open pull requests on github: https://github.com/kimlarocca/vue-sound
## Need support for streaming or audio fallbacks?
Try adding `vue-hifi` by NY Public Radio to your project! [https://github.com/nypublicradio/vue-hifi](https://github.com/nypublicradio/vue-hifi)