forijk / vue-audio-better Goto Github PK

:stuck_out_tongue_winking_eye: :stuck_out_tongue_winking_eye: :stuck_out_tongue_winking_eye: Easy to create custom audio player components for Vue. 一个有灵魂的进度条。 A progress bar with soul.

License: MIT License

Vue 84.46% CSS 15.54%

vue-audio-better's Introduction

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

Acknowledgements

howler.js vue-howler

License

MIT

vue-audio-better's People

Contributors

Stargazers

Watchers

vue-audio-better's Issues

Error in console when audio-source is undefined or unavailable url

Need Event Listener

需要事件侦听~同页面多个播放器，无法只播放一个。需要事件，关闭其他正在播放的对象。

IOS device

it's nice but it does not play on IOS devices.

Failed to mount component: template or render function not defined.这是什么原因呢

在 main.js添加了依赖

求解？还缺少什么吗

Using setSeek() method outside the component.

I wanna use the method setSeek() in the component where I'm using VueAudio, how I have to call the method? I tried with VueAudio.setSeek(timeInSeconds) but i get that setSeek is not a function

multiple queued songs possible?

can I load a playlist, or multiple songs to be played consecutively, using this library?

With html5 audio, transport slider always resets to start of file

Thanks for sharing this nice component.

My issue is that when I set the html5 option, moving the slider to seek in the file always results in the playback being reset to the start. Without the html5 option it works fine. Don't know if this is related to the underlying howler layer, or to the duration calculation since the file is not fully loaded. However it does the same thing even if left with enough time to fully load the audio asset.

组件是不是不是mp3格式不能播放

请教如何更改mini得背景色呢？

大佬打扰下，
我用的是Vue2，请教如何更改mini组件的背景颜色？

[Docs]: Maybe it would be better to show the functionality of partial registration

import {VueAudio} from 'vue-audio-better'
export default {
    components: {VueAudio}
}

forijk / vue-audio-better Goto Github PK

vue-audio-better's Introduction

vue-audio-better

Overview

Normal

Mini

Installation

Update

Setup

Bundler (Webpack, Rollup)

Usage

Required Markup

Props

width

audio-source

html5

loop

preload

autoplay

formats

xhrWithCredentials

Data

playing

muted

volume

rate

seek

duration

progress

Methods

play()

pause()

togglePlayback()

stop()

mute()

unmute()

toggleMute()

setVolume(volume)

setRate(rate)

setSeek(seek)

setProgress(progress)

Development

Build

Acknowledgements

License

vue-audio-better's People

Contributors

Stargazers

Watchers

Forkers

vue-audio-better's Issues

Recommend Projects

Recommend Topics

Recommend Org

`width`

`audio-source`

`html5`

`loop`

`preload`

`autoplay`

`formats`

`xhrWithCredentials`

`playing`

`muted`

`volume`

`rate`

`seek`

`duration`

`progress`

`play()`

`pause()`

`togglePlayback()`

`stop()`

`mute()`

`unmute()`

`toggleMute()`

`setVolume(volume)`

`setRate(rate)`

`setSeek(seek)`

`setProgress(progress)`