Electron+vue打造一个本地播放器(附项目代码)，web前端设计与开发

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

vue add electron-builder

懒人可以直接去clone我的搭建好得架子直接开发， 戳这里 ：https://github.com/Kerinlin/simple-electron-vue-template 。

从零开始-项目开发

---

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

• 不添加文件目录，加载任意的本地文件系统内的音频文件，直接调用播放器播放

• 前一首后一首功能

• 声音音量控制

• 自定义软件窗口

如何关联播放

如何实现关联播放？因为对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的文件系统，通过fs.readFileSync读取到文件的buffer信息。

let buffer = fs.readFileSync(diskPath); //读取文件，并将缓存区进行转换

读取后需要将buffer转换成node可读流

const stream = this.bufferToStream(buffer);//将buffer数据转换成node 可读流

转换方法 bufferToStream

bufferToStream(binary) {

c