• Stars
    star
    178
  • Rank 214,989 (Top 5 %)
  • Language
    JavaScript
  • Created almost 8 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

▢️ 🎹 🎡 HTML5 <audio> tag sound player UI for Vue.js - supports single, loop, pause/stop modes etc

Vue.js sound player

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

dependencies status

Demo

See DEMO 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 <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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

Questions, bugs

Create an issue or try to ping me on twitter @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

More Repositories

1

vue-masonry

πŸ’  Vue.js directive for masonry blocks layouting βœ…
JavaScript
673
star
2

emoji-vue

Add emoji keyboard to your vuejs project
JavaScript
137
star
3

vue-styleguide-generator

React inspired style guide generator for Vue.js
JavaScript
122
star
4

vue-terminal-ui

πŸ–₯Terminal UI emulator VueJS component
JavaScript
55
star
5

vue.js-v2-crud-application

Vue.js demo app
HTML
54
star
6

tailor-vue-demo

Using frontend microservices with zalando/tailor and Vue.js as frontend fw
JavaScript
39
star
7

vuejs-content-scroll-progress

Top bar indicating amount of content scrolled
HTML
25
star
8

vue-lorem-ipsum

Lorem ipsum text generator component for vue.js
Vue
15
star
9

vue-preload

Plugin SSR Vue adding <link rel="preload" capabilities
JavaScript
15
star
10

svelte-pwa-chat

SvelteJS + websockets app
HTML
8
star
11

svelte-pwa-chat-backend

Java
6
star
12

ng2-web-cryptography

Module implementing Web Cryptography API for Angular 2
TypeScript
6
star
13

vue-ya-metrica

Yandex.Metrica component for Vue.js
JavaScript
6
star
14

vue-image-colorpicker

Image colours picker (dropper) - using Vue.js
JavaScript
3
star
15

sveltejsnews

[ARCHIVED]
HTML
3
star
16

nest-vs-next-vs-nuxt-vs-sapper

JavaScript
2
star
17

otus-chrome-extension

JavaScript
2
star
18

single-spa-hyperapp

Plugin to include your Hyperapp into single-spa based webpage
JavaScript
2
star
19

vue2-pdfjs-viewer

PDF preview component for Vue.js based on PDF.js
JavaScript
2
star
20

node-express-vite-eureka-kibana

JavaScript
2
star
21

vue3-workshop-demo-2021

Demo files for 'Vue3 practical development' workshop. Find PDF with slides via link below:
JavaScript
2
star
22

vue-starters-directory

List of available starter kits for Vue projects
Vue
2
star
23

svelte-chat-live

HTML
1
star
24

qr-app

JavaScript
1
star
25

quasar-vite-tailwind-storybook

Vue
1
star
26

commonjs-es6-modules-webpack-jest

demo repo to showcase commonjs vs es6 modules; jest; webpack; babel
JavaScript
1
star
27

textarea-moderated

JavaScript
1
star
28

otus-docker-demo

Vue
1
star
29

conf-talks

🎦 πŸ“ˆ Slides, videos and textual content for my meetup and conferences presentations
1
star
30

vue-masonry-plugin-demo

JavaScript
1
star
31

vue-material-url-shortener-example

vue-material demo
JavaScript
1
star
32

cards-game-app

Svelte --> Azure
JavaScript
1
star
33

first-image-search-load

Simple module that loads the first image from Google image search on query
JavaScript
1
star
34

vuejs-3-workshop

1
star
35

otus-vue3-demo-composition-api

CSS
1
star