myamusic

mamusique

Installer

 npm i 

courir

 npm start 

Paquet

 npm run starting 

illustrer

Version : 1.0

Auteur:Tony Ma

Pile technologique : vue+element+electron

Fonction:

• 1. Ajoutez une/plusieurs musiques locales, ajoutez des répertoires de fichiers et supprimez ;
• 2. Jouez la chanson, synchronisez les paroles (le fichier lrc des paroles porte le même nom et placez-le dans le même répertoire que la chanson) et réduisez-le dans la barre d'état ;
• 3. Boucle de liste, boucle unique, lecture aléatoire ;
• 4. Ajustez la progression de la lecture, réglez le volume et coupez le son

Adresse du projet : https://github.com/maya1900/myamusic

Heure de mise à jour : 2021-11-20

Problèmes rencontrés

1. Construisez un projet électronique

Ici, nous créons d'abord le projet vue, puis utilisons vue-cli-plugin-electron-builder pour le terminer, une fois terminé, exécutez simplement npm electronic:serve pour démarrer directement l'application. Il n'est pas nécessaire de démarrer vue d'abord, puis. démarrer l'électron.

2. Configurez l'application pour qu'elle soit sans frontières

Dans background.js, ajoutez frame: false aux options du nouveau BrowserWindow.

3. Ajoutez des fichiers et des dossiers locaux pour obtenir du contenu musical

Lorsque l'on clique sur l'événement, le processus de rendu ipcRenderer est utilisé pour appeler le processus principal ipcMain. Le processus principal reçoit l'événement, ouvre la boîte de sélection de fichier, sélectionne le fichier/dossier, le définit dans l'option et la fonction de rappel est la. chemin du fichier et utilise jsmediatags pour traiter les informations musicales ;

4. L'audio diffuse de la musique locale

La balise audio ne peut pas lire l'audio local en raison des limitations du navigateur. Vous devez définir webSecurity sur false dans la nouvelle BrowserWindow ou ajouter l'attribut crossOrigin à true en HTML à la balise audio.

5. Rechercher des paroles et synchroniser les paroles

Recherchez le fichier .lrc du même nom dans le même répertoire, utilisez le module fs pour lire le fichier, puis effectuez le traitement des données

6. Installez le plateau

Dans le nouveau plateau Tray dans main.js, définissez simplement les événements correspondants.

7. L'emballage a échoué

Il contient plusieurs ressources qui sont relativement lentes à télécharger depuis github. Vous pouvez vérifier le message d'erreur pour trouver l'adresse de la ressource correspondante, la télécharger et la placer dans C:UsersAdministratorAppDataLocalelectronCache. annuaire;

Ce n'est pas un problème de ressources, supprimez node_modules et re-npm i ;

Téléchargez le projet sur github et emballez-le

8. Écran blanc après une application emballée avec succès

Mode Supprimer : historique sous vue router ;

Vérifiez si chaque chemin du projet est correct et en anglais

9. Problème d'icône après l'emballage

L'icône est placée dans le répertoire build/icons, pas moins de 256x256, png/icns/ico, et l'adresse de l'icône est générée en ligne : PNG vers ICNS CloudConvert |

Il n'y a aucun problème avec l'environnement de développement, mais l'icône disparaît après l'empaquetage. Mettez l'icône dans le répertoire du fichier publick, utilisez path.join(__static, 'favicon.ico') , __static est le répertoire statique

10. Configuration avant emballage

Utilisez cette configuration de plug-in ou configurez-la dans vue.config.js (référence) :

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