手写一个electron本地音乐播放器

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 目录下；

不是资源问题&#