About 11 min
使用pinia持久化存储用户配置
router.push()会给路由最后添加，导致子路由回不到主路由，解决方法：router.push({ name: key });因为push({path:testPath}) 在跳到二级路由之后会默认在二级路由继续跳转地址,
vue路由router从父页面跳转子页面，父页面隐藏：给子路由添加一个meta：showfather：false，给父路由添加：一个meta：showfather：true,然后在需要隐藏的div上添加：
v-show="$route.meta.showFather"menu获取路由以配置当前高亮的menu-item，route.path.split('/')[1]
如何判断两个音乐文件相同（添加到音乐库时去重）
Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
// createWebDav.ts import { createClient } from 'webdav'; import { useUserConfigStore } from '@/store/userConfig'; const userConfigStore = useUserConfigStore(); export const webDavClient = createClient(userConfigStore.webDavConfig.url, { username: userConfigStore.webDavConfig.username, password: userConfigStore.webDavConfig.password, });vue3获取ref元素：
原生：
document.querySelector(选择器) document.getElementById(id选择器) document.getElementsByClassName(class选择器)ref获取单个：
<template> <div ref='divDom'></div> </template> <script setup> import { ref} from 'vue' const divDom = ref(null); onMounted(()=>{ console.log('获取dom元素',divDom.value) })ref获取v-for循环中的dom元素：
<template> <div ref='getDivDom' v-for="item in list" :data-id="item.id"></div> </template> <script setup> import { ref} from 'vue' const divDomList = ref([]); onMounted(() => console.log(getDivDom.value))播放器组件的封装设计：
功能设计：
- 播放/暂停功能：提供控制音乐播放和暂停的按钮。
- 上一首/下一首功能：提供切换到上一首或下一首音乐的按钮。
- 进度条控制：显示当前音乐播放进度，并允许用户拖动进度条来调整播放位置。
- 音量控制：提供音量调节的按钮或滑块。
- 播放模式切换：支持单曲循环、列表循环、随机播放等不同的播放模式。
- 歌曲列表：展示当前播放列表，并支持点击选择不同的歌曲进行播放。
界面设计：
- 播放器样式：设计一个美观且易于使用的播放器界面，可以包括专辑封面、歌曲信息、进度条、控制按钮等。
- 自定义样式：提供一些可配置的样式选项，例如播放器颜色、控制按钮图标等，以便用户根据自己的需求进行定制。
接口设计：
- 提供播放列表接口：允许用户通过接口传入歌曲列表数据，以便播放器能够加载和显示相应的歌曲列表。
- 提供回调函数接口：在特定的事件发生时，例如歌曲切换、播放结束等，提供回调函数接口，以便用户可以自定义处理逻辑。
状态管理：
- 播放状态：维护播放器的播放状态，例如当前播放状态（播放/暂停）、当前播放时间、当前音量等。
- 歌曲信息：维护当前播放的歌曲信息，例如歌曲标题、歌手、专辑封面等。
- 播放列表：维护当前播放的歌曲列表和当前选择的歌曲索引。
错误处理：
- 处理加载失败：当音乐无法加载或播放时，提供错误提示或自动切换到下一首歌曲。
- 异常处理：处理可能出现的异常情况，例如网络中断、音频格式不支持等。
取消自动记住播放位置（audio默认），
// 在 loadAndPlayMusic 函数中
audioPlayer.value.src = url;
audioPlayer.value.load();
audioPlayer.value.currentTime = 0; // 重设播放位置
audioPlayer.value.play();
isPlaying.value = true;
歌曲切换模式的处理
HTML5 audio 缓存处理：
使用scss：npm install -D sass
问题：
<template> <div v-show="$route.meta.showFather"> <div> <button @click="addMusic">添加音乐</button> </div> <div> <MusicList :list="musicMetadataList" /> </div> </div> <div> <router-view></router-view> </div> </template> <script setup lang="ts"> import { useMusicLibraryStore } from '@/store/musicLibrary'; import { useRouter } from 'vue-router'; import MusicList from '@/components/MusicList.vue'; import { onMounted, ref } from 'vue'; import { getMusicMetadata } from '@/utils/getMusicMetadata'; import { useUserConfigStore } from '@/store/userConfig'; import { createClient } from 'webdav';
const musicLibraryStore = useMusicLibraryStore();
const router = useRouter();
const userConfigStore = useUserConfigStore();
const musicMetadataList = ref([]);
const addMusic = () => {
router.push('/music-library/add-music')
}
onMounted(() => {
musicMetadataList.value = musicLibraryStore.musicLibrary.map(async (item) => {
const fileContent = await createClient(userConfigStore.webDavConfig.url, {
username: userConfigStore.webDavConfig.username,
password: userConfigStore.webDavConfig.password,
}).getFileContents(item.filename);
const blob = new Blob([fileContent]);
const res = await getMusicMetadata(blob);
console.log(res);
return res;
})
console.log(musicMetadataList.value);
})
</script>
<style scoped></style>我返回的musicMEetadataList是一个promise对象，我该怎么获取到里面的tags数据
音频标签的处理，列表懒加载（弃用）
ref获取v-for渲染出来的dom
localstorage内容超出，使用localforage
数据持久化，用localforage
音乐播放器的实现
有 silencePromise，修复点击播放后快速点击暂停导致的错误：
“Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().”；
组合式函数实现代码复用，加载动画的实现
基础组件的实现，渲染函数
动画库的使用：https://zhuanlan.zhihu.com/p/657783213
a:hover {
color: orchid;
animation: pulse;
animation-duration: 1.5s;
}
}
element plus中使用iconfont，封装icon组件，title展示
flex布局实现上中下布局头和尾是固定的中间自适应支持滚动
:deep()样式穿透，修改第三方UI库的样式
tab表格超出内容显示省略号
tab表格不换号，可以实现index不换行
loading的使用：
async () => {
loading.value = true;
try {
await getDirectory('/');
} catch (error) {
console.log(error);
} finally {
loading.value = false;
}
}
动态路由切换
面包屑
动态路由返回的时候，页面没变化
数据结构：
从文件夹获取的文件信息，数组：
[
{
"filename": "/阿里云盘/005音乐/2002 - Anne-Marie.mp3",
"basename": "2002 - Anne-Marie.mp3",
"lastmod": "Tue, 24 Oct 2023 04:33:13 GMT",
"size": 7540046,
"type": "file",
"etag": "1790f0f4d90ef6c0730d4e",
"mime": "audio/mpeg"
},
{
"filename": "/阿里云盘/005音乐/All Falls Down - Alan Walker、Noah Cyrus、Digital Farm Animals、Juliander.mp3",
"basename": "All Falls Down - Alan Walker、Noah Cyrus、Digital Farm Animals、Juliander.mp3",
"lastmod": "Tue, 24 Oct 2023 04:33:14 GMT",
"size": 8047167,
"type": "file",
"etag": "1790f0f4f69010807aca3f",
"mime": "audio/mpeg"
},
{
"filename": "/阿里云盘/005音乐/All For Love - Tungevaag、Raaban、Richard Smitt.mp3",
"basename": "All For Love - Tungevaag、Raaban、Richard Smitt.mp3",
"lastmod": "Tue, 24 Oct 2023 04:33:14 GMT",
"size": 7289736,
"type": "file",
"etag": "1790f0f5089f7a406f3b88",
"mime": "audio/mpeg"
},
{
"filename": "/阿里云盘/005音乐/0321 - space x.mp3",
"basename": "0321 - space x.mp3",
"lastmod": "Tue, 24 Oct 2023 04:33:13 GMT",
"size": 7886163,
"type": "file",
"etag": "1790f0f4dd1c8fc0785553",
"mime": "audio/mpeg"
},
{
"filename": "/阿里云盘/005音乐/All 2 U - Manila Killa、Sara Skinner、Nicole Millar、Zac Poor、Stephen Rezza、Natalie Hawkins.mp3",
"basename": "All 2 U - Manila Killa、Sara Skinner、Nicole Millar、Zac Poor、Stephen Rezza、Natalie Hawkins.mp3",
"lastmod": "Tue, 24 Oct 2023 04:33:15 GMT",
"size": 10368085,
"type": "file",
"etag": "1790f0f544774d409e3455",
"mime": "audio/mpeg"
}
]
保存到音乐库数据：
[
{
"filename": "/阿里云盘/005音乐/2002 - Anne-Marie.mp3",
"basename": "2002 - Anne-Marie.mp3",
"lastmod": "Tue, 24 Oct 2023 04:33:13 GMT",
"size": 7540046,
"type": "file",
"etag": "1790f0f4d90ef6c0730d4e",
"mime": "audio/mpeg"
},
{
"filename": "/阿里云盘/005音乐/All Falls Down - Alan Walker、Noah Cyrus、Digital Farm Animals、Juliander.mp3",
"basename": "All Falls Down - Alan Walker、Noah Cyrus、Digital Farm Animals、Juliander.mp3",
"lastmod": "Tue, 24 Oct 2023 04:33:14 GMT",
"size": 8047167,
"type": "file",
"etag": "1790f0f4f69010807aca3f",
"mime": "audio/mpeg"
},
{
"filename": "/阿里云盘/005音乐/All For Love - Tungevaag、Raaban、Richard Smitt.mp3",
"basename": "All For Love - Tungevaag、Raaban、Richard Smitt.mp3",
"lastmod": "Tue, 24 Oct 2023 04:33:14 GMT",
"size": 7289736,
"type": "file",
"etag": "1790f0f5089f7a406f3b88",
"mime": "audio/mpeg"
},
{
"filename": "/阿里云盘/005音乐/0321 - space x.mp3",
"basename": "0321 - space x.mp3",
"lastmod": "Tue, 24 Oct 2023 04:33:13 GMT",
"size": 7886163,
"type": "file",
"etag": "1790f0f4dd1c8fc0785553",
"mime": "audio/mpeg"
},
{
"filename": "/阿里云盘/005音乐/All 2 U - Manila Killa、Sara Skinner、Nicole Millar、Zac Poor、Stephen Rezza、Natalie Hawkins.mp3",
"basename": "All 2 U - Manila Killa、Sara Skinner、Nicole Millar、Zac Poor、Stephen Rezza、Natalie Hawkins.mp3",
"lastmod": "Tue, 24 Oct 2023 04:33:15 GMT",
"size": 10368085,
"type": "file",
"etag": "1790f0f544774d409e3455",
"mime": "audio/mpeg"
}
]
添加tag后的音乐库数据：
[
{
"filename": "/阿里云盘/005音乐/2002 - Anne-Marie.mp3",
"basename": "2002 - Anne-Marie.mp3",
"lastmod": "Tue, 24 Oct 2023 04:33:13 GMT",
"size": 7540046,
"tag":
"type": "file",
"etag": "1790f0f4d90ef6c0730d4e",
"mime": "audio/mpeg"
},
{
"filename": "/阿里云盘/005音乐/All Falls Down - Alan Walker、Noah Cyrus、Digital Farm Animals、Juliander.mp3",
"basename": "All Falls Down - Alan Walker、Noah Cyrus、Digital Farm Animals、Juliander.mp3",
"lastmod": "Tue, 24 Oct 2023 04:33:14 GMT",
"size": 8047167,
"type": "file",
"etag": "1790f0f4f69010807aca3f",
"mime": "audio/mpeg"
},
{
"filename": "/阿里云盘/005音乐/All For Love - Tungevaag、Raaban、Richard Smitt.mp3",
"basename": "All For Love - Tungevaag、Raaban、Richard Smitt.mp3",
"lastmod": "Tue, 24 Oct 2023 04:33:14 GMT",
"size": 7289736,
"type": "file",
"etag": "1790f0f5089f7a406f3b88",
"mime": "audio/mpeg"
},
{
"filename": "/阿里云盘/005音乐/0321 - space x.mp3",
"basename": "0321 - space x.mp3",
"lastmod": "Tue, 24 Oct 2023 04:33:13 GMT",
"size": 7886163,
"type": "file",
"etag": "1790f0f4dd1c8fc0785553",
"mime": "audio/mpeg"
},
{
"filename": "/阿里云盘/005音乐/All 2 U - Manila Killa、Sara Skinner、Nicole Millar、Zac Poor、Stephen Rezza、Natalie Hawkins.mp3",
"basename": "All 2 U - Manila Killa、Sara Skinner、Nicole Millar、Zac Poor、Stephen Rezza、Natalie Hawkins.mp3",
"lastmod": "Tue, 24 Oct 2023 04:33:15 GMT",
"size": 10368085,
"type": "file",
"etag": "1790f0f544774d409e3455",
"mime": "audio/mpeg"
}
]
el-tab点击获取索引
文字溢出的处理
进度条实现
沉浸模式实现：自定义事件，子向父传值
歌词滚动实现，歌词格式：
"[ti:All Time Low]
[ar:Sam Tsui]
[al:All Time Low]
[by:]
[offset:0]
[00:00.00]All Time Low - Sam Tsui/Casey Breves/Kurt Hugo Schneider
[00:11.68]I was the knight in shining armour in your movie
[00:17.25]
[00:18.88]Would put your lips on mine and love the aftertaste
[00:22.51]Now I'm a ghost I call your name you look right through me
[00:29.64]You're the reason that I just can't concentrate
[00:32.89]And I I've been trying to fix my pride
[00:37.47]But that s**t's broken that s**t's broken
[00:41.38]
[00:43.66]Lie lie lie lie l lie I try to hide
[00:48.06]But now you know it
[00:49.47]
[00:51.26]That I'm at an all time
[00:54.23]Low low low low low low low low low
[00:56.75]Low low low low low low low low low
[00:59.37]Low low low low low low low low low
[01:02.02]Low low low low low low low low low
[01:04.68]Low low low low low low low low low
[01:07.34]Low low low low low low low low low
[01:10.03]Low low low low low low low low low
[01:12.69]Low low low low low low low low low
[01:15.74]I was the prototype like 3 stacks on that CD
[01:21.80]
[01:22.95]An example of the perfect candidate
[01:26.38]Now all your girlfriends say that you don't want to see me
[01:31.98]
[01:33.60]You're the reason that I just can't concentrate
[01:37.18]I I've been trying to fix my pride
[01:41.26]But that s**t's broken that s**t's broken
[01:44.15]That s**t's broken that s**t's broken
[01:46.65]
[01:47.22]Lie lie lie lie l lie I try to hide
[01:51.97]But now you know it
[01:53.42]
[01:55.39]That I'm at an all time
[01:58.34]Low low low low low low low low low
[02:00.74]Low low low low low low low low low
[02:03.40]Low low low low low low low low low
[02:06.06]Low low low low low low low low low
[02:08.74]Low low low low low low low low low
[02:11.37]Low low low low low low low low low
[02:14.04]Low low low low low low low low low
[02:16.72]Low low low low low low low low low
[02:19.63]I I've been trying to fix my pride
[02:23.79]But that s**t's broken that s**t's broken
[02:27.92]
[02:30.28]Lie lie lie lie l lie I try to hide
[02:34.80]But now you know it
[02:36.17]
[02:38.01]That I'm at an all time
[02:40.83]Low low low low low low low low
[02:42.95]Low low low low low low low low low
[02:45.48]Low low low low
[02:46.76]Low low low low low low low
[02:48.83]That I'm at an all time
[02:51.49]
[03:02.38]I'm at an all time
[03:04.88]Low low low low low low low low low
[03:07.39]Low low low low low low low low low
[03:10.06]Low low low low low low low low low
[03:12.73]I'm at an all time
[ti:All Time Low]
[ar:Sam Tsui]
[al:All Time Low]
[by:]
[offset:0]
[00:00.00]//
[00:11.68]我是在你的电影中身披闪亮盔甲的战士
[00:17.25]
[00:18.88]将你的嘴唇落在我的唇上 我爱上了那余味
[00:22.51]我呼唤你的名字时你我将看穿 我成了游荡的鬼魂
[00:29.64]你就是我无法集中精神的原因
[00:32.89]我试着重拾我的骄傲
[00:37.47]而我的自尊已支离破碎 支离破碎
[00:41.38]
[00:43.66]用谎言去隐藏
[00:48.06]而你却很清楚
[00:49.47]
[00:51.26]这就是一直以来为什么我
[00:54.23]很难过 难过 难过
[00:56.75]很难过 难过 难过
[00:59.37]很难过 难过 难过
[01:02.02]很难过 难过 难过
[01:04.68]很难过 难过 难过
[01:07.34]很难过 难过 难过
[01:10.03]很难过 难过 难过
[01:12.69]很难过 难过 难过
[01:15.74]我像是CD架的光盘
[01:21.80]
[01:22.95]一个备胎的完美例子
[01:26.38]如今你的闺蜜都说你不想见我
[01:31.98]
[01:33.60]你就是我无法集中精神的原因
[01:37.18]我试着重拾我的骄傲
[01:41.26]而我的自尊已支离破碎
[01:44.15]支离破碎
[01:46.65]
[01:47.22]用谎言去隐藏
[01:51.97]而你却很清楚
[01:53.42]
[01:55.39]这就是一直以来为什么我
[01:58.34]很难过 难过 难过
[02:00.74]很难过 难过 难过
[02:03.40]很难过 难过 难过
[02:06.06]很难过 难过 难过
[02:08.74]很难过 难过 难过
[02:11.37]很难过 难过 难过
[02:14.04]很难过 难过 难过
[02:16.72]很难过 难过 难过
[02:19.63]我试着重拾我的骄傲
[02:23.79]而我的自尊已支离破碎 支离破碎
[02:27.92]
[02:30.28]用谎言去隐藏
[02:34.80]而你却很清楚
[02:36.17]
[02:38.01]这就是一直以来为什么我
[02:40.83]很难过 难过 难过
[02:42.95]很难过 难过 难过
[02:45.48]很难过 难过 难过
[02:46.76]很难过 难过 难过
[02:48.83]这就是一直以来为什么我
[02:51.49]
[03:02.38]我一直以来都这样
[03:04.88]很难过 难过 难过
[03:07.39]很难过 难过 难过
[03:10.06]很难过 难过 难过
[03:12.73]我一直以来都这样
"
处理内存泄漏
iconPark的使用
点击出现水波效果