A audio player based on Howler.js

Overview

vue-dynamic-island-player

Description

a vue-audio-player based on Howler.js,The animation of the player is interacted with reference to IOS dynamic island.

Additional information, live demos and a user showcase are available at https://zhichao8756.github.io/player-demo/.

welcome to create issue, help improve the player :)

Features

  • A set of Vue components out of the box.
  • Single API for all audio needs
  • Defaults to Web Audio API and falls back to HTML5 Audio
  • Supports all codecs for full cross-browser support
  • Full control for fading, rate, seek, volume, etc.
  • Customize the theme freely
  • No outside dependencies, just pure JavaScript

Browser Compatibility

Tested in the following browsers/versions:

  • Google Chrome 7.0+
  • Firefox 4.0+
  • Safari 5.1.4+
  • Mobile Safari 6.0+ (after user input)
  • Opera 12.0+
  • Microsoft Edge

Live Demo

Install

$ npm i vue-dynamic-island-player

Quick Start

">
<script setup>
import { DynamicIslandPlayer } from 'vue-dynamic-island-player'
import "../node_modules/vue-dynamic-island-player/style.css"; //引入组件样式
import { ref } from 'vue'

const playList = ref([
{
    // song of title
    title: 'Rave Digger',
    // sound file
    file: 'http://music.163.com/song/media/outer/url?id=447925558.mp3',
    // howler instance
    howl: null,
    // song of author
    author: 'Cherrystones',
    // song of cover
    cover: cover1
}
])
const player = ref()
player.value.toggle()
player.value.playPrevious()
    ...
</script>

<template>
    <div>
        <DynamicIslandPlayer ref="player"/>
    </div>
</template>

API Docs

Props Attributes

Attribute Description type Accepted Values default
playList songs of list Array - -
volume sound volume Number 0.0 ~ 1.0 0.5
html5 set to true to force HTML5 Audio Boolean true/ false true
theme custom the theme String accept Hexadecimal color or picture -

Methods

Methods Description Parameters
getSoundState() return the current sound state (playing / pause) -
setVolume() set sound volume, range 0.0 to 1.0 function(0.8)
setMute() Mutes the sound, but doesn't pause the playback function(Boolean) True to mute and false to unmute.
setRate() set rate of playback, range 0.5 to 4.0, with 1.0 being normal speed function(2.0)
seekBySeconds() Get/set the position of playback for a sound function(Number) skip to a second of sound.
toggle() toggle the sound play or /pause -
playNext() skip to next song -
playPrevious() back to previous song -

Events

Event Name Description Parameters
play triggers when click play -
pause triggers when click pause -
next triggers when click next -
previous triggers when click previous -

License

vue-dynamic-island-player is open source software licensed as MIT.

You might also like...
A simple audio recorder for VueJS applications
A simple audio recorder for VueJS applications

vue-audio-recorder Audio recorder for Vue.js. It allows to create, play, download and store records on a server. Live demo Features Beautiful clean UI

Productivity application for audio professionals 🌱
Productivity application for audio professionals 🌱

Productivity application for audio professionals 🌱

Can remove the audio file that the sample rate is less than 44.1 HZ
Can remove the audio file that the sample rate is less than 44.1 HZ

Can remove the audio file that the sample rate is less than 44.1 HZ

Search, listen to YouTube videos (Audio Only), No YouTube Api
Search, listen to YouTube videos (Audio Only), No YouTube Api

Trooveo is a project which can let you search, listen to youtube videos. No YouTube Api. Player Channel Playlist History Search This is the front-end

Play audio files on Google Drive With Vue

google-drive-player 動作させるには google cloud platform (GCP) の API key と OAUTH2 client id が必要です。 以下のファイルに GCP API key と GCP OAUTH2 client id を記述してください。 env

An Audio Mixer plugin for Vue.js

Audio Mixer Demo Install Support us Demo To view a demo online: https://audiomixer.io To view demo examples locally clone the repo and run npm install

Chromatone audio-visual web-experience for Touch Me

The interactive playground Chromatone audio-visual web-experience for Touch Me - the tactile MIDI instrument by Playtronica. How to play Open any WebM

A Vue wrapper around the bbc/peaks.js audio waveform UI component
A Vue wrapper around the bbc/peaks.js audio waveform UI component

vue-peaks A lightweight Vue wrapper around the bbc/peaks.js audio waveform UI component. This project aims to simplify the use of peaks.js in a Vue3 e

📹 A Vue 2.x video player component based on DPlayer

Vue-DPlayer A Vue 2.x video player component based on DPlayer. Live Demo Install npm install vue-dplayer -S Usage CDN: https://unpkg.com/[email protected]

Vue.js sound audio player base on Vuetify UI framework. Covers audio-tag API and adds more.

vuetify-audio Vue.js sound audio player base on Vuetify UI framework. Covers audio-tag API and adds more. Features Support most of audio play in this

Wilson Wu 137 Oct 30, 2022
Web pages based on HTML 5 audio music player

Web pages based on HTML 5 < audio > music player demo // demo已停止 Requirements vue ^2.3.3 vue-resource ^1.3.4 v-click-outside ^0.0.8 Installation npm i

张啸 24 Nov 24, 2022
▶️ 🎹 🎵 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. Demo See DEMO here Installation Use npm: npm install vue-audio -

Mikhail Kuznetcov 172 Aug 25, 2022
A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.

vue-plyr v7.0.0 - Changelog A vue component for the plyr video & audio player. This is useful for when you want a nice video player in your Vue app. I

Gabe Dunn 693 Nov 14, 2022
: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.

vue-audio-better Easy to create custom audio player components for Vue.js. 一个有灵魂的进度条。 A progress bar with soul. 简单、有趣的 audio 组件,非常感谢您的 star! Simple, f

JasonYu 105 Nov 28, 2022
A beautiful Audio Player Component for Vue3

What is vue3-audio-player? This is a beautiful Audio Player Component for Vue3. Installation npm i vue3-audio-player Usage In your *.vue, you shall im

CoolSnow 17 Nov 17, 2022
A modern, visual video player for Vue3. It will bring your videos to life with a customizable and powerful player!

vue3-player-video A modern, visual video player for Vue3. It will bring your videos to life with a customizable and powerful player! If you have a pro

Enzo Esteves ⚡ 34 Sep 15, 2022
Azuracast PWA Player - can play locally with the player

Azuracast PWA Player - can play locally with the player

Oussama 30 Nov 1, 2022
Less Player is a music player developed on Electron + Vue3

Less Player is a music player developed on Electron + Vue3

RIVE2012 16 Nov 26, 2022
VueJS audio visualization components

vue-audio-visual Vue HTML5 audio visualization components Overview Install and setup API Common props AvLine props AvBars props AvCircle props AvWavef

Stas Kobzar 542 Nov 20, 2022