myamusic

myamusic

Install

 npm i 

run

 npm start 

Pack

 npm run starting 

illustrate

Version: 1.0

Author:Tony Ma

Technology stack: vue+element+electron

Function:

• 1. Add single/multiple local music, add file directories, and delete;
• 2. Play the song, synchronize the lyrics (the lyrics lrc file has the same name, and put it in the same directory as the song), and minimize it to the tray;
• 3. List loop, single loop, random play;
• 4. Adjust playback progress, adjust volume, and mute

Project address: https://github.com/maya1900/myamusic

Update time: 2021-11-20

Problems encountered

1. Build an electron project

Here we create the vue project first, and then use vue-cli-plugin-electron-builder to complete it. After completion, just npm run electron:serve to start the application directly. There is no need to start vue first, and then start electron.

2. Set the app to be borderless

In background.js, add frame: false to options in new BrowserWindow.

3. Add local files and folders to obtain music content

When the event is clicked, the rendering process ipcRenderer is used to call the main process ipcMain. The main process receives the event, opens the file selection box, selects the file/folder, sets it in the option, and the callback function is the file path, and uses jsmediatags to process the music information;

4. audio plays local music

The audio tag cannot play local audio due to browser limitations. You need to set webSecurity to false in new BrowserWindow, or add the attribute crossOrigin to true in HTML to the audio tag.

5. Search lyrics and synchronize lyrics

Find the .lrc file with the same name in the same directory, use the fs module to read the file, and then perform data processing

6. Set up the tray

In the new Tray tray in main.js, just set the corresponding events.

7. Packaging failed

There are several resources in it that are relatively slow to download from github. You can check the error message to find the corresponding resource address, download it, and put it in the C:UsersAdministratorAppDataLocalelectronCache directory;

It is not a resource problem, delete node_modules and re-npm i;

Upload the project to github and package it

8. White screen after successfully packaged application

Remove mode: history under vue router;

Check whether each path in the project is correct and in English

9. Icon problem after packaging

The icon is placed in the build/icons directory, not less than 256x256, png/icns/ico, and the icon address is generated online: PNG to ICNS | CloudConvert

There is no problem with the development environment, but the icon disappears after packaging. Put the icon in the publick file directory, use path.join(__static, 'favicon.ico') , __static is the static directory

10. Configuration before packaging

Use this plug-in configuration or configure it in vue.config.js (reference):

 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" // 图标名称
            }
      }
    }
  }
}