myamusic

musikku

Memasang

 npm i 

berlari

 npm start 

Mengemas

 npm run starting 

menjelaskan

Versi: 1.0

Pengarang:Tony Ma

Tumpukan teknologi: vue+elemen+elektron

Fungsi:

• 1. Tambahkan satu/beberapa musik lokal, tambahkan direktori file, dan hapus;
• 2. Putar lagu, sinkronkan liriknya (file lirik lrc memiliki nama yang sama, dan letakkan di direktori yang sama dengan lagu tersebut), dan perkecil ke baki;
• 3. Daftar loop, loop tunggal, pemutaran acak;
• 4. Sesuaikan kemajuan pemutaran, sesuaikan volume, dan bisu

Alamat proyek: https://github.com/maya1900/myamusic

Waktu pembaruan: 20-11-2021

Masalah yang dihadapi

1. Bangun proyek elektron

Di sini kita membuat proyek vue terlebih dahulu, lalu menggunakan vue-cli-plugin-electron-builder untuk menyelesaikannya. Setelah selesai, cukup npm run electron:serve untuk memulai aplikasi secara langsung mulai elektron.

2. Atur aplikasi menjadi tanpa batas

Di background.js, tambahkan frame: false ke opsi di BrowserWindow baru.

3. Tambahkan file dan folder lokal untuk mendapatkan konten musik

Ketika event diklik, proses rendering ipcRenderer digunakan untuk memanggil proses utama ipcMain. Proses utama menerima event, membuka kotak pemilihan file, memilih file/folder, mengaturnya dalam opsi, dan fungsi panggilan balik adalah fungsi panggilan balik. jalur file, dan menggunakan jsmediatags untuk memproses informasi musik;

4. audio memutar musik lokal

Tag audio tidak dapat memutar audio lokal karena keterbatasan browser. Anda perlu menyetel webSecurity ke false di BrowserWindow baru, atau menambahkan atribut crossOrigin ke true dalam HTML ke tag audio.

5. Cari lirik dan sinkronkan lirik

Temukan file .lrc dengan nama yang sama di direktori yang sama, gunakan modul fs untuk membaca file tersebut, lalu lakukan pemrosesan data

6. Siapkan baki

Di baki Baki baru di main.js, cukup atur acara yang sesuai.

7. Pengemasan gagal

Ada beberapa sumber daya di dalamnya yang relatif lambat untuk diunduh dari github. Anda dapat memeriksa pesan kesalahan untuk menemukan alamat sumber daya yang sesuai, mengunduhnya, dan meletakkannya di C:UsersAdministratorAppDataLocalelectronCache. direktori;

Ini bukan masalah sumber daya, hapus node_modules dan npm ulang i;

Unggah proyek ke github dan kemas

8. Layar putih setelah aplikasi berhasil dikemas

Hapus mode: riwayat di bawah router vue;

Periksa apakah setiap jalur dalam proyek sudah benar dan dalam bahasa Inggris

9. Masalah ikon setelah pengemasan

Ikon ditempatkan di direktori build/icons, tidak kurang dari 256x256, png/icns/ico, dan alamat ikon dibuat secara online: PNG ke ICNS |

Tidak ada masalah dengan lingkungan pengembangan, tetapi ikonnya hilang setelah pengemasan. Letakkan ikon di direktori file publick, gunakan path.join(__static, 'favicon.ico') , __static adalah direktori statis

10. Konfigurasi sebelum pengemasan

Gunakan konfigurasi plugin ini atau konfigurasikan di vue.config.js (referensi):

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