为什么要做?
女朋友工作是音频后期,平常会收集一些音频音乐,需要看音频的频谱波形,每次用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的文件系统,通过