为什么要做？

女朋友工作是音频后期，平常会收集一些音频音乐，需要看音频的频谱波形，每次用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"
          }
        ],