myamusic

моямузыка

Установить

 npm i 

бегать

 npm start 

Пакет

 npm run starting 

иллюстрировать

Версия: 1.0

Автор: Тони Ма

Стек технологий: vue+element+electron

Функция:

• 1. Добавьте одну или несколько локальных музыкальных композиций, добавьте каталоги файлов и удалите их;
• 2. Воспроизведите песню, синхронизируйте текст (файл lrc с текстами песен имеет то же имя и поместите его в тот же каталог, что и песня) и сверните его в трей;
• 3. Цикл списка, одиночный цикл, случайное воспроизведение;
• 4. Отрегулируйте ход воспроизведения, отрегулируйте громкость и отключите звук.

Адрес проекта: https://github.com/maya1900/myamusic

Время обновления: 20.11.2021.

Возникшие проблемы

1. Создайте электронный проект

Здесь мы сначала создаем проект vue, а затем используем vue-cli-plugin-electron-builder для его завершения. После завершения просто запустите npm Electron:serve, чтобы запустить приложение напрямую. Нет необходимости сначала запускать vue, а затем. запустить электрон.

2. Установите приложение без полей.

В background.js добавьтеframe: false к параметрам в новом BrowserWindow.

3. Добавьте локальные файлы и папки для получения музыкального контента.

При нажатии на событие процесс рендеринга ipcRenderer используется для вызова основного процесса ipcMain. Основной процесс получает событие, открывает окно выбора файла, выбирает файл/папку, устанавливает его в параметре, а функция обратного вызова является функцией обратного вызова. путь к файлу и использует jsmediatags для обработки музыкальной информации;

4. аудио воспроизводит местную музыку

Тег audio не может воспроизводить локальный звук из-за ограничений браузера. Вам необходимо установить для параметра webSecurity значение false в новом BrowserWindow или добавить для атрибута crossOrigin значение true в HTML к тегу audio.

5. Ищите тексты песен и синхронизируйте тексты песен.

Найдите файл .lrc с таким же именем в том же каталоге, используйте модуль fs для чтения файла, а затем выполните обработку данных.

6. Установите лоток

В новом трее в main.js просто установите соответствующие события.

7. Упаковка не удалась

В нем есть несколько ресурсов, которые относительно медленно загружаются с github. Вы можете проверить сообщение об ошибке, чтобы найти соответствующий адрес ресурса, загрузить его и поместить в папку C:UsersAdministratorAppDataLocalelectronCache. каталог;

Это не проблема с ресурсами, удалите node_modules и перезапустите npm i;

Загрузите проект на github и упакуйте его.

8. Белый экран после успешной упаковки приложения.

Режим удаления: история под vue router;

Проверьте, правильный ли каждый путь в проекте и на английском языке.

9. Проблема со значком после упаковки.

Значок размещается в каталоге build/icons размером не менее 256x256, png/icns/ico, а адрес значка генерируется онлайн: PNG to ICNS |

Со средой разработки проблем нет, но после упаковки значок пропадает. Поместите значок в каталог файлов 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" // 图标名称
            }
      }
    }
  }
}