myamusic

ミャムミュージック

インストール

 npm i 

走る

 npm start 

パック

 npm run starting 

説明する

バージョン: 1.0

著者:トニー・マー

テクノロジースタック: vue+element+electron

関数：

• 1. 単一または複数のローカル音楽を追加し、ファイル ディレクトリを追加し、削除します。
• 2. 曲を再生し、歌詞を同期し (歌詞 lrc ファイルは同じ名前で、曲と同じディレクトリに置きます)、トレイに最小化します。
• 3. リストループ、シングルループ、ランダム再生。
• 4. 再生の進行状況を調整し、音量を調整し、ミュートします。

プロジェクトアドレス: https://github.com/maya1900/myamusic

更新時間: 2021-11-20

発生した問題

1. 電子プロジェクトを構築する

ここでは、最初に vue プロジェクトを作成し、次に vue-cli-plugin-electron-builder を使用してそれを完了します。完了したら、npm run electric:serve だけでアプリケーションを直接起動します。最初に vue を起動する必要はありません。電子を起動します。

2. アプリをボーダレスに設定する

background.js で、新しい BrowserWindow のオプションに Frame: false を追加します。

3. ローカルファイルとフォルダーを追加して音楽コンテンツを取得します

イベントがクリックされると、レンダリング プロセス ipcRenderer がメイン プロセス ipcMain を呼び出すために使用されます。メイン プロセスはイベントを受け取り、ファイル選択ボックスを開き、ファイル/フォルダーを選択してオプションに設定します。コールバック関数はファイルパスを取得し、jsmediatags を使用して音楽情報を処理します。

4.オーディオはローカル音楽を再生します

ブラウザの制限のため、audio タグはローカル オーディオを再生できません。新しい BrowserWindow で webSecurity を false に設定するか、HTML で属性 crossOrigin を true に追加する必要があります。

5. 歌詞の検索と歌詞の同期

同じディレクトリ内で同じ名前の .lrc ファイルを見つけ、fs モジュールを使用してファイルを読み取り、データ処理を実行します。

6. トレイをセットアップする

main.js の新しい Tray トレイに、対応するイベントを設定するだけです。

7. 梱包に失敗しました

この中には、github からのダウンロードが比較的遅いリソースがいくつかあります。エラー メッセージを確認して、対応するリソース アドレスを見つけてダウンロードし、 C:UsersAdministratorAppDataLocalelectronCacheに配置します。ディレクトリ;

これはリソースの問題ではありません。node_modules を削除して npm i を再実行してください。

プロジェクトをgithubにアップロードしてパッケージ化する

8. アプリケーションが正常にパッケージ化された後の白い画面

削除モード: vue ルーターの履歴;

プロジェクト内の各パスが正しく、英語であるかどうかを確認します。

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