├── .gitignore
├── .vscode
└── extensions.json
├── LICENSE
├── README.md
├── docs
├── README.md
├── README_EN.md
└── image
│ ├── example.png
│ ├── logo.png
│ └── screenshots.png
├── index.html
├── package.json
├── pnpm-lock.yaml
├── src
├── App.vue
├── assets
│ ├── favicon.ico
│ ├── vite.svg
│ └── vue.svg
├── components
│ └── vue-aplayer
│ │ ├── APlayer.vue
│ │ ├── assets
│ │ ├── loading.svg
│ │ ├── loop-all.svg
│ │ ├── loop-none.svg
│ │ ├── loop-one.svg
│ │ ├── lrc.svg
│ │ ├── menu.svg
│ │ ├── order-list.svg
│ │ ├── order-random.svg
│ │ ├── pause.svg
│ │ ├── play.svg
│ │ ├── right.svg
│ │ ├── skip.svg
│ │ ├── volume-down.svg
│ │ ├── volume-off.svg
│ │ └── volume-up.svg
│ │ ├── components
│ │ ├── Controller.vue
│ │ ├── Icon.vue
│ │ ├── List.vue
│ │ └── Lyric.vue
│ │ ├── index.js
│ │ ├── style
│ │ └── index.scss
│ │ └── utils
│ │ └── utils.js
├── main.js
└── style.css
├── vite.config.js
└── vite.demo.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
26 | # Serverless files
27 | .env
28 | serverless.yml
29 |
30 | # Demo files
31 | demo
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["Vue.volar"]
3 | }
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Worst One
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Vue-APlayer
6 |
7 | > Vue 3.x for [APlayer](https://aplayer.js.org/).
8 |
9 | 项目地址:[**Vue-APlayer**](https://github.com/first19326/APlayer)
10 |
11 | 演示地址:[**Demo**](https://aplayer.worstone.cn)
12 |
13 | ## 介绍
14 |
15 | 
16 |
17 | 使用 Vue 3.x 参考 APlayer 以及 Vue-APlayer 重构的 APlayer。
18 |
19 | 项目中可能存在一些没有发现的问题,如有发现欢迎反馈。
20 |
21 | 在您的项目中使用 Vue-APlayer?[让我知道!](https://github.com/first19326/APlayer/issues/1)
22 |
23 | ## 使用方法
24 |
25 | ```vue
26 |
27 |
28 |
29 |
39 | ```
40 |
41 | 由于组件初始化时,歌曲信息为空,所以会加载默认的样式,在歌曲信息获取后自动进行更新。
42 |
43 | 如果想要更好的体验,则参考下面的方式使用。
44 |
45 | ```vue
46 |
47 |
48 |
49 |
63 | ```
64 |
65 | ### VitePress
66 |
67 | 通过使用 Vue 的服务器端渲染 (SSR) 功能,VitePress 能够在生产构建期间在 Node.js 中预渲染应用程序。这意味着主题组件中的所有自定义代码都 **需要考虑 SSR 兼容性** 。详情参见 [VitePress 文档 - SSR 兼容性](https://vitepress.dev/zh/guide/ssr-compat#clientonly)。
68 |
69 | 因为 SSR 兼容性的原因,在 VitePress 中可以通过 `defineClientComponent` 方式使用。
70 |
71 | ```vue
72 |
73 |
74 |
75 |
90 | ```
91 |
92 | [Docs](./docs/README_EN.md)
93 |
94 | [中文文档](./docs/README.md)
95 |
96 | ## 参考
97 |
98 | - [APlayer](https://github.com/DIYgod/APlayer) : 🍭 Wow, such a beautiful HTML5 music player.
99 | - [Vue-APlayer](https://github.com/SevenOutman/vue-aplayer) : Vue 2.x implementation of APlayer prototype.
100 |
101 | ## 作者
102 |
103 | **Vue-APlayer** © [WorstOne](https://github.com/first19326),在 [MIT](./LICENSE) 许可下发布。
104 |
105 | > 主页 - [WorstOne](https://worstone.cn/) · 博客 - [Live For Code](https://notes.worstone.cn/) · 仓库 - [Github](https://github.com/first19326)
106 |
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ## 安装
4 |
5 | 使用 npm:
6 |
7 | ```bash
8 | npm i @worstone/vue-aplayer
9 | ```
10 |
11 | 使用 pnpm:
12 |
13 | ```bash
14 | pnpm add @worstone/vue-aplayer
15 | ```
16 |
17 | ## 使用
18 |
19 | ```vue
20 |
21 |
22 |
23 |
33 | ```
34 |
35 | 由于组件初始化时歌曲信息为空,所以会加载默认的样式。在存储歌曲信息变量更新后,播放器会自动进行更新。
36 |
37 | 如果想要更好的体验,则参考下面的方式使用。
38 |
39 | ```vue
40 |
41 |
42 |
43 |
58 | ```
59 |
60 | ## 参数
61 |
62 | | 名称 | 类型 | 默认值 | 说明 |
63 | | ------------- | --------- | ----------------- | ------------------------------------------------------------ |
64 | | audio | 对象/数组 | - | 音频信息,应该是一个对象或对象数组 |
65 | | audio.name | 字符串 | - | 音频名称 |
66 | | audio.artist | 字符串 | - | 音频艺术家 |
67 | | audio.url | 字符串 | - | 音频链接 |
68 | | audio.cover | 字符串 | - | 音频封面 |
69 | | audio.lrc | 字符串 | - | 音频歌词 |
70 | | audio.theme | 字符串 | - | 切换到此音频时的主题色,比 theme 优先级高 |
71 | | mode | 字符串 | 'normal' | 播放器模式,可选值:'normal','fixed','mini' |
72 | | autoplay | 布尔 | false | 音频自动播放 |
73 | | mutex | 布尔 | true | 互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器,仅处于相同页面时生效。 |
74 | | preload | 字符串 | 'auto' | 预加载,可选值:'none','metadata','auto' |
75 | | theme | 布尔 | '#B7DAFF' | 主题色 |
76 | | autoSwitch | 布尔 | true | 根据音频封面自适应主题色,默认开启,需额外加载 [color-thief.js](https://github.com/lokesh/color-thief/blob/master/src/color-thief.js) |
77 | | loop | 字符串 | 'all' | 音频循环播放,可选值:'all','one','none' |
78 | | order | 字符串 | 'list' | 音频循环顺序,可选值:'list','random' |
79 | | muted | 布尔 | false | 播放器是否静音 |
80 | | volume | 数值 | 0.7 | 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效 |
81 | | lrcType | 数值 | 1 | 歌词类型,可选值:1,2 |
82 | | lrcShow | 布尔 | true | 歌词默认显示 |
83 | | listFolded | 布尔 | false | 列表默认折叠 |
84 | | listMaxHeight | 数值 | 250 | 列表最大高度 |
85 | | noticeSwitch | 布尔 | true | 通知默认开启,关闭后仅在控制台打印通知内容 |
86 | | storageName | 字符串 | 'aplayer-setting' | 存储播放器设置的 localStorage key |
87 |
88 | 例如:
89 |
90 | ```vue
91 |
92 |
93 |
94 |
114 | ```
115 |
116 | 
117 |
118 | ## API
119 |
120 | - `init()`:初始化播放器
121 | - `play()`:播放音频
122 | - `pause()`:暂停音频
123 | - `toggle()`:播放/暂停音频
124 | - `seek(time: number)`:跳转到特定事件,时间的单位为秒
125 | - `mute`:切换播放器静音状态
126 | - `setVolume(volume: number, storage: boolean)`:设置音频音量
127 | - `setTheme(color: string, index: number)`:设置播放器主题色,index 默认为当前音频的 index
128 | - `setMode(mode: string)`:设置播放器模式,mode 取值为 'normal','fixed' 或 'mini'
129 | - `setLoop(loop: string)`:设置播放器音频循环播放,loop 取值为 'all','one' 或 'none'
130 | - `setOrder(order: string)`:设置播放器音频循环顺序,order 取值为 'list' 或 'random'
131 | - `setNotice(text: string, time: number, opacity: number)`:设置通知,时间的单位为毫秒,默认时间 2000 毫秒,默认透明度 0.8,设置时间为 0 可以取消通知自动隐藏
132 | - `skipBack()`:切换到上一首音频
133 | - `skipForward()`:切换到下一首音频
134 | - `destroy()`:销毁播放器
135 | - `showLrc()`:显示歌词
136 | - `hideLrc()`:隐藏歌词
137 | - `toggleLrc()`:显示/隐藏歌词
138 | - `showList()`:显示播放列表
139 | - `hideList()`:隐藏播放列表
140 | - `toggleList()`:显示/隐藏播放列表
141 | - `addList(audios: object | array, clear: boolean)`:添加一个或多个新音频到播放列表
142 | - `removeList(index: number)`:移除播放列表中的一个音频
143 | - `switchList(index: number)`:切换到播放列表里的其他音频
144 | - `clearList()`:清空播放列表
145 | - `audioRef`:原生 audio
146 | - `audioRef.currentTime`:返回音频当前播放时间
147 | - `audioRef.duration`:返回音频总时间
148 | - `audioRef.paused`:返回音频是否暂停
149 | - 支持大多数 [原生 audio 接口](http://www.w3schools.cn/tags/ref_av_dom.asp)
150 |
151 | ## 绑定事件
152 |
153 | ### 音频事件
154 |
155 | - abort
156 | - canplay
157 | - canplaythrough
158 | - durationchange
159 | - emptied
160 | - ended
161 | - error
162 | - loadeddata
163 | - loadedmetadata
164 | - loadstart
165 | - mozaudioavailable
166 | - pause
167 | - play
168 | - playing
169 | - progress
170 | - ratechange
171 | - seeked
172 | - seeking
173 | - stalled
174 | - suspend
175 | - timeupdate
176 | - volumechange
177 | - waiting
178 |
179 | ### 播放器事件
180 |
181 | - listshow
182 | - listhide
183 | - listadd
184 | - listremove
185 | - listswitch
186 | - listclear
187 | - noticeshow
188 | - noticehide
189 | - init
190 | - destroy
191 | - lrcshow
192 | - lrchide
193 |
194 | ## 歌词
195 |
196 | ### LRC 文件方式
197 |
198 | 第一种方式,把歌词放到 LRC 文件里,音频播放时会加载对应的 LRC 文件。
199 |
200 | ```vue
201 |
202 |
203 |
204 |
217 | ```
218 |
219 | ### JS 字符串方式
220 |
221 | 第二种方式,把歌词放到 JS 字符串里面。
222 |
223 | ```vue
224 |
225 |
226 |
227 |
240 | ```
241 |
242 | ### 歌词格式
243 |
244 | 支持下面格式的歌词:
245 |
246 | `[mm:ss]APlayer`
247 | `[mm:ss.xx]is`
248 | `[mm:ss.xxx]amazing`
249 | `[mm:ss.xx][mm:ss.xx]APlayer`
250 | `[mm:ss.xx]is`
251 | `[mm:ss.xx]amazing[mm:ss.xx]APlayer`
252 |
253 |
254 | ## MSE 支持
255 |
256 | ### HLS
257 |
258 | 需要额外加载 [hls.js](https://github.com/video-dev/hls.js),
259 |
260 | ```html
261 |
262 | ```
263 |
264 | 或在项目中直接依赖。
265 |
266 | ```vue
267 |
268 |
271 | ```
272 |
273 | ## 自适应主题颜色
274 |
275 | 需要额外加载 [color-thief.js](https://github.com/lokesh/color-thief/blob/master/src/color-thief.js),
276 |
277 | ```html
278 |
279 | ```
280 |
281 | 或在项目中直接依赖。
282 |
283 | ```vue
284 |
285 |
288 | ```
289 |
290 | ## 常见问题
291 |
292 | ### 为什么播放器其他参数不会随着变量进行更新?
293 |
294 | 初始化参数仅在初始化时生效,其他时间只能通过 API 对播放器进行设置。
295 |
296 | ### 为什么播放器不能在手机上自动播放?
297 |
298 | 大多数移动端浏览器禁止了音频自动播放。此外,桌面端的浏览器可能也需要一些设置来实现音频自动播放功能。
299 |
300 | ## 本地开发
301 |
302 | ### 克隆代码
303 |
304 | ```
305 | git clone git@github.com:first19326/APlayer.git
306 | ```
307 |
308 | ### 安装依赖
309 |
310 | ```bash
311 | cd APlayer
312 | pnpm install
313 | ```
314 |
315 | ### 开发模式
316 |
317 | ```bash
318 | pnpm dev
319 | ```
320 |
321 | ### 编译打包
322 |
323 | ```bash
324 | pnpm build
325 | ```
326 |
327 | 完成之后,可以在项目的 `dist` 目录看到编译打包好的文件。
328 |
--------------------------------------------------------------------------------
/docs/README_EN.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ## Installation
4 |
5 | Using npm:
6 |
7 | ```bash
8 | npm i @worstone/vue-aplayer
9 | ```
10 |
11 | Using pnpm:
12 |
13 | ```bash
14 | pnpm add @worstone/vue-aplayer
15 | ```
16 |
17 | ## Usage
18 |
19 | ```vue
20 |
21 |
22 |
23 |
33 | ```
34 |
35 | Audios data is empty during component initialization, so the default style will be loaded. After the audios data variable are updated, the player style will be automatically updated.
36 |
37 | If you want a better experience, refer to the following methods to use it.
38 |
39 | ```vue
40 |
41 |
42 |
43 |
58 | ```
59 |
60 | ## Options
61 |
62 | | Name | Type | Default | Description |
63 | | ------------- | ------------ | ----------------- | ------------------------------------------------------------ |
64 | | audio | Object/Array | - | audio info, should be an object or object array |
65 | | audio.name | String | - | audio name |
66 | | audio.artist | String | - | audio artist |
67 | | audio.url | String | - | audio url |
68 | | audio.cover | String | - | audio cover |
69 | | audio.lrc | String | - | audio lrc |
70 | | audio.theme | String | - | main color when switching to this audio, it has priority over the theme |
71 | | mode | String | 'normal' | player mode, values: 'normal', 'fixed', 'mini' |
72 | | autoplay | Boolean | false | audio autoplay |
73 | | mutex | Boolean | true | prevent to play multiple player at the same time, pause other players when this player start play |
74 | | preload | String | 'auto' | values: 'none', 'metadata', 'auto' |
75 | | theme | Boolean | '#B7DAFF' | main color |
76 | | autoSwitch | Boolean | true | self-adapting theme according to cover, it requires the library [color-thief](https://github.com/lokesh/color-thief/blob/master/src/color-thief.js) |
77 | | loop | String | 'all' | player loop play, values: 'all', 'one', 'none' |
78 | | order | String | 'list' | player play order, values: 'list', 'random' |
79 | | muted | Boolean | false | indicate whether player should mute at first |
80 | | volume | Number | 0.7 | default volume, notice that player will remember user setting, default volume will not work after user set volume themselves |
81 | | lrcType | Number | 1 | lrc type, values: 1, 2 |
82 | | lrcShow | Boolean | true | indicate whether lrc should show at first |
83 | | listFolded | Boolean | false | indicate whether list should folded at first |
84 | | listMaxHeight | Number | 250 | list max height |
85 | | noticeSwitch | Boolean | true | notice is enabled by default, only the notice content is printed on the console when disabled |
86 | | storageName | String | 'aplayer-setting' | localStorage key that store player setting |
87 |
88 | For example:
89 |
90 | ```vue
91 |
92 |
93 |
94 |
114 | ```
115 |
116 | 
117 |
118 | ## API
119 |
120 | - `init()`: init player
121 | - `play()`: play audio
122 | - `pause()`: pause audio
123 | - `toggle()`: play / pause audio
124 | - `seek(time: number)`: seek to specified time, the unit of time is second
125 | - `mute`: switch player mute status
126 | - `setVolume(volume: number, storage: boolean)`: set audio volume
127 | - `setTheme(color: string, index: number)`: set player theme, the default of index is current audio index
128 | - `setMode(mode: string)`: set player mode, the value of mode should be 'normal', 'fixed' or 'mini'
129 | - `setLoop(loop: string)`: set player loop play, the value of mode should be 'all', 'one' or 'none'
130 | - `setOrder(order: string)`: set player order play, the value of mode should be 'list' or 'random'
131 | - `setNotice(text: string, time: number, opacity: number)`: show message, the unit of time is millisecond, the default of time is 2000, the default of opacity is 0.8, setting time to 0 can disable notice autohide
132 | - `skipBack()`: skip to previous audio
133 | - `skipForward()`: skip to next audio
134 | - `destroy()`: destroy player
135 | - `showLrc()`: show lrc
136 | - `hideLrc()`: hide lrc
137 | - `toggleLrc()`: show / hide lrc
138 | - `showList()`: show list
139 | - `hideList()`: hide list
140 | - `toggleList()`: show / hide list
141 | - `addList(audios: object | array, clear: boolean)`: add new audios to the list
142 | - `removeList(index: number)`: remove an audio from the list
143 | - `switchList(index: number)`: switch to an audio in the list
144 | - `clearList()`: remove all audios from the list
145 | - `audioRef`: native audio
146 | - `audioRef.currentTime`: returns the current playback position
147 | - `audioRef.duration`: returns audio total time
148 | - `audioRef.paused`: returns whether the audio paused
149 | - most [native api](http://www.w3schools.com/tags/ref_av_dom.asp) are supported
150 |
151 | ## Event binding
152 |
153 | ### Audio events
154 |
155 | - abort
156 | - canplay
157 | - canplaythrough
158 | - durationchange
159 | - emptied
160 | - ended
161 | - error
162 | - loadeddata
163 | - loadedmetadata
164 | - loadstart
165 | - mozaudioavailable
166 | - pause
167 | - play
168 | - playing
169 | - progress
170 | - ratechange
171 | - seeked
172 | - seeking
173 | - stalled
174 | - suspend
175 | - timeupdate
176 | - volumechange
177 | - waiting
178 |
179 | ### Player events
180 |
181 | - listshow
182 | - listhide
183 | - listadd
184 | - listremove
185 | - listswitch
186 | - listclear
187 | - noticeshow
188 | - noticehide
189 | - init
190 | - destroy
191 | - lrcshow
192 | - lrchide
193 |
194 | ## LRC
195 |
196 | ### LRC file
197 |
198 | The first way, put LRC to a LRC file, LRC file will be loaded when this audio start to play.
199 |
200 | ```vue
201 |
202 |
203 |
204 |
217 | ```
218 |
219 | ### LRC string in JS
220 |
221 | The second way, put LRC to a JS string.
222 |
223 | ```vue
224 |
225 |
226 |
227 |
240 | ```
241 |
242 | ### LRC format
243 |
244 | The following LRC format are supported:
245 |
246 | `[mm:ss]APlayer`
247 | `[mm:ss.xx]is`
248 | `[mm:ss.xxx]amazing`
249 | `[mm:ss.xx][mm:ss.xx]APlayer`
250 | `[mm:ss.xx]is`
251 | `[mm:ss.xx]amazing[mm:ss.xx]APlayer`
252 |
253 | ## MSE support
254 |
255 | ### HLS
256 |
257 | It requires the library [hls.js](https://github.com/video-dev/hls.js).
258 |
259 | ```html
260 |
261 | ```
262 |
263 | or
264 |
265 | ```vue
266 |
267 |
270 | ```
271 |
272 |
273 | ## Self-adapting theme
274 |
275 | It requires the library [color-thief](https://github.com/lokesh/color-thief/blob/master/src/color-thief.js).
276 |
277 | ```html
278 |
279 | ```
280 |
281 | or
282 |
283 | ```vue
284 |
285 |
288 | ```
289 |
290 | ## FAQ
291 |
292 | ### Why do other parameters of the player not update with variables ?
293 |
294 | The initialization parameters only take effect during initialization, at other times, the player can only be set through the API.
295 |
296 | ### Why can't player autoplay in some mobile browsers ?
297 |
298 | Most mobile browsers forbid audio autoplay, you wont be able to achieve it without hacks. In addition, desktop browsers may also require some settings to achieve player autoplay.
299 |
300 | ## Development
301 |
302 | ### Clone Code
303 |
304 | ```
305 | git clone git@github.com:first19326/APlayer.git
306 | ```
307 |
308 | ### Install Dependencies
309 |
310 | ```bash
311 | cd APlayer
312 | pnpm install
313 | ```
314 |
315 | ### Dev Mode
316 |
317 | ```bash
318 | pnpm dev
319 | ```
320 |
321 | ### Build Release
322 |
323 | ```bash
324 | pnpm build
325 | ```
326 |
327 | After building, the files will be found in the project's `dist` directory.
328 |
--------------------------------------------------------------------------------
/docs/image/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/first19326/APlayer/0952f946a862303767394eae4e9f25ecf082ff47/docs/image/example.png
--------------------------------------------------------------------------------
/docs/image/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/first19326/APlayer/0952f946a862303767394eae4e9f25ecf082ff47/docs/image/logo.png
--------------------------------------------------------------------------------
/docs/image/screenshots.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/first19326/APlayer/0952f946a862303767394eae4e9f25ecf082ff47/docs/image/screenshots.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vue 3.x for APlayer
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@worstone/vue-aplayer",
3 | "version": "1.0.7",
4 | "author": "WorstOne",
5 | "description": "Vue 3.x for APlayer.",
6 | "keywords": [
7 | "Vue",
8 | "Vue 3.x",
9 | "APlayer",
10 | "Vue-APlayer",
11 | "Component",
12 | "Vue-Component"
13 | ],
14 | "type": "module",
15 | "main": "./dist/vue-aplayer.cjs",
16 | "module": "./dist/vue-aplayer.js",
17 | "files": [
18 | "dist"
19 | ],
20 | "sideEffects": [
21 | "**/*.css"
22 | ],
23 | "scripts": {
24 | "dev": "vite",
25 | "build": "vite build",
26 | "build:demo": "vite build --config vite.demo.config.js",
27 | "preview": "vite preview"
28 | },
29 | "dependencies": {
30 | "smoothscroll": "^0.4.0",
31 | "vue": "^3.4.35"
32 | },
33 | "devDependencies": {
34 | "@vitejs/plugin-vue": "^4.6.2",
35 | "@worstone/vue-aplayer": "^1.0.7",
36 | "sass": "^1.77.8",
37 | "terser": "^5.31.3",
38 | "vite": "^5.3.5",
39 | "vite-svg-loader": "^5.1.0"
40 | },
41 | "repository": {
42 | "type": "git",
43 | "url": "git+https://github.com/first19326/APlayer.git"
44 | },
45 | "homepage": "https://github.com/first19326/APlayer#readme",
46 | "bugs": {
47 | "url": "https://github.com/first19326/APlayer/issues"
48 | },
49 | "directories": {
50 | "doc": "docs"
51 | },
52 | "license": "MIT"
53 | }
--------------------------------------------------------------------------------
/pnpm-lock.yaml:
--------------------------------------------------------------------------------
1 | lockfileVersion: '6.0'
2 |
3 | settings:
4 | autoInstallPeers: true
5 | excludeLinksFromLockfile: false
6 |
7 | dependencies:
8 | smoothscroll:
9 | specifier: ^0.4.0
10 | version: 0.4.0
11 | vue:
12 | specifier: ^3.4.35
13 | version: 3.4.35
14 |
15 | devDependencies:
16 | '@vitejs/plugin-vue':
17 | specifier: ^4.6.2
18 | version: 4.6.2(vite@5.3.5)(vue@3.4.35)
19 | '@worstone/vue-aplayer':
20 | specifier: ^1.0.7
21 | version: 1.0.7
22 | sass:
23 | specifier: ^1.77.8
24 | version: 1.77.8
25 | terser:
26 | specifier: ^5.31.3
27 | version: 5.31.3
28 | vite:
29 | specifier: ^5.3.5
30 | version: 5.3.5(sass@1.77.8)(terser@5.31.3)
31 | vite-svg-loader:
32 | specifier: ^5.1.0
33 | version: 5.1.0(vue@3.4.35)
34 |
35 | packages:
36 |
37 | /@babel/helper-string-parser@7.24.8:
38 | resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==}
39 | engines: {node: '>=6.9.0'}
40 |
41 | /@babel/helper-validator-identifier@7.24.7:
42 | resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
43 | engines: {node: '>=6.9.0'}
44 |
45 | /@babel/parser@7.25.3:
46 | resolution: {integrity: sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==}
47 | engines: {node: '>=6.0.0'}
48 | hasBin: true
49 | dependencies:
50 | '@babel/types': 7.25.2
51 |
52 | /@babel/types@7.25.2:
53 | resolution: {integrity: sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==}
54 | engines: {node: '>=6.9.0'}
55 | dependencies:
56 | '@babel/helper-string-parser': 7.24.8
57 | '@babel/helper-validator-identifier': 7.24.7
58 | to-fast-properties: 2.0.0
59 |
60 | /@esbuild/aix-ppc64@0.21.5:
61 | resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
62 | engines: {node: '>=12'}
63 | cpu: [ppc64]
64 | os: [aix]
65 | requiresBuild: true
66 | dev: true
67 | optional: true
68 |
69 | /@esbuild/android-arm64@0.21.5:
70 | resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
71 | engines: {node: '>=12'}
72 | cpu: [arm64]
73 | os: [android]
74 | requiresBuild: true
75 | dev: true
76 | optional: true
77 |
78 | /@esbuild/android-arm@0.21.5:
79 | resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
80 | engines: {node: '>=12'}
81 | cpu: [arm]
82 | os: [android]
83 | requiresBuild: true
84 | dev: true
85 | optional: true
86 |
87 | /@esbuild/android-x64@0.21.5:
88 | resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
89 | engines: {node: '>=12'}
90 | cpu: [x64]
91 | os: [android]
92 | requiresBuild: true
93 | dev: true
94 | optional: true
95 |
96 | /@esbuild/darwin-arm64@0.21.5:
97 | resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
98 | engines: {node: '>=12'}
99 | cpu: [arm64]
100 | os: [darwin]
101 | requiresBuild: true
102 | dev: true
103 | optional: true
104 |
105 | /@esbuild/darwin-x64@0.21.5:
106 | resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
107 | engines: {node: '>=12'}
108 | cpu: [x64]
109 | os: [darwin]
110 | requiresBuild: true
111 | dev: true
112 | optional: true
113 |
114 | /@esbuild/freebsd-arm64@0.21.5:
115 | resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
116 | engines: {node: '>=12'}
117 | cpu: [arm64]
118 | os: [freebsd]
119 | requiresBuild: true
120 | dev: true
121 | optional: true
122 |
123 | /@esbuild/freebsd-x64@0.21.5:
124 | resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
125 | engines: {node: '>=12'}
126 | cpu: [x64]
127 | os: [freebsd]
128 | requiresBuild: true
129 | dev: true
130 | optional: true
131 |
132 | /@esbuild/linux-arm64@0.21.5:
133 | resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
134 | engines: {node: '>=12'}
135 | cpu: [arm64]
136 | os: [linux]
137 | requiresBuild: true
138 | dev: true
139 | optional: true
140 |
141 | /@esbuild/linux-arm@0.21.5:
142 | resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
143 | engines: {node: '>=12'}
144 | cpu: [arm]
145 | os: [linux]
146 | requiresBuild: true
147 | dev: true
148 | optional: true
149 |
150 | /@esbuild/linux-ia32@0.21.5:
151 | resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
152 | engines: {node: '>=12'}
153 | cpu: [ia32]
154 | os: [linux]
155 | requiresBuild: true
156 | dev: true
157 | optional: true
158 |
159 | /@esbuild/linux-loong64@0.21.5:
160 | resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
161 | engines: {node: '>=12'}
162 | cpu: [loong64]
163 | os: [linux]
164 | requiresBuild: true
165 | dev: true
166 | optional: true
167 |
168 | /@esbuild/linux-mips64el@0.21.5:
169 | resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
170 | engines: {node: '>=12'}
171 | cpu: [mips64el]
172 | os: [linux]
173 | requiresBuild: true
174 | dev: true
175 | optional: true
176 |
177 | /@esbuild/linux-ppc64@0.21.5:
178 | resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
179 | engines: {node: '>=12'}
180 | cpu: [ppc64]
181 | os: [linux]
182 | requiresBuild: true
183 | dev: true
184 | optional: true
185 |
186 | /@esbuild/linux-riscv64@0.21.5:
187 | resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
188 | engines: {node: '>=12'}
189 | cpu: [riscv64]
190 | os: [linux]
191 | requiresBuild: true
192 | dev: true
193 | optional: true
194 |
195 | /@esbuild/linux-s390x@0.21.5:
196 | resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
197 | engines: {node: '>=12'}
198 | cpu: [s390x]
199 | os: [linux]
200 | requiresBuild: true
201 | dev: true
202 | optional: true
203 |
204 | /@esbuild/linux-x64@0.21.5:
205 | resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
206 | engines: {node: '>=12'}
207 | cpu: [x64]
208 | os: [linux]
209 | requiresBuild: true
210 | dev: true
211 | optional: true
212 |
213 | /@esbuild/netbsd-x64@0.21.5:
214 | resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
215 | engines: {node: '>=12'}
216 | cpu: [x64]
217 | os: [netbsd]
218 | requiresBuild: true
219 | dev: true
220 | optional: true
221 |
222 | /@esbuild/openbsd-x64@0.21.5:
223 | resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
224 | engines: {node: '>=12'}
225 | cpu: [x64]
226 | os: [openbsd]
227 | requiresBuild: true
228 | dev: true
229 | optional: true
230 |
231 | /@esbuild/sunos-x64@0.21.5:
232 | resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
233 | engines: {node: '>=12'}
234 | cpu: [x64]
235 | os: [sunos]
236 | requiresBuild: true
237 | dev: true
238 | optional: true
239 |
240 | /@esbuild/win32-arm64@0.21.5:
241 | resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
242 | engines: {node: '>=12'}
243 | cpu: [arm64]
244 | os: [win32]
245 | requiresBuild: true
246 | dev: true
247 | optional: true
248 |
249 | /@esbuild/win32-ia32@0.21.5:
250 | resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
251 | engines: {node: '>=12'}
252 | cpu: [ia32]
253 | os: [win32]
254 | requiresBuild: true
255 | dev: true
256 | optional: true
257 |
258 | /@esbuild/win32-x64@0.21.5:
259 | resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
260 | engines: {node: '>=12'}
261 | cpu: [x64]
262 | os: [win32]
263 | requiresBuild: true
264 | dev: true
265 | optional: true
266 |
267 | /@jridgewell/gen-mapping@0.3.5:
268 | resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
269 | engines: {node: '>=6.0.0'}
270 | dependencies:
271 | '@jridgewell/set-array': 1.2.1
272 | '@jridgewell/sourcemap-codec': 1.5.0
273 | '@jridgewell/trace-mapping': 0.3.25
274 | dev: true
275 |
276 | /@jridgewell/resolve-uri@3.1.2:
277 | resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
278 | engines: {node: '>=6.0.0'}
279 | dev: true
280 |
281 | /@jridgewell/set-array@1.2.1:
282 | resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
283 | engines: {node: '>=6.0.0'}
284 | dev: true
285 |
286 | /@jridgewell/source-map@0.3.6:
287 | resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==}
288 | dependencies:
289 | '@jridgewell/gen-mapping': 0.3.5
290 | '@jridgewell/trace-mapping': 0.3.25
291 | dev: true
292 |
293 | /@jridgewell/sourcemap-codec@1.5.0:
294 | resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
295 |
296 | /@jridgewell/trace-mapping@0.3.25:
297 | resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
298 | dependencies:
299 | '@jridgewell/resolve-uri': 3.1.2
300 | '@jridgewell/sourcemap-codec': 1.5.0
301 | dev: true
302 |
303 | /@rollup/rollup-android-arm-eabi@4.19.2:
304 | resolution: {integrity: sha512-OHflWINKtoCFSpm/WmuQaWW4jeX+3Qt3XQDepkkiFTsoxFc5BpF3Z5aDxFZgBqRjO6ATP5+b1iilp4kGIZVWlA==}
305 | cpu: [arm]
306 | os: [android]
307 | requiresBuild: true
308 | dev: true
309 | optional: true
310 |
311 | /@rollup/rollup-android-arm64@4.19.2:
312 | resolution: {integrity: sha512-k0OC/b14rNzMLDOE6QMBCjDRm3fQOHAL8Ldc9bxEWvMo4Ty9RY6rWmGetNTWhPo+/+FNd1lsQYRd0/1OSix36A==}
313 | cpu: [arm64]
314 | os: [android]
315 | requiresBuild: true
316 | dev: true
317 | optional: true
318 |
319 | /@rollup/rollup-darwin-arm64@4.19.2:
320 | resolution: {integrity: sha512-IIARRgWCNWMTeQH+kr/gFTHJccKzwEaI0YSvtqkEBPj7AshElFq89TyreKNFAGh5frLfDCbodnq+Ye3dqGKPBw==}
321 | cpu: [arm64]
322 | os: [darwin]
323 | requiresBuild: true
324 | dev: true
325 | optional: true
326 |
327 | /@rollup/rollup-darwin-x64@4.19.2:
328 | resolution: {integrity: sha512-52udDMFDv54BTAdnw+KXNF45QCvcJOcYGl3vQkp4vARyrcdI/cXH8VXTEv/8QWfd6Fru8QQuw1b2uNersXOL0g==}
329 | cpu: [x64]
330 | os: [darwin]
331 | requiresBuild: true
332 | dev: true
333 | optional: true
334 |
335 | /@rollup/rollup-linux-arm-gnueabihf@4.19.2:
336 | resolution: {integrity: sha512-r+SI2t8srMPYZeoa1w0o/AfoVt9akI1ihgazGYPQGRilVAkuzMGiTtexNZkrPkQsyFrvqq/ni8f3zOnHw4hUbA==}
337 | cpu: [arm]
338 | os: [linux]
339 | libc: [glibc]
340 | requiresBuild: true
341 | dev: true
342 | optional: true
343 |
344 | /@rollup/rollup-linux-arm-musleabihf@4.19.2:
345 | resolution: {integrity: sha512-+tYiL4QVjtI3KliKBGtUU7yhw0GMcJJuB9mLTCEauHEsqfk49gtUBXGtGP3h1LW8MbaTY6rSFIQV1XOBps1gBA==}
346 | cpu: [arm]
347 | os: [linux]
348 | libc: [musl]
349 | requiresBuild: true
350 | dev: true
351 | optional: true
352 |
353 | /@rollup/rollup-linux-arm64-gnu@4.19.2:
354 | resolution: {integrity: sha512-OR5DcvZiYN75mXDNQQxlQPTv4D+uNCUsmSCSY2FolLf9W5I4DSoJyg7z9Ea3TjKfhPSGgMJiey1aWvlWuBzMtg==}
355 | cpu: [arm64]
356 | os: [linux]
357 | libc: [glibc]
358 | requiresBuild: true
359 | dev: true
360 | optional: true
361 |
362 | /@rollup/rollup-linux-arm64-musl@4.19.2:
363 | resolution: {integrity: sha512-Hw3jSfWdUSauEYFBSFIte6I8m6jOj+3vifLg8EU3lreWulAUpch4JBjDMtlKosrBzkr0kwKgL9iCfjA8L3geoA==}
364 | cpu: [arm64]
365 | os: [linux]
366 | libc: [musl]
367 | requiresBuild: true
368 | dev: true
369 | optional: true
370 |
371 | /@rollup/rollup-linux-powerpc64le-gnu@4.19.2:
372 | resolution: {integrity: sha512-rhjvoPBhBwVnJRq/+hi2Q3EMiVF538/o9dBuj9TVLclo9DuONqt5xfWSaE6MYiFKpo/lFPJ/iSI72rYWw5Hc7w==}
373 | cpu: [ppc64]
374 | os: [linux]
375 | libc: [glibc]
376 | requiresBuild: true
377 | dev: true
378 | optional: true
379 |
380 | /@rollup/rollup-linux-riscv64-gnu@4.19.2:
381 | resolution: {integrity: sha512-EAz6vjPwHHs2qOCnpQkw4xs14XJq84I81sDRGPEjKPFVPBw7fwvtwhVjcZR6SLydCv8zNK8YGFblKWd/vRmP8g==}
382 | cpu: [riscv64]
383 | os: [linux]
384 | libc: [glibc]
385 | requiresBuild: true
386 | dev: true
387 | optional: true
388 |
389 | /@rollup/rollup-linux-s390x-gnu@4.19.2:
390 | resolution: {integrity: sha512-IJSUX1xb8k/zN9j2I7B5Re6B0NNJDJ1+soezjNojhT8DEVeDNptq2jgycCOpRhyGj0+xBn7Cq+PK7Q+nd2hxLA==}
391 | cpu: [s390x]
392 | os: [linux]
393 | libc: [glibc]
394 | requiresBuild: true
395 | dev: true
396 | optional: true
397 |
398 | /@rollup/rollup-linux-x64-gnu@4.19.2:
399 | resolution: {integrity: sha512-OgaToJ8jSxTpgGkZSkwKE+JQGihdcaqnyHEFOSAU45utQ+yLruE1dkonB2SDI8t375wOKgNn8pQvaWY9kPzxDQ==}
400 | cpu: [x64]
401 | os: [linux]
402 | libc: [glibc]
403 | requiresBuild: true
404 | dev: true
405 | optional: true
406 |
407 | /@rollup/rollup-linux-x64-musl@4.19.2:
408 | resolution: {integrity: sha512-5V3mPpWkB066XZZBgSd1lwozBk7tmOkKtquyCJ6T4LN3mzKENXyBwWNQn8d0Ci81hvlBw5RoFgleVpL6aScLYg==}
409 | cpu: [x64]
410 | os: [linux]
411 | libc: [musl]
412 | requiresBuild: true
413 | dev: true
414 | optional: true
415 |
416 | /@rollup/rollup-win32-arm64-msvc@4.19.2:
417 | resolution: {integrity: sha512-ayVstadfLeeXI9zUPiKRVT8qF55hm7hKa+0N1V6Vj+OTNFfKSoUxyZvzVvgtBxqSb5URQ8sK6fhwxr9/MLmxdA==}
418 | cpu: [arm64]
419 | os: [win32]
420 | requiresBuild: true
421 | dev: true
422 | optional: true
423 |
424 | /@rollup/rollup-win32-ia32-msvc@4.19.2:
425 | resolution: {integrity: sha512-Mda7iG4fOLHNsPqjWSjANvNZYoW034yxgrndof0DwCy0D3FvTjeNo+HGE6oGWgvcLZNLlcp0hLEFcRs+UGsMLg==}
426 | cpu: [ia32]
427 | os: [win32]
428 | requiresBuild: true
429 | dev: true
430 | optional: true
431 |
432 | /@rollup/rollup-win32-x64-msvc@4.19.2:
433 | resolution: {integrity: sha512-DPi0ubYhSow/00YqmG1jWm3qt1F8aXziHc/UNy8bo9cpCacqhuWu+iSq/fp2SyEQK7iYTZ60fBU9cat3MXTjIQ==}
434 | cpu: [x64]
435 | os: [win32]
436 | requiresBuild: true
437 | dev: true
438 | optional: true
439 |
440 | /@trysound/sax@0.2.0:
441 | resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
442 | engines: {node: '>=10.13.0'}
443 | dev: true
444 |
445 | /@types/estree@1.0.5:
446 | resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
447 | dev: true
448 |
449 | /@vitejs/plugin-vue@4.6.2(vite@5.3.5)(vue@3.4.35):
450 | resolution: {integrity: sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==}
451 | engines: {node: ^14.18.0 || >=16.0.0}
452 | peerDependencies:
453 | vite: ^4.0.0 || ^5.0.0
454 | vue: ^3.2.25
455 | dependencies:
456 | vite: 5.3.5(sass@1.77.8)(terser@5.31.3)
457 | vue: 3.4.35
458 | dev: true
459 |
460 | /@vue/compiler-core@3.4.35:
461 | resolution: {integrity: sha512-gKp0zGoLnMYtw4uS/SJRRO7rsVggLjvot3mcctlMXunYNsX+aRJDqqw/lV5/gHK91nvaAAlWFgdVl020AW1Prg==}
462 | dependencies:
463 | '@babel/parser': 7.25.3
464 | '@vue/shared': 3.4.35
465 | entities: 4.5.0
466 | estree-walker: 2.0.2
467 | source-map-js: 1.2.0
468 |
469 | /@vue/compiler-dom@3.4.35:
470 | resolution: {integrity: sha512-pWIZRL76/oE/VMhdv/ovZfmuooEni6JPG1BFe7oLk5DZRo/ImydXijoZl/4kh2406boRQ7lxTYzbZEEXEhj9NQ==}
471 | dependencies:
472 | '@vue/compiler-core': 3.4.35
473 | '@vue/shared': 3.4.35
474 |
475 | /@vue/compiler-sfc@3.4.35:
476 | resolution: {integrity: sha512-xacnRS/h/FCsjsMfxBkzjoNxyxEyKyZfBch/P4vkLRvYJwe5ChXmZZrj8Dsed/752H2Q3JE8kYu9Uyha9J6PgA==}
477 | dependencies:
478 | '@babel/parser': 7.25.3
479 | '@vue/compiler-core': 3.4.35
480 | '@vue/compiler-dom': 3.4.35
481 | '@vue/compiler-ssr': 3.4.35
482 | '@vue/shared': 3.4.35
483 | estree-walker: 2.0.2
484 | magic-string: 0.30.11
485 | postcss: 8.4.40
486 | source-map-js: 1.2.0
487 |
488 | /@vue/compiler-ssr@3.4.35:
489 | resolution: {integrity: sha512-7iynB+0KB1AAJKk/biENTV5cRGHRdbdaD7Mx3nWcm1W8bVD6QmnH3B4AHhQQ1qZHhqFwzEzMwiytXm3PX1e60A==}
490 | dependencies:
491 | '@vue/compiler-dom': 3.4.35
492 | '@vue/shared': 3.4.35
493 |
494 | /@vue/reactivity@3.4.35:
495 | resolution: {integrity: sha512-Ggtz7ZZHakriKioveJtPlStYardwQH6VCs9V13/4qjHSQb/teE30LVJNrbBVs4+aoYGtTQKJbTe4CWGxVZrvEw==}
496 | dependencies:
497 | '@vue/shared': 3.4.35
498 |
499 | /@vue/runtime-core@3.4.35:
500 | resolution: {integrity: sha512-D+BAjFoWwT5wtITpSxwqfWZiBClhBbR+bm0VQlWYFOadUUXFo+5wbe9ErXhLvwguPiLZdEF13QAWi2vP3ZD5tA==}
501 | dependencies:
502 | '@vue/reactivity': 3.4.35
503 | '@vue/shared': 3.4.35
504 |
505 | /@vue/runtime-dom@3.4.35:
506 | resolution: {integrity: sha512-yGOlbos+MVhlS5NWBF2HDNgblG8e2MY3+GigHEyR/dREAluvI5tuUUgie3/9XeqhPE4LF0i2wjlduh5thnfOqw==}
507 | dependencies:
508 | '@vue/reactivity': 3.4.35
509 | '@vue/runtime-core': 3.4.35
510 | '@vue/shared': 3.4.35
511 | csstype: 3.1.3
512 |
513 | /@vue/server-renderer@3.4.35(vue@3.4.35):
514 | resolution: {integrity: sha512-iZ0e/u9mRE4T8tNhlo0tbA+gzVkgv8r5BX6s1kRbOZqfpq14qoIvCZ5gIgraOmYkMYrSEZgkkojFPr+Nyq/Mnw==}
515 | peerDependencies:
516 | vue: 3.4.35
517 | dependencies:
518 | '@vue/compiler-ssr': 3.4.35
519 | '@vue/shared': 3.4.35
520 | vue: 3.4.35
521 |
522 | /@vue/shared@3.4.35:
523 | resolution: {integrity: sha512-hvuhBYYDe+b1G8KHxsQ0diDqDMA8D9laxWZhNAjE83VZb5UDaXl9Xnz7cGdDSyiHM90qqI/CyGMcpBpiDy6VVQ==}
524 |
525 | /@worstone/vue-aplayer@1.0.7:
526 | resolution: {integrity: sha512-ACkSnXy83LplvCB/KHww8p5OYwvQaQIXUjHkkboWYXYrg48R6b9y9ogJYw0KnZDtZK3z0hZESRN5PtRC6BhRZw==}
527 | dependencies:
528 | smoothscroll: 0.4.0
529 | vue: 3.4.35
530 | transitivePeerDependencies:
531 | - typescript
532 | dev: true
533 |
534 | /acorn@8.12.1:
535 | resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
536 | engines: {node: '>=0.4.0'}
537 | hasBin: true
538 | dev: true
539 |
540 | /anymatch@3.1.3:
541 | resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
542 | engines: {node: '>= 8'}
543 | dependencies:
544 | normalize-path: 3.0.0
545 | picomatch: 2.3.1
546 | dev: true
547 |
548 | /binary-extensions@2.3.0:
549 | resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
550 | engines: {node: '>=8'}
551 | dev: true
552 |
553 | /boolbase@1.0.0:
554 | resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
555 | dev: true
556 |
557 | /braces@3.0.3:
558 | resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
559 | engines: {node: '>=8'}
560 | dependencies:
561 | fill-range: 7.1.1
562 | dev: true
563 |
564 | /buffer-from@1.1.2:
565 | resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
566 | dev: true
567 |
568 | /chokidar@3.6.0:
569 | resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
570 | engines: {node: '>= 8.10.0'}
571 | dependencies:
572 | anymatch: 3.1.3
573 | braces: 3.0.3
574 | glob-parent: 5.1.2
575 | is-binary-path: 2.1.0
576 | is-glob: 4.0.3
577 | normalize-path: 3.0.0
578 | readdirp: 3.6.0
579 | optionalDependencies:
580 | fsevents: 2.3.3
581 | dev: true
582 |
583 | /commander@2.20.3:
584 | resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
585 | dev: true
586 |
587 | /commander@7.2.0:
588 | resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
589 | engines: {node: '>= 10'}
590 | dev: true
591 |
592 | /css-select@5.1.0:
593 | resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
594 | dependencies:
595 | boolbase: 1.0.0
596 | css-what: 6.1.0
597 | domhandler: 5.0.3
598 | domutils: 3.1.0
599 | nth-check: 2.1.1
600 | dev: true
601 |
602 | /css-tree@2.2.1:
603 | resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
604 | engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
605 | dependencies:
606 | mdn-data: 2.0.28
607 | source-map-js: 1.2.0
608 | dev: true
609 |
610 | /css-tree@2.3.1:
611 | resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
612 | engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
613 | dependencies:
614 | mdn-data: 2.0.30
615 | source-map-js: 1.2.0
616 | dev: true
617 |
618 | /css-what@6.1.0:
619 | resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
620 | engines: {node: '>= 6'}
621 | dev: true
622 |
623 | /csso@5.0.5:
624 | resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
625 | engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
626 | dependencies:
627 | css-tree: 2.2.1
628 | dev: true
629 |
630 | /csstype@3.1.3:
631 | resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
632 |
633 | /dom-serializer@2.0.0:
634 | resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
635 | dependencies:
636 | domelementtype: 2.3.0
637 | domhandler: 5.0.3
638 | entities: 4.5.0
639 | dev: true
640 |
641 | /domelementtype@2.3.0:
642 | resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
643 | dev: true
644 |
645 | /domhandler@5.0.3:
646 | resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
647 | engines: {node: '>= 4'}
648 | dependencies:
649 | domelementtype: 2.3.0
650 | dev: true
651 |
652 | /domutils@3.1.0:
653 | resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
654 | dependencies:
655 | dom-serializer: 2.0.0
656 | domelementtype: 2.3.0
657 | domhandler: 5.0.3
658 | dev: true
659 |
660 | /entities@4.5.0:
661 | resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
662 | engines: {node: '>=0.12'}
663 |
664 | /esbuild@0.21.5:
665 | resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
666 | engines: {node: '>=12'}
667 | hasBin: true
668 | requiresBuild: true
669 | optionalDependencies:
670 | '@esbuild/aix-ppc64': 0.21.5
671 | '@esbuild/android-arm': 0.21.5
672 | '@esbuild/android-arm64': 0.21.5
673 | '@esbuild/android-x64': 0.21.5
674 | '@esbuild/darwin-arm64': 0.21.5
675 | '@esbuild/darwin-x64': 0.21.5
676 | '@esbuild/freebsd-arm64': 0.21.5
677 | '@esbuild/freebsd-x64': 0.21.5
678 | '@esbuild/linux-arm': 0.21.5
679 | '@esbuild/linux-arm64': 0.21.5
680 | '@esbuild/linux-ia32': 0.21.5
681 | '@esbuild/linux-loong64': 0.21.5
682 | '@esbuild/linux-mips64el': 0.21.5
683 | '@esbuild/linux-ppc64': 0.21.5
684 | '@esbuild/linux-riscv64': 0.21.5
685 | '@esbuild/linux-s390x': 0.21.5
686 | '@esbuild/linux-x64': 0.21.5
687 | '@esbuild/netbsd-x64': 0.21.5
688 | '@esbuild/openbsd-x64': 0.21.5
689 | '@esbuild/sunos-x64': 0.21.5
690 | '@esbuild/win32-arm64': 0.21.5
691 | '@esbuild/win32-ia32': 0.21.5
692 | '@esbuild/win32-x64': 0.21.5
693 | dev: true
694 |
695 | /estree-walker@2.0.2:
696 | resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
697 |
698 | /fill-range@7.1.1:
699 | resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
700 | engines: {node: '>=8'}
701 | dependencies:
702 | to-regex-range: 5.0.1
703 | dev: true
704 |
705 | /fsevents@2.3.3:
706 | resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
707 | engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
708 | os: [darwin]
709 | requiresBuild: true
710 | dev: true
711 | optional: true
712 |
713 | /glob-parent@5.1.2:
714 | resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
715 | engines: {node: '>= 6'}
716 | dependencies:
717 | is-glob: 4.0.3
718 | dev: true
719 |
720 | /immutable@4.3.7:
721 | resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==}
722 | dev: true
723 |
724 | /is-binary-path@2.1.0:
725 | resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
726 | engines: {node: '>=8'}
727 | dependencies:
728 | binary-extensions: 2.3.0
729 | dev: true
730 |
731 | /is-extglob@2.1.1:
732 | resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
733 | engines: {node: '>=0.10.0'}
734 | dev: true
735 |
736 | /is-glob@4.0.3:
737 | resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
738 | engines: {node: '>=0.10.0'}
739 | dependencies:
740 | is-extglob: 2.1.1
741 | dev: true
742 |
743 | /is-number@7.0.0:
744 | resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
745 | engines: {node: '>=0.12.0'}
746 | dev: true
747 |
748 | /magic-string@0.30.11:
749 | resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
750 | dependencies:
751 | '@jridgewell/sourcemap-codec': 1.5.0
752 |
753 | /mdn-data@2.0.28:
754 | resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
755 | dev: true
756 |
757 | /mdn-data@2.0.30:
758 | resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
759 | dev: true
760 |
761 | /nanoid@3.3.7:
762 | resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
763 | engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
764 | hasBin: true
765 |
766 | /normalize-path@3.0.0:
767 | resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
768 | engines: {node: '>=0.10.0'}
769 | dev: true
770 |
771 | /nth-check@2.1.1:
772 | resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
773 | dependencies:
774 | boolbase: 1.0.0
775 | dev: true
776 |
777 | /picocolors@1.0.1:
778 | resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
779 |
780 | /picomatch@2.3.1:
781 | resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
782 | engines: {node: '>=8.6'}
783 | dev: true
784 |
785 | /postcss@8.4.40:
786 | resolution: {integrity: sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==}
787 | engines: {node: ^10 || ^12 || >=14}
788 | dependencies:
789 | nanoid: 3.3.7
790 | picocolors: 1.0.1
791 | source-map-js: 1.2.0
792 |
793 | /readdirp@3.6.0:
794 | resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
795 | engines: {node: '>=8.10.0'}
796 | dependencies:
797 | picomatch: 2.3.1
798 | dev: true
799 |
800 | /rollup@4.19.2:
801 | resolution: {integrity: sha512-6/jgnN1svF9PjNYJ4ya3l+cqutg49vOZ4rVgsDKxdl+5gpGPnByFXWGyfH9YGx9i3nfBwSu1Iyu6vGwFFA0BdQ==}
802 | engines: {node: '>=18.0.0', npm: '>=8.0.0'}
803 | hasBin: true
804 | dependencies:
805 | '@types/estree': 1.0.5
806 | optionalDependencies:
807 | '@rollup/rollup-android-arm-eabi': 4.19.2
808 | '@rollup/rollup-android-arm64': 4.19.2
809 | '@rollup/rollup-darwin-arm64': 4.19.2
810 | '@rollup/rollup-darwin-x64': 4.19.2
811 | '@rollup/rollup-linux-arm-gnueabihf': 4.19.2
812 | '@rollup/rollup-linux-arm-musleabihf': 4.19.2
813 | '@rollup/rollup-linux-arm64-gnu': 4.19.2
814 | '@rollup/rollup-linux-arm64-musl': 4.19.2
815 | '@rollup/rollup-linux-powerpc64le-gnu': 4.19.2
816 | '@rollup/rollup-linux-riscv64-gnu': 4.19.2
817 | '@rollup/rollup-linux-s390x-gnu': 4.19.2
818 | '@rollup/rollup-linux-x64-gnu': 4.19.2
819 | '@rollup/rollup-linux-x64-musl': 4.19.2
820 | '@rollup/rollup-win32-arm64-msvc': 4.19.2
821 | '@rollup/rollup-win32-ia32-msvc': 4.19.2
822 | '@rollup/rollup-win32-x64-msvc': 4.19.2
823 | fsevents: 2.3.3
824 | dev: true
825 |
826 | /sass@1.77.8:
827 | resolution: {integrity: sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==}
828 | engines: {node: '>=14.0.0'}
829 | hasBin: true
830 | dependencies:
831 | chokidar: 3.6.0
832 | immutable: 4.3.7
833 | source-map-js: 1.2.0
834 | dev: true
835 |
836 | /smoothscroll@0.4.0:
837 | resolution: {integrity: sha512-sggQ3U2Un38b3+q/j1P4Y4fCboCtoUIaBYoge+Lb6Xg1H8RTIif/hugVr+ErMtIDpvBbhQfTjtiTeYAfbw1ZGQ==}
838 |
839 | /source-map-js@1.2.0:
840 | resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
841 | engines: {node: '>=0.10.0'}
842 |
843 | /source-map-support@0.5.21:
844 | resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
845 | dependencies:
846 | buffer-from: 1.1.2
847 | source-map: 0.6.1
848 | dev: true
849 |
850 | /source-map@0.6.1:
851 | resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
852 | engines: {node: '>=0.10.0'}
853 | dev: true
854 |
855 | /svgo@3.3.2:
856 | resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
857 | engines: {node: '>=14.0.0'}
858 | hasBin: true
859 | dependencies:
860 | '@trysound/sax': 0.2.0
861 | commander: 7.2.0
862 | css-select: 5.1.0
863 | css-tree: 2.3.1
864 | css-what: 6.1.0
865 | csso: 5.0.5
866 | picocolors: 1.0.1
867 | dev: true
868 |
869 | /terser@5.31.3:
870 | resolution: {integrity: sha512-pAfYn3NIZLyZpa83ZKigvj6Rn9c/vd5KfYGX7cN1mnzqgDcxWvrU5ZtAfIKhEXz9nRecw4z3LXkjaq96/qZqAA==}
871 | engines: {node: '>=10'}
872 | hasBin: true
873 | dependencies:
874 | '@jridgewell/source-map': 0.3.6
875 | acorn: 8.12.1
876 | commander: 2.20.3
877 | source-map-support: 0.5.21
878 | dev: true
879 |
880 | /to-fast-properties@2.0.0:
881 | resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
882 | engines: {node: '>=4'}
883 |
884 | /to-regex-range@5.0.1:
885 | resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
886 | engines: {node: '>=8.0'}
887 | dependencies:
888 | is-number: 7.0.0
889 | dev: true
890 |
891 | /vite-svg-loader@5.1.0(vue@3.4.35):
892 | resolution: {integrity: sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==}
893 | peerDependencies:
894 | vue: '>=3.2.13'
895 | dependencies:
896 | svgo: 3.3.2
897 | vue: 3.4.35
898 | dev: true
899 |
900 | /vite@5.3.5(sass@1.77.8)(terser@5.31.3):
901 | resolution: {integrity: sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==}
902 | engines: {node: ^18.0.0 || >=20.0.0}
903 | hasBin: true
904 | peerDependencies:
905 | '@types/node': ^18.0.0 || >=20.0.0
906 | less: '*'
907 | lightningcss: ^1.21.0
908 | sass: '*'
909 | stylus: '*'
910 | sugarss: '*'
911 | terser: ^5.4.0
912 | peerDependenciesMeta:
913 | '@types/node':
914 | optional: true
915 | less:
916 | optional: true
917 | lightningcss:
918 | optional: true
919 | sass:
920 | optional: true
921 | stylus:
922 | optional: true
923 | sugarss:
924 | optional: true
925 | terser:
926 | optional: true
927 | dependencies:
928 | esbuild: 0.21.5
929 | postcss: 8.4.40
930 | rollup: 4.19.2
931 | sass: 1.77.8
932 | terser: 5.31.3
933 | optionalDependencies:
934 | fsevents: 2.3.3
935 | dev: true
936 |
937 | /vue@3.4.35:
938 | resolution: {integrity: sha512-+fl/GLmI4GPileHftVlCdB7fUL4aziPcqTudpTGXCT8s+iZWuOCeNEB5haX6Uz2IpRrbEXOgIFbe+XciCuGbNQ==}
939 | peerDependencies:
940 | typescript: '*'
941 | peerDependenciesMeta:
942 | typescript:
943 | optional: true
944 | dependencies:
945 | '@vue/compiler-dom': 3.4.35
946 | '@vue/compiler-sfc': 3.4.35
947 | '@vue/runtime-dom': 3.4.35
948 | '@vue/server-renderer': 3.4.35(vue@3.4.35)
949 | '@vue/shared': 3.4.35
950 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
—— Vue 3.x for APlayer.
9 |
10 |
11 |
12 |
41 |
42 |
播放音频
43 |
暂停音频
44 |
播放/暂停音频
45 |
跳转特定时间
46 |
设置音频音量
47 |
设置主题颜色
48 |
设置播放器模式
49 |
设置循环播放
50 |
设置循环顺序
51 |
显示通知
52 |
上一首音频
53 |
下一首音频
54 |
销毁播放器
55 |
显示歌词
56 |
隐藏歌词
57 |
显示/隐藏歌词
58 |
显示播放列表
59 |
隐藏播放列表
60 |
显示/隐藏播放列表
61 |
添加音频
62 |
移除音频
63 |
切换音频
64 |
清空播放列表
65 |
66 |
67 |
161 |
--------------------------------------------------------------------------------
/src/assets/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/first19326/APlayer/0952f946a862303767394eae4e9f25ecf082ff47/src/assets/favicon.ico
--------------------------------------------------------------------------------
/src/assets/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/vue.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/APlayer.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
13 |
14 |
15 | {{ aplayer.audio[aplayer.index] ? aplayer.audio[aplayer.index].name : "No Audio" }}
16 | {{ aplayer.audio[aplayer.index] ? " - " + aplayer.audio[aplayer.index].artist : "" }}
17 |
18 |
19 |
20 |
21 |
{{ aplayer.noticeText }}
22 |
23 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
729 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/assets/loading.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/assets/loop-all.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/assets/loop-none.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/assets/loop-one.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/assets/lrc.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/assets/menu.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/assets/order-list.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/assets/order-random.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/assets/pause.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/assets/play.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/assets/right.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/assets/skip.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/assets/volume-down.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/assets/volume-off.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/assets/volume-up.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/components/Controller.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | {{ playedTime }} / {{ duration }}
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
37 |
41 |
46 |
49 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/components/Icon.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/components/List.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | -
5 |
6 | {{ index + 1 }}
7 | {{ audio.name }}
8 | {{ audio.artist ? audio.artist : "" }}
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/components/Lyric.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/src/components/vue-aplayer/index.js:
--------------------------------------------------------------------------------
1 | import APlayer from "./APlayer.vue";
2 |
3 | APlayer.install = (app) => {
4 | app.component(APlayer.name, APlayer);
5 | }
6 |
7 | export default APlayer;
--------------------------------------------------------------------------------
/src/components/vue-aplayer/style/index.scss:
--------------------------------------------------------------------------------
1 | $aplayer-height: 66px;
2 | $lrc-height: 30px;
3 | $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
4 |
5 | .aplayer {
6 | position: relative;
7 | margin: 5px;
8 | width: 100%;
9 | line-height: initial;
10 | border-radius: 2px;
11 | font-family: Arial, Helvetica, sans-serif;
12 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
13 | overflow: hidden;
14 | user-select: none;
15 |
16 | * {
17 | box-sizing: content-box;
18 | }
19 |
20 | svg {
21 | width: 100%;
22 | height: 100%;
23 |
24 | path,
25 | circle {
26 | fill: #FFF;
27 | }
28 | }
29 |
30 | &.aplayer-withlist {
31 | .aplayer-info {
32 | border-bottom: 1px solid #E9E9E9;
33 | }
34 | .aplayer-list {
35 | display: block;
36 | }
37 | .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu {
38 | display: inline;
39 | }
40 | .aplayer-icon-order {
41 | display: inline;
42 | }
43 | }
44 |
45 | &.aplayer-withlrc {
46 | .aplayer-pic {
47 | width: $aplayer-height-lrc;
48 | height: $aplayer-height-lrc;
49 | }
50 | .aplayer-info {
51 | margin-left: $aplayer-height-lrc;
52 | padding: 10px 7px 0 7px;
53 | height: $aplayer-height-lrc;
54 | }
55 | .aplayer-lrc {
56 | display: block;
57 | }
58 | }
59 |
60 | &.aplayer-mini {
61 | width: $aplayer-height;
62 |
63 | .aplayer-info {
64 | display: none;
65 | }
66 | .aplayer-list {
67 | display: none;
68 | }
69 | .aplayer-pic,
70 | .aplayer-body {
71 | width: $aplayer-height;
72 | height: $aplayer-height;
73 | }
74 | }
75 |
76 | &.aplayer-fixed {
77 | position: fixed;
78 | bottom: 0;
79 | left: 0;
80 | right: 0;
81 | margin: 0;
82 | max-width: 400px;
83 | z-index: 99;
84 | overflow: visible;
85 | box-shadow: none;
86 |
87 | .aplayer-list {
88 | margin-bottom: 65px;
89 | max-width: 398px;
90 | border: 1px solid #EEE;
91 | border-bottom: none;
92 | }
93 |
94 | .aplayer-body {
95 | position: fixed;
96 | bottom: 0;
97 | left: 0;
98 | right: 0;
99 | margin: 0;
100 | padding-right: 18px;
101 | max-width: 400px;
102 | z-index: 99;
103 | transition: all 0.3s ease;
104 | }
105 |
106 | .aplayer-lrc {
107 | display: block;
108 | position: fixed;
109 | bottom: 10px;
110 | left: 0;
111 | right: 0;
112 | margin: 0;
113 | z-index: 98;
114 | pointer-events: none;
115 | text-shadow: -1px -1px 0 #FFF;
116 |
117 | &:before,
118 | &:after {
119 | display: none;
120 | }
121 | }
122 |
123 | .aplayer-info {
124 | transform: scaleX(1);
125 | transform-origin: 0 0;
126 | transition: all 0.3s ease;
127 | border-top: 1px solid #E9E9E9;
128 | border-right: 1px solid #E9E9E9;
129 | border-bottom: none;
130 |
131 | .aplayer-music {
132 | width: calc(100% - 105px);
133 | }
134 | }
135 |
136 | .aplayer-miniswitcher {
137 | display: block;
138 | }
139 |
140 | &.aplayer-mini {
141 | .aplayer-info {
142 | display: block;
143 | transform: scaleX(0);
144 | }
145 | .aplayer-body {
146 | width: $aplayer-height !important;
147 | }
148 |
149 | .aplayer-miniswitcher .aplayer-icon {
150 | transform: rotateY(0);
151 | }
152 | }
153 |
154 | .aplayer-icon-back,
155 | .aplayer-icon-play,
156 | .aplayer-icon-forward,
157 | .aplayer-icon-lrc {
158 | display: inline-block;
159 | }
160 |
161 | .aplayer-icon-back,
162 | .aplayer-icon-play,
163 | .aplayer-icon-forward,
164 | .aplayer-icon-menu {
165 | position: absolute;
166 | bottom: 27px;
167 | width: 20px;
168 | height: 20px;
169 | }
170 |
171 | .aplayer-icon-back {
172 | right: 75px;
173 | }
174 |
175 | .aplayer-icon-play {
176 | right: 50px;
177 | }
178 |
179 | .aplayer-icon-forward {
180 | right: 25px;
181 | }
182 |
183 | .aplayer-icon-menu {
184 | right: 0;
185 | }
186 | }
187 |
188 | &.aplayer-mobile {
189 | .aplayer-icon-volume-down {
190 | display: none;
191 | }
192 | }
193 |
194 | &.aplayer-narrow {
195 | .aplayer-icon-order,
196 | .aplayer-icon-loop {
197 | display: none;
198 | }
199 | }
200 |
201 | &.aplayer-loading {
202 | .aplayer-info .aplayer-controller .aplayer-loading-icon {
203 | display: block;
204 | }
205 |
206 | .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
207 | transform: scale(1);
208 | }
209 | }
210 |
211 | .aplayer-body {
212 | position: relative;
213 | background: #FFF;
214 | }
215 |
216 | .aplayer-icon {
217 | display: inline-block;
218 | margin: 0;
219 | padding: 0;
220 | width: 15px;
221 | height: 15px;
222 | opacity: .8;
223 | background-color: transparent;
224 | border: none;
225 | outline: none;
226 | vertical-align: middle;
227 | font-size: 12px;
228 | cursor: pointer;
229 |
230 | path {
231 | transition: all .2s ease-in-out;
232 | }
233 | }
234 |
235 | .aplayer-icon-order,
236 | .aplayer-icon-back,
237 | .aplayer-icon-play,
238 | .aplayer-icon-forward,
239 | .aplayer-icon-lrc {
240 | display: none;
241 | }
242 |
243 | .aplayer-icon-lrc-inactivity {
244 | svg {
245 | opacity: 0.4;
246 | }
247 | }
248 |
249 | .aplayer-icon-forward {
250 | transform: rotate(180deg);
251 | }
252 |
253 | .aplayer-lrc-content {
254 | display: none;
255 | }
256 |
257 | .aplayer-pic {
258 | position: relative;
259 | float: left;
260 | width: $aplayer-height;
261 | height: $aplayer-height;
262 | background-size: cover;
263 | background-position: center;
264 | transition: all 0.3s ease;
265 | cursor: pointer;
266 |
267 | &:hover .aplayer-button {
268 | opacity: 1;
269 | }
270 |
271 | .aplayer-button {
272 | position: absolute;
273 | opacity: 0.8;
274 | background: rgba(0, 0, 0, 0.2);
275 | border-radius: 50%;
276 | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
277 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
278 | transition: all 0.1s ease;
279 |
280 | path {
281 | fill: #FFF;
282 | }
283 | }
284 |
285 | .aplayer-hide {
286 | display: none;
287 | }
288 |
289 | .aplayer-play {
290 | bottom: 50%;
291 | right: 50%;
292 | margin: 0 -15px -15px 0;
293 | width: 26px;
294 | height: 26px;
295 | border: 2px solid #FFF;
296 |
297 | svg {
298 | position: absolute;
299 | top: 3px;
300 | left: 4px;
301 | width: 20px;
302 | height: 20px;
303 | }
304 | }
305 |
306 | .aplayer-pause {
307 | bottom: 4px;
308 | right: 4px;
309 | width: 16px;
310 | height: 16px;
311 | border: 2px solid #FFF;
312 |
313 | svg {
314 | position: absolute;
315 | top: 2px;
316 | left: 2px;
317 | width: 12px;
318 | height: 12px;
319 | }
320 | }
321 | }
322 |
323 | .aplayer-info {
324 | margin-left: $aplayer-height;
325 | padding: 14px 7px 0 10px;
326 | height: $aplayer-height;
327 | box-sizing: border-box;
328 |
329 | .aplayer-music {
330 | margin: 0 0 13px 5px;
331 | padding-bottom: 2px;
332 | height: 20px;
333 | overflow: hidden;
334 | white-space: nowrap;
335 | text-overflow: ellipsis;
336 | user-select: text;
337 | cursor: default;
338 |
339 | .aplayer-title {
340 | font-size: 14px;
341 | }
342 |
343 | .aplayer-author {
344 | font-size: 12px;
345 | color: #666;
346 | }
347 | }
348 |
349 | .aplayer-controller {
350 | position: relative;
351 | display: flex;
352 | align-items: center;
353 | bottom: 4px;
354 |
355 | .aplayer-bar-wrap {
356 | margin: 0 0 0 5px;
357 | padding: 4px 0;
358 | flex: 1;
359 | cursor: pointer !important;
360 |
361 | &:hover {
362 | .aplayer-bar .aplayer-played .aplayer-thumb {
363 | transform: scale(1);
364 | }
365 | }
366 |
367 | .aplayer-bar {
368 | position: relative;
369 | width: 100%;
370 | height: 2px;
371 | background: #CDCDCD;
372 |
373 | .aplayer-loaded {
374 | position: absolute;
375 | top: 0;
376 | bottom: 0;
377 | left: 0;
378 | height: 2px;
379 | background: #AAA;
380 | transition: all 0.5s ease;
381 | }
382 |
383 | .aplayer-played {
384 | position: absolute;
385 | top: 0;
386 | bottom: 0;
387 | left: 0;
388 | height: 2px;
389 |
390 | .aplayer-thumb {
391 | position: absolute;
392 | top: 0;
393 | right: 5px;
394 | margin-top: -4px;
395 | margin-right: -10px;
396 | width: 10px;
397 | height: 10px;
398 | border-radius: 50%;
399 | cursor: pointer;
400 | transition: all .3s ease-in-out;
401 | transform: scale(0);
402 | }
403 | }
404 | }
405 | }
406 |
407 | .aplayer-time {
408 | position: relative;
409 | right: 0;
410 | padding-left: 7px;
411 | height: 17px;
412 | color: #999;
413 | font-size: 11px;
414 |
415 | .aplayer-time-inner {
416 | vertical-align: middle;
417 | }
418 |
419 | .aplayer-icon {
420 | cursor: pointer;
421 | transition: all 0.2s ease;
422 |
423 | path {
424 | fill: #666;
425 | }
426 |
427 | &.aplayer-icon-order {
428 | margin-left: 5px;
429 | }
430 |
431 | &.aplayer-icon-loop {
432 | margin: 0 5px;
433 | }
434 |
435 | &:hover {
436 | path {
437 | fill: #000;
438 | }
439 | }
440 |
441 | &.aplayer-icon-menu {
442 | display: none;
443 | }
444 | }
445 |
446 | &.aplayer-time-narrow {
447 | .aplayer-icon-mode {
448 | display: none;
449 | }
450 |
451 | .aplayer-icon-menu {
452 | display: none;
453 | }
454 | }
455 | }
456 |
457 | .aplayer-volume-wrap {
458 | position: relative;
459 | display: inline-block;
460 | margin-left: 7px;
461 | cursor: pointer !important;
462 |
463 | &:hover .aplayer-volume-bar-wrap {
464 | height: 40px;
465 | }
466 |
467 | .aplayer-volume-bar-wrap {
468 | position: absolute;
469 | bottom: 15px;
470 | right: -3px;
471 | width: 25px;
472 | height: 0;
473 | z-index: 99;
474 | overflow: hidden;
475 | transition: all .2s ease-in-out;
476 |
477 | &.aplayer-volume-bar-wrap-active {
478 | height: 40px;
479 | }
480 |
481 | .aplayer-volume-bar {
482 | position: absolute;
483 | bottom: 0;
484 | right: 10px;
485 | width: 5px;
486 | height: 35px;
487 | background: #AAA;
488 | border-radius: 2.5px;
489 | overflow: hidden;
490 |
491 | .aplayer-volume {
492 | position: absolute;
493 | bottom: 0;
494 | right: 0;
495 | width: 5px;
496 | transition: all 0.1s ease;
497 | }
498 | }
499 | }
500 | }
501 |
502 | .aplayer-loading-icon {
503 | display: none;
504 |
505 | svg {
506 | position: absolute;
507 | animation: rotate 1s linear infinite;
508 | }
509 | }
510 | }
511 | }
512 |
513 | .aplayer-lrc {
514 | display: none;
515 | position: relative;
516 | margin: -10px 0 7px;
517 | height: $lrc-height;
518 | text-align: center;
519 | overflow: hidden;
520 |
521 | &:before {
522 | display: block;
523 | position: absolute;
524 | top: 0;
525 | z-index: 1;
526 | width: 100%;
527 | height: 10%;
528 | content: ' ';
529 | background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
530 | background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
531 | background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
532 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#00FFFFFF',GradientType=0 );
533 | overflow: hidden;
534 | }
535 |
536 | &:after {
537 | display: block;
538 | position: absolute;
539 | bottom: 0;
540 | z-index: 1;
541 | width: 100%;
542 | height: 33%;
543 | content: ' ';
544 | background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
545 | background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
546 | background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
547 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00FFFFFF', endColorstr='#CCFFFFFF',GradientType=0 );
548 | overflow: hidden;
549 | }
550 |
551 | p {
552 | margin: 0 !important;
553 | padding: 0 !important;
554 | height: 16px !important;
555 | line-height: 16px !important;
556 | opacity: 0.4;
557 | color: #666;
558 | font-size: 12px;
559 | transition: all 0.5s ease-out;
560 | overflow: hidden;
561 |
562 | &.aplayer-lrc-current {
563 | height: initial !important;
564 | min-height: 16px;
565 | opacity: 1;
566 | overflow: visible;
567 | }
568 | }
569 |
570 | &.aplayer-lrc-hide {
571 | display: none;
572 | }
573 |
574 | .aplayer-lrc-contents {
575 | width: 100%;
576 | transition: all 0.5s ease-out;
577 | user-select: text;
578 | cursor: default;
579 | }
580 | }
581 |
582 | .aplayer-list {
583 | display: none;
584 | background: #FFF;
585 | transition: all 0.5s ease;
586 | will-change: height;
587 | overflow: hidden;
588 |
589 | &.aplayer-list-hide {
590 | max-height: 0 !important;
591 | border-top: 0 solid #EEE;
592 | }
593 |
594 | ol {
595 | list-style-type: none;
596 | margin: 0;
597 | padding: 0;
598 | overflow-y: auto;
599 |
600 | &::-webkit-scrollbar {
601 | width: 5px;
602 | }
603 |
604 | &::-webkit-scrollbar-thumb {
605 | background-color: #EEE;
606 | border-radius: 3px;
607 | }
608 |
609 | &::-webkit-scrollbar-thumb:hover {
610 | background-color: #CCC;
611 | }
612 |
613 | li {
614 | position: relative;
615 | margin: 0;
616 | padding: 0 15px;
617 | height: 32px;
618 | line-height: 32px;
619 | border-top: 1px solid #E9E9E9;
620 | font-size: 12px;
621 | cursor: pointer;
622 | transition: all 0.2s ease;
623 | overflow: hidden;
624 |
625 | &:first-child {
626 | border-top: none;
627 | }
628 |
629 | &:hover {
630 | background: #EFEFEF;
631 | }
632 |
633 | &.aplayer-list-light {
634 | background: #E9E9E9;
635 |
636 | .aplayer-list-cur {
637 | display: inline-block;
638 | }
639 | }
640 |
641 | .aplayer-list-cur {
642 | display: none;
643 | position: absolute;
644 | top: 5px;
645 | left: 0;
646 | width: 3px;
647 | height: 22px;
648 | cursor: pointer;
649 | }
650 | .aplayer-list-index {
651 | margin-right: 12px;
652 | color: #666;
653 | cursor: pointer;
654 | }
655 | .aplayer-list-author {
656 | float: right;
657 | color: #666;
658 | cursor: pointer;
659 | }
660 | }
661 | }
662 | }
663 |
664 | .aplayer-notice {
665 | opacity: 0;
666 | position: absolute;
667 | top: 50%;
668 | left: 50%;
669 | z-index: 1;
670 | padding: 5px 10px;
671 | background-color: #F4F4F5;
672 | border-radius: 4px;
673 | color: #909399;
674 | font-size: 12px;
675 | transform: translate(-50%, -50%);
676 | transition: all .3s ease-in-out;
677 | overflow: hidden;
678 | pointer-events: none;
679 | }
680 |
681 | .aplayer-miniswitcher {
682 | display: none;
683 | position: absolute;
684 | top: 0;
685 | bottom: 0;
686 | right: 0;
687 | width: 18px;
688 | height: 100%;
689 | background: #E6E6E6;
690 | border-radius: 0 2px 2px 0;
691 |
692 | .aplayer-icon {
693 | height: 100%;
694 | width: 100%;
695 | transform: rotateY(180deg);
696 | transition: all 0.3s ease;
697 |
698 | path {
699 | fill: #666;
700 | }
701 |
702 | &:hover {
703 | path {
704 | fill: #000;
705 | }
706 | }
707 | }
708 | }
709 | }
710 |
711 | @keyframes aplayer-roll {
712 | 0% { left: 0 }
713 | 100% { left: -100% }
714 | }
715 |
716 | @keyframes rotate {
717 | 0% {
718 | transform: rotate(0)
719 | }
720 | 100% {
721 | transform: rotate(360deg)
722 | }
723 | }
--------------------------------------------------------------------------------
/src/components/vue-aplayer/utils/utils.js:
--------------------------------------------------------------------------------
1 | const isMobile = /mobile/i.test(window.navigator.userAgent);
2 |
3 | const utils = {
4 | isMobile: isMobile,
5 | eventsName: {
6 | moveStart: isMobile ? 'touchstart' : 'mousedown',
7 | moving: isMobile ? 'touchmove' : 'mousemove',
8 | moveEnd: isMobile ? 'touchend' : 'mouseup',
9 | },
10 | storage: {
11 | set: (key, value) => {
12 | localStorage.setItem(key, value);
13 | },
14 | get: (key) => {
15 | localStorage.getItem(key);
16 | }
17 | },
18 | /**
19 | * Parse Second to Time String
20 | *
21 | * @param {Number} second
22 | * @return {String} 00:00 or 00:00:00
23 | */
24 | secondToTime: (second) => {
25 | const strMap = (num) => (num < 10 ? '0' + num : '' + num);
26 | const hour = Math.floor(second / 3600);
27 | const min = Math.floor((second - hour * 3600) / 60);
28 | const sec = Math.floor(second - hour * 3600 - min * 60);
29 | return (hour > 0 ? [hour, min, sec] : [min, sec]).map(strMap).join(':');
30 | },
31 | randomOrder: (length) => {
32 | function shuffle(arr) {
33 | for (let i = arr.length - 1; i >= 0; i--) {
34 | const randomIndex = Math.floor(Math.random() * (i + 1));
35 | const itemAtIndex = arr[randomIndex];
36 | arr[randomIndex] = arr[i];
37 | arr[i] = itemAtIndex;
38 | }
39 | return arr;
40 | }
41 | return shuffle(
42 | [...Array(length)].map(function(item, i) {
43 | return i;
44 | })
45 | );
46 | },
47 | /**
48 | * Parse Lyric String to Array
49 | *
50 | * @param {String} lyricStr
51 | * @return {Array} [[0, "APlayer"], [1.2, "is"], [34.56, "Amazing"]]
52 | */
53 | parse (lyricStr) {
54 | if (lyricStr) {
55 | lyricStr = lyricStr.replace(/([^\]^\n])\[/g, (match, p) => p + '\n[');
56 | let lyricArr = lyricStr.split('\n');
57 | let lyricParseArr = [];
58 | for (let i = 0; i < lyricArr.length; i++) {
59 | // match lrc time
60 | const lrcTimes = lyricArr[i].match(/\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g);
61 | // match lrc text
62 | const lrcText = lyricArr[i]
63 | .replace(/.*\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g, '')
64 | .replace(/<(\d{2}):(\d{2})(\.(\d{2,3}))?>/g, '')
65 | .replace(/^\s+|\s+$/g, '');
66 |
67 | if (lrcTimes) {
68 | // handle multiple time tag
69 | for (let j = 0; j < lrcTimes.length; j++) {
70 | const oneTime = /\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/.exec(lrcTimes[j]);
71 | const min2sec = oneTime[1] * 60;
72 | const sec2sec = parseInt(oneTime[2]);
73 | const msec2sec = oneTime[4] ? parseInt(oneTime[4]) / ((oneTime[4] + '').length === 2 ? 100 : 1000) : 0;
74 | const lrcTime = min2sec + sec2sec + msec2sec;
75 | lyricParseArr.push([lrcTime, lrcText]);
76 | }
77 | }
78 | }
79 | // sort by time
80 | lyricParseArr = lyricParseArr.filter((item) => item[1]);
81 | lyricParseArr.sort((a, b) => a[0] - b[0]);
82 |
83 | return lyricParseArr;
84 | } else {
85 | return [];
86 | }
87 | },
88 | };
89 |
90 | export default utils;
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import './style.css'
3 | import App from './App.vue'
4 |
5 | createApp(App).mount('#app')
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | }
15 |
16 | a {
17 | font-weight: 500;
18 | color: #646CFF;
19 | text-decoration: inherit;
20 | }
21 | a:hover {
22 | color: #535BF2;
23 | }
24 |
25 | body {
26 | margin: 0;
27 | display: flex;
28 | place-items: center;
29 | min-width: 475px;
30 | min-height: 100vh;
31 | }
32 |
33 | h1 {
34 | font-size: 3.2em;
35 | line-height: 1.1;
36 | }
37 |
38 | button {
39 | border-radius: 8px;
40 | border: 1px solid transparent;
41 | padding: 0.6em 1.2em;
42 | font-size: 1em;
43 | font-weight: 500;
44 | font-family: inherit;
45 | background-color: #1A1A1A;
46 | cursor: pointer;
47 | transition: border-color 0.25s;
48 | }
49 | button:hover {
50 | border-color: #646CFF;
51 | }
52 | button:focus,
53 | button:focus-visible {
54 | outline: 4px auto -webkit-focus-ring-color;
55 | }
56 |
57 | .card {
58 | padding: 2em;
59 | }
60 |
61 | #app {
62 | display: flex;
63 | flex-direction: column;
64 | align-content: center;
65 | justify-content: center;
66 | align-items: center;
67 | flex-wrap: nowrap;
68 | width: 100%;
69 | }
70 |
71 | @media (prefers-color-scheme: light) {
72 | :root {
73 | color: #213547;
74 | background-color: #FFFFFF;
75 | }
76 | a:hover {
77 | color: #747BFF;
78 | }
79 | button {
80 | background-color: #F9F9F9;
81 | }
82 | }
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import viteSVGLoader from 'vite-svg-loader';
3 | import vue from '@vitejs/plugin-vue';
4 | import { resolve } from 'path';
5 |
6 | // https://vitejs.dev/config/
7 | export default defineConfig({
8 | plugins: [vue(), viteSVGLoader()],
9 | build: {
10 | outDir: 'dist',
11 | sourcemap: true,
12 | lib: {
13 | entry: resolve(__dirname, 'src/components/vue-aplayer/index.js'),
14 | name: 'APlayer',
15 | fileName: 'vue-aplayer',
16 | formats: ['es', 'cjs'],
17 | },
18 | rollupOptions: {
19 | external: ['vue'],
20 | output: {
21 | globals: {
22 | vue: 'Vue',
23 | },
24 | intro: 'import "./style.css";',
25 | }
26 | },
27 | }
28 | })
--------------------------------------------------------------------------------
/vite.demo.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import viteSVGLoader from 'vite-svg-loader';
3 | import vue from '@vitejs/plugin-vue';
4 |
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [vue(), viteSVGLoader()],
8 | build: {
9 | outDir: "demo",
10 | minify: "terser",
11 | }
12 | })
--------------------------------------------------------------------------------