myamusic

minha música

Instalar

 npm i 

correr

 npm start 

Pacote

 npm run starting 

ilustrar

Versão: 1.0

Autor: Tony Ma

Pilha de tecnologia: vue+elemento+elétron

Função:

• 1. Adicione músicas locais únicas/múltiplas, adicione diretórios de arquivos e exclua;
• 2. Toque a música, sincronize a letra (o arquivo lrc da letra tem o mesmo nome e coloque-o no mesmo diretório da música) e minimize-o na bandeja;
• 3. Loop de lista, loop único, reprodução aleatória;
• 4. Ajuste o progresso da reprodução, ajuste o volume e silencie

Endereço do projeto: https://github.com/maya1900/myamusic

Horário de atualização: 20/11/2021

Problemas encontrados

1. Construa um projeto eletrônico

Aqui, criamos o projeto vue primeiro e, em seguida, usamos o vue-cli-plugin-electron-builder para concluí-lo. Após a conclusão, basta executar o npm electron:serve para iniciar o aplicativo diretamente. iniciar elétron.

2. Configure o aplicativo para não ter bordas

Em background.js, adicione frame: false às opções no novo BrowserWindow.

3. Adicione arquivos e pastas locais para obter conteúdo musical

Quando o evento é clicado, o processo de renderização ipcRenderer é usado para chamar o processo principal ipcMain. O processo principal recebe o evento, abre a caixa de seleção de arquivo, seleciona o arquivo/pasta, configura-o na opção, e a função de retorno de chamada é a. caminho do arquivo e usa jsmediatags para processar as informações da música;

4. o áudio reproduz música local

A tag de áudio não pode reproduzir áudio local devido a limitações do navegador. Você precisa definir webSecurity como false no novo BrowserWindow ou adicionar o atributo crossOrigin como true em HTML à tag de áudio.

5. Pesquise letras e sincronize letras

Encontre o arquivo .lrc com o mesmo nome no mesmo diretório, use o módulo fs para ler o arquivo e, em seguida, execute o processamento de dados

6. Configure a bandeja

Na nova bandeja Tray em main.js, basta definir os eventos correspondentes.

7. Falha na embalagem

Existem vários recursos nele que são relativamente lentos para baixar do github. Você pode verificar a mensagem de erro para encontrar o endereço do recurso correspondente, baixá-lo e colocá-lo em C:UsersAdministratorAppDataLocalelectronCache. diretório;

Não é um problema de recursos, exclua node_modules e re-npm i;

Carregue o projeto no github e empacote-o

8. Tela branca após aplicativo empacotado com sucesso

Modo de remoção: histórico no roteador vue;

Verifique se cada caminho do projeto está correto e em inglês

9. Problema de ícone após embalagem

O ícone é colocado no diretório build/icons, não inferior a 256x256, png/icns/ico, e o endereço do ícone é gerado online: PNG to ICNS |

Não há problema com o ambiente de desenvolvimento, mas o ícone desaparece após o empacotamento. Coloque o ícone no diretório do arquivo publick, use path.join(__static, 'favicon.ico') , __static é o diretório estático

10. Configuração antes da embalagem

Use esta configuração de plug-in ou configure-o em vue.config.js (referência):

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