myaMusic
一个基于 electron-vue 开发的音乐播放器
使用:vue+element+electron
源码地址: maya1900/myamusic: a simple local music player. (github.com)
安装
npm i
运行
npm start
打包
npm run starting
说明
- 1.添加单/多个本地音乐,添加文件目录,删除delete;
- 2.播放歌曲,歌词同步(歌词lrc文件同名,放和歌曲同级目录下),最小化到托盘;
- 3.列表循环、单曲循环、随机播放;
- 4.调整播放进度,调节音量、静音
遇到的问题
1. 搭建electron项目
这里先创建vue项目,再使用vue-cli-plugin-electron-builder完成的,完成后直接npm run electron:serve即可直接启动应用,不用先启动vue,再启动electron。
2. 设置应用无边框
在background.js,new BrowserWindow时options里添加frame: false即可
3. 添加本地文件、文件夹,获取音乐内容
点击事件时使用渲染进程ipcRenderer调用主进程ipcMain,主进程里接收事件,打开文件选择框选择文件/文件夹,在option里设置,回调函数为文件路径,使用jsmediatags来处理得到音乐信息;
4. audio播放本地音乐
audio标签因为浏览器的限制,不能播放本地音频,需要在new BrowserWindow时设置webSecurity为false,或者html里给audio标签加入属性crossOrigin为true
5. 查找歌词、歌词同步
找到相同目录下相同名称的.lrc文件,使用fs模块来读取文件,再进行数据处理
6. 设置托盘
main.js里new Tray托盘,设置好对应事件即可
7. 打包失败
里面有几个资源是下载github的比较慢,可以查看报错信息找到相应资源地址下载后放到C:\Users\Administrator\AppData\Local\electron\Cache 目录下;
不是资源问题&#