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 目录下；
不是资源问题，删掉node_modules，重新npm i；
将项目上传至github再进行打包
8. 打包成功应用白屏
去掉vue router下的mode: history；
检查项目里的各个路径是否正确，是否英文
9. 打包后图标问题
图标放在build/icons目录下，不小于256x256，png/icns/ico,在线生成图标地址：PNG to ICNS | CloudConvert
开发环境没问题，打包后图标消失。把图标放在publick文件目录下，使用path.join(__static, 'favicon.ico')， __static为静态目录
10. 打包前的配置
使用这个插件配置还是在vue.config.js中进行配置(参考)：
module.exports = {
pluginOptions: {
electronBuilder: {
nodeIntegration: true,
builderOptions: {
"productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
"appId": "xxxxx",//包名
"copyright":"xxxx",//版权 信息
"compression": "store", // "store" | "normal"| "maximum" 打包压缩情况(store 相对较快)，store 39749kb, maximum 39186kb
"directories": {
"output": "build" // 输出文件夹
},
"asar": false, // asar打包
"extraResources": { // 拷贝dll等静态文件到指定位置
"from": "./app-update.yml",
"to": "./b.txt"
},
"win": {
"icon": "xxx/icon.ico"//图标路径,
"extraResources": { // 拷贝dll等静态文件到指定位置(用于某个系统配置)
"from": "./app-update.yml",
"to": "./b.txt"
}
},
"nsis": {
"oneClick": false, // 一键安装
"guid": "xxxx", //注册表名字，不推荐修改
"perMachine": true, // 是否开启安装时权限限制（此电脑或当前用户）
"allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, // 允许修改安装目录
"installerIcon": "./build/icons/aaa.ico", // 安装图标
"uninstallerIcon": "./build/icons/bbb.ico", //卸载图标
"installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true, // 创建开始菜单图标
"shortcutName": "xxxx" // 图标名称
}
}
}
}
}
最后
查了很多资料，如没有添加您的参考链接，请及时联系我~~
