vue-audio-better
vue-audio-better
Easy to create custom audio player components for Vue.js.
一个有灵魂的进度条。
A progress bar with soul.
简单、有趣的 audio 组件，非常感谢您的 star!
Simple, fun audio components, Thank you for your star!
Overview
Normal
Mini
Installation
npm install vue-audio-better --save
Update
Add a mini audio component.
Setup
Bundler (Webpack, Rollup)
// in your entrypoint
import Vue from 'vue'
import VueAudio from 'vue-audio-better'
Vue.use(VueAudio)
Usage
Required Markup
<vue-audio
audio-source="https://example.com/example.mp3"
></vue-audio>
<mini-audio
audio-source="https://example.com/example.mp3"
></mini-audio>
Props
width
Type: Number - Default: 500
Audio width
audio-source
Type: String - Required
A 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)
Data
playing
Type: Boolean
Whether audio is currently playing
muted
Type: Boolean
Whether the audio playback is muted
volume
Type: Number
The volume of the playback on a scale of 0 to 1
rate
Type: Number
The rate (speed) of the playback on a scale of 0.5 to 4
seek
Type: Number
The position of the playback in seconds
duration
Type: Number
The duration of the audio in seconds
progress
Type: Number
The progress of the playback on a scale of 0 to 1
Methods
play()
Start the playback
pause()
Pause the playback
togglePlayback()
Toggle playing or pausing the playback
stop()
Stop the playback (also resets the seek to 0)
mute()
Mute the playback
unmute()
Unmute the playback
toggleMute()
Toggle muting and unmuting the playback
setVolume(volume)
Set the volume of the playback (value is clamped between 0 and 1)
setRate(rate)
Set the rate (speed) of the playback (value is clamped between 0.5 and 4)
setSeek(seek)
Set the position of the playback (value is clamped between 0 and duration)
setProgress(progress)
Set the progress of the playback (value is clamped between 0 and 1)
Development
Build
Bundle the js to the dist folder:
npm run build