Easy to create custom audio player components for Vue.js

Easy to create custom audio player components for Vue.js

Easy to create custom audio player components for Vue. Bundler (Webpack, Rollup) // in your entrypoint import Vue from 'vue' import VueAudio from 'vue-audio-better' Vue. Required Markup

vue-audio-better

Easy to create custom audio player components for Vue.js.

Overview

demo

Installation

source-shell
npm install  vue-audio-better --save

Update

Add animation...

Setup

Bundler (Webpack, Rollup)

source-js
// in your entrypoint
import Vue from 'vue'
import VueAudio from 'vue-audio-better'

Vue.use(VueAudio)

Usage

Required Markup

source-js
  <vue-video
    :src="https://example.com/some_audio.mp3"
  ></vue-video>

Props

width

Type: Number - Default: 500

Audio width

source

Type: String - Required

An string of audio file url

html5

Type: Boolean - Default: false

Whether to force HTML5 Audio

loop

Type: Boolean - Default: false

Whether to start the playback again automatically after it is done playing

preload

Type: Boolean - Default: true

Whether to start downloading the audio file when the component is mounted

autoplay

Type: Boolean - Default: false

Whether to start the playback when the component is mounted

formats

Type: String[] - Default: []

Howler.js automatically detects your file format from the extension, but you may also specify a format in situations where extraction won't work (such as with a SoundCloud stream)

xhrWithCredentials

Type: Boolean - Default: false

Whether to enable the withCredentials flag on XHR requests used to fetch audio files when using Web Audio API (see reference)

Development

Build

Bundle the js to the dist folder:

source-shell
npm run build

Acknowledgements

howler.js vue-howler

License

MIT

Github

forijk/vue-audio-better

vuejs javascript vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate