HTML5 Audio Player UI for Vue.js 2

HTML5 Audio Player UI for Vue.js 2

An HTML5 audio-tag sound player UI for Vue.js v2.

Vue.js sound player

Vue.js sound audio player UI. Covers audio-tag API and adds more.

dependencies status


See DEMO here


Use npm: npm install vue-audio --save

Or bower: bower install vue-audio


Add in the component import VueAudio from 'vue-audio';

Use in the template <vue-audio file="myLocalFile"></vue-audio>

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 package or add via stylesheet link <link rel="stylesheet" href="">

Questions, bugs

Create an issue or try to ping me on twitter @legkoletat


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.



Github Repository

Tags: #VueJs