myamusic

myamusic

安裝

 npm i 

運行

 npm start 

打包

 npm run starting 

說明

版本：1.0

作者：Tony Ma

技術堆疊：vue+element+electron

功能：

• 1.新增單/多個本地音樂，新增檔案目錄，刪除delete；
• 2.播放歌曲，歌詞同步(歌詞lrc檔案同名，放和歌曲同級目錄下)，最小化到托盤；
• 3.清單循環、單曲循環、隨機播放；
• 4.調整播放進度，調整音量、靜音

專案網址：https://github.com/maya1900/myamusic

更新時間：2021-11-20

遇到的問題

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:UsersAdministratorAppDataLocalelectronCache目錄下；

不是資源問題，刪掉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" // 图标名称
            }
      }
    }
  }
}