Electron+vue从零开始打造一个本地音乐播放器

本文介绍了作者为何创建一个本地音乐播放器,以及详细步骤。项目基于Electron、Vue和Node.js,功能包括关联播放、加载本地音频、前后曲切换、音量控制、自定义标题栏和自动更新。通过wavesurfer库实现波形显示,利用Electron的fileAssociations配置关联播放,fs模块读取音频文件,通过ipc通信处理多实例问题,并使用electron-updater实现自动更新。
摘要由CSDN通过智能技术生成

BCM9HI.png

为什么要做?

女朋友工作是音频后期,平常会收集一些音频音乐,需要看音频的频谱波形,每次用au这种大型软件播放音乐看波形,很不方便,看到她这么辛苦,身为程序猿的我痛心疾首,于是,就有了这么一个小软件,软件涉及到的技术主要为electron,vue,node,波形的展示主要通过wavesurfer生成。

从零开始-搭建项目

项目通过vue脚手架搭建的,所以需要安装cli工具,如果已经装了,可以跳过这一步.

npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码

装好后,通过脚手架搭建项目

vue create music
复制代码

vue需要与electron集成,这里社区已经有比较成熟的vue插件了,Vue CLI Plugin Electron Builder

vue add electron-builder
复制代码

懒人可以直接去clone我的搭建好得架子直接开发, 戳这里

从零开始-项目开发

首先先明确下这个播放器的功能需求,主要有这几个

  • 不添加文件目录,加载任意的本地文件系统内的音频文件,直接调用播放器播放
  • 前一首后一首功能
  • 声音音量控制
  • 自定义软件窗口

如何关联播放

如何实现关联播放?因为对electron不是很熟,查了很久electron的资料,终于找到了配置项,需要配置fileAssociations

        fileAssociations: [
          {
            ext: ["mp3", "wav", "flac", "ogg", "m4a"],
            name: "music",
            role: "Editor"
          }
        ],
复制代码

配置好后,通过electron的open-file事件,获取打开的音频文件的本地路径。对于windows,需要通过process.argv,来获取文件路径。

const filePath = process.argv[1];
复制代码

如何加载本地音频文件

上一步通过配置拿到文件的本地路径后,下一步就是通过路径读取音频文件的信息。由于音频的插件无法解析绝对路径,所以需要通过node的文件系统,通过

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 首先需要安装Node.js和npm。 2. 创建一个空文件夹,并进入文件夹。 3. 在命令行中输入以下命令,初始化一个新的npm项目: ``` npm init -y ``` 4. 安装electron: ``` npm install electron --save-dev ``` 5. 安装vue: ``` npm install vue ``` 6. 安装vue-cli: ``` npm install -g @vue/cli ``` 7. 创建一个新的Vue项目: ``` vue create my-project ``` 8. 进入Vue项目的根目录,安装必要的依赖: ``` cd my-project npm install --save-dev electron-builder vue-cli-plugin-electron-builder ``` 9. 创建一个新的electron主进程文件: ``` mkdir src/electron touch src/electron/index.js ``` 10. 在`src/electron/index.js`中添加以下内容: ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, } }) // 加载应用的 index.html win.loadFile('dist/index.html') // 打开开发者工具 win.webContents.openDevTools() } // Electron 会在初始化完成并准备好创建浏览器窗口时调用这个方法 // 部分 API 在 ready 事件触发后才能使用。 app.whenReady().then(createWindow) // 当全部窗口关闭时退出。 app.on('window-all-closed', () => { // 在 macOS 上,除非用户用 Cmd + Q 确定地退出, // 否则绝大部分应用及其菜单栏会保持活动状态。 if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // 在macOS上,当单击 dock 图标并且没有其他窗口打开时, // 通常在应用程序中重新创建一个窗口。 if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) ``` 11. 修改`package.json`文件,添加以下内容: ```json "main": "src/electron/index.js", "scripts": { "electron:serve": "vue-cli-service electron:serve", "electron:build": "vue-cli-service electron:build" }, "build": { "productName": "My App", "appId": "com.example.myapp", "directories": { "output": "dist_electron" }, "files": [ "dist/**/*", "src/electron/**/*" ], "extends": null, "extraResources": null }, "devDependencies": { "electron": "^13.2.1", "electron-builder": "^22.11.7", "vue-cli-plugin-electron-builder": "^2.0.0-rc.6" } ``` 12. 在命令行中运行以下命令,启动electron应用: ``` npm run electron:serve ``` 13. 如果一切正常,electron应用将会启动并显示出Vue应用的界面。现在可以开始开发Electron + Vue应用了。若要打包应用,请运行以下命令: ``` npm run electron:build ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值