myamusic

miamusica

Instalar

 npm i 

correr

 npm start 

Embalar

 npm run starting 

ilustrar

Versión: 1.0

Autor:Tony Ma

Pila de tecnología: vue + elemento + electrón

Función:

• 1. Agregue música local única o múltiple, agregue directorios de archivos y elimine;
• 2. Reproduzca la canción, sincronice la letra (el archivo lrc de letras tiene el mismo nombre y colóquelo en el mismo directorio que la canción) y minimícelo en la bandeja;
• 3. Bucle de lista, bucle único, reproducción aleatoria;
• 4. Ajustar el progreso de la reproducción, ajustar el volumen y silenciar

Dirección del proyecto: https://github.com/maya1900/myamusic

Hora de actualización: 2021-11-20

Problemas encontrados

1. Construya un proyecto electrónico

Aquí primero creamos el proyecto vue y luego usamos vue-cli-plugin-electron-builder para completarlo. Una vez completado, simplemente ejecute npm electron:serve para iniciar la aplicación directamente. No es necesario iniciar vue primero y luego. iniciar electrón.

2. Configure la aplicación para que no tenga bordes.

En background.js, agregue frame: false a las opciones en la nueva ventana del navegador.

3. Agregue archivos y carpetas locales para obtener contenido musical.

Cuando se hace clic en el evento, el proceso de representación ipcRenderer se utiliza para llamar al proceso principal ipcMain. El proceso principal recibe el evento, abre el cuadro de selección de archivos, selecciona el archivo/carpeta, lo configura en la opción y la función de devolución de llamada es la. ruta del archivo y utiliza jsmediatags para procesar la información musical;

4. el audio reproduce música local

La etiqueta de audio no puede reproducir audio local debido a limitaciones del navegador. Debe configurar webSecurity en falso en la nueva BrowserWindow o agregar el atributo crossOrigin en verdadero en HTML a la etiqueta de audio.

5. Buscar letras y sincronizar letras

Busque el archivo .lrc con el mismo nombre en el mismo directorio, use el módulo fs para leer el archivo y luego realice el procesamiento de datos

6. Configure la bandeja

En la nueva bandeja Tray en main.js, simplemente configure los eventos correspondientes.

7. El embalaje falló

Hay varios recursos que son relativamente lentos para descargar desde github. Puede verificar el mensaje de error para encontrar la dirección del recurso correspondiente, descargarlo y colocarlo en C:UsersAdministratorAppDataLocalelectronCache. directorio;

No es un problema de recursos, elimine node_modules y vuelva a npm i;

Sube el proyecto a github y empaquetalo

8. Pantalla blanca después de empaquetar la aplicación exitosamente

Modo de eliminación: historial en el enrutador vue;

Compruebe si cada ruta del proyecto es correcta y está en inglés.

9. Problema con los iconos después del embalaje.

El ícono se coloca en el directorio build/icons, no menos de 256x256, png/icns/ico, y la dirección del ícono se genera en línea: PNG a ICNS |

No hay ningún problema con el entorno de desarrollo, pero el ícono desaparece después del empaquetado. Coloque el ícono en el directorio de archivos publick, use path.join(__static, 'favicon.ico') , __static es el directorio estático

10. Configuración antes del embalaje

Utilice esta configuración de complemento o configúrelo en vue.config.js (referencia):

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