一,
项目名为QIUXI-MUSIC-PLAYER;
在 components 中,
-把项目分为
--Fooders,底部音乐播放区块(参考了网易云音乐)
--Heads,头部信息区块
--Main, 中心区块,主要是歌曲图形化
--store, 调用了 pinia 实现了mp3选取功能
在store文件夹中,Musicph.vue歌曲信息与歌曲源文件联系
使用了Naive UI来简化vue代码
项目流程为:
1.用户进入网页选择歌曲获得歌曲key;
2.调用 pinia 在Musicph.vue歌曲信息查找mp3源文件;
3.设置标签audio_src 为 获取到的MP3源文件url;
4.播放audio,并在Heads中显示歌曲名;
5.在Footers中, 显示歌曲与作者,歌曲时长,进度条。
综上,用户选择歌曲,上方显示歌曲名,底部播放器播放音乐.