vue-dynamic-island-player

Description

前段时间看到IOS系统灵动岛的发布,感觉IOS的动画效果令人十分舒适,细致且舒适,而且有很多的细节值得学习,本文的灵感就是来源于IOS灵动岛的创意。

• 主框架是采用vue3.x和VITE进行构建
• 动画效果主要采用anime.js，在github上有43.6k的star,内置了丰富的API,可以完成非常细致的CSS、SVG等动画
• 音频播放基于howler.js，这也是一个非常强大的音频播放库，在github上有20.9K的star，是我用过体验非常好（从未出bug）的音频播放控制组件，优先使用 Web Audio API 实现
• 动态音频波纹颜色基于color-thief，IOS灵动岛播放器有一个非常精致的小细节，音频播放的波纹颜色可以根据音乐封面的主色调动态生成

仓库地址: dynamic-island-player

演示demo: zhichao8756.github.io/player-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

参数	说明	类型	可选值	默认值
playList	播放列表	Array	-	-
volume	音频音量	Number	0.0 ~ 1.0	0.5
html5	设置是否开启HTML5音频	Boolean	true/ false	true
theme	定制播放器主题颜色	String	accept Hexadecimal color or picture	-

Methods

方法名	说明	参数
getSoundState()	返回当前音频播放状态 (playing / pause)	-
setVolume()	设置音频音量, 范围 0.0 - 1.0	function(0.8)
setMute()	当前音频静音，但是并不会暂停音频的播放	function(Boolean) True 为静音， false 为取消静音
setRate()	设置音频的播放速率, 范围 0.5 - 4.0, 1.0 为正常速度播放	function(2.0)
seekBySeconds()	设置声音的播放位置	function(Number) 跳转至音频的第多少秒
toggle()	切换音频的播放和暂停	-
playNext()	下一首	-
playPrevious()	上一首	-

Events

事件名	说明	参数
play	点击播放时触发	-
pause	点击暂停时触发	-
next	点击下一首时触发	-
previous	点击上一首时触发	-