用Vue如何从0开始作一个在线的web音频编辑器

1、音频编辑器是什么？

音频编辑器是一款在线的音频编辑软件，供up主或专业的音乐制做人使用，须要具有必定的乐理知识。好比认识节拍、伴奏、小节、4/4音符、音高、响度、张力等等。这样他们能够创做出一些音频出来。同时提供了对应的音源、歌曲等，提升他们的创做效率
在线web音频编辑器连接：yan.qq.com/audioEditor
编辑器使用的技术包括：Vue2.x + Vuex + Vue-cli + Vue-router + svg + axios + element-ui 等

2、音频编辑器怎么用？

下面是几个使用的视频说明前端

3、音频编辑器怎么作？

【1】、实现基本原理

音高块：用鼠标在页面画音块，每一个音块有本身宽高坐标位置，单位为px -> 经过bpm（曲速）节拍与px的相应关系换算成时间 -> 合成每一个音块的时间去给后端合成 -> 合成音频连接后回来播放并移动播放线。
音高线：获取用户在屏幕上鼠标移动的位置->将这些位置与AI返回的这首歌该有的音高线进行拟合，从而获得一条用户画的音高线->再根据节拍、曲速和px的对应关系换算成数据集合，传递给后端，从而合成一首歌-> 后端返回这首歌的连接给我，在前端进行播放，并作相应操做。

【2】、总体数据架构设计

整个编辑器的数据设计大概如上图所示，主要是依托Vuex这个数据管理仓库，在开发大型单页应用的时候，能够帮助咱们管理共享状态，管理整个页面的数据流向。主要管理的数据分红几大模块：
- 一、编辑器的基本元素，如：曲速、音源、整个舞台相关、宽度、高度、节拍、播放线等。
- 二、存储整个舞台的音块数据：stagePitches, 这个在合成的时候会转成 pitchList，给后台合成声音音频并回来播放。
- 三、音高线：分红了AI合成的参考音高线和用户编辑过的音高线，还有px对应本地编辑部分。
- 四、操做标志：由于这个编辑器的合成依托了不少状态的修改，一修改就会要求去判断是否须要合成播放，和接下来要说的播放暂停控制状态来回切换强相关
- 五、模式的切换：如音符/音高线/音素模式切换

【3】、总体组件框架

【4】、重难点突破

（1）、播放状态切换的问题 -> 使用有限状态机解决：

当播放控制按钮一点击就有几个状态，每一个状态须要不一样处理，同时里面的操做又有相同的操做，互相耦合，这时如何分配就成了一个问题。后面梳理了下，参考了一些源码，就发现这是一个状态机的转换。接下来如何作呢？具体以下：node

1. 首先，列出页面须要用到的全部状态

2. 一开始代码是这样的，有不少的if-else,每一个if else里面又有不少判断。

3. 改形成状态机是以下的形式。

为何要改形成以下的方式呢，主要是代码中有太多的if else会致使扩展性比较差，然后面若是你要扩展新的状态就会不知道从何入手，而使用状态机的方式，就能够不断的往里面扩展新的状态。这也是参考了Typescript源码是利用状态机使流程更清晰。

Typescript源码中的状态机

首先 tsc 划分了不少状态，每种状态处理一种逻辑。好比：

1）. CreateProgram 把源码 parse 成 ast 2）. SyntaxDiagnostics 处理语法错误 3）. SemanticDiagnostics 处理语义错误而后Typescript 就经过这种状态的修改来完成不一样处理逻辑的流转，若是处理到结束状态就表明流程结束。这样使得总体流程能够很轻易的扩展和修改，好比想扩展一个阶段，只要增长一个状态，想修改某种状态的处理逻辑，只须要修改下状态机的该状态的转向。而不是大量的 if else 混杂在一块儿，难以扩展和修改。ios

4. 最终就造成状态机，状态切换流程图以下：

页面一来都是一个初始状态，当去播放的时候，就会切换到播放状态，这时若是还在播放，点击那就是暂停播放，而且切换到暂停状态，而后当暂停状态去播放的时候，又会切换到播放状态，播放状态完了，会切换到结束状态，结束状态再去播放，会从新切换到播放状态。直到整个音频结束。web

5. 另外在流程图中，咱们发现每次播放的时候，都须要去判断是否须要合成，这时候就用到了上面说到的操做标志状态的监听，就是只要有一个状态改变了，就会去从新合成。

（2）、播放进度不流畅的问题 -> 借用requestAnimationFrame去解决

去播放以后，在播放的时候，出现播放进度不流畅。出现线移动很卡顿的问题。这个是为何呢，主要是由于浏览器16ms渲染一次页面。那为何浏览器16ms渲染一次页面呢？chrome

由于如今普遍使用的屏幕都有固定的刷新率（好比最新的通常在 60Hz），在两次硬件刷新之间浏览器进行两次重绘是没有意义的只会消耗性能。因此浏览器会利用这个间隔 16ms（1000ms/60）适当地对绘制进行节流
这时候就须要使用requestAnimationFrame去解决，为何他能够解决呢？这个主要就是由于浏览器的为了让开发者能把握渲染前的那个点，在每次渲染以前，执行完宏任务后去执行requestAnimationFrame。以后，再去执行下一次渲染，固然执行宏任务以前要先把宏任务里面的微任务先执行完。具体的步骤就是：执行本次宏任务下的全部微任务 -> 执行本次宏任务 -> 执行requestAnimationFrame（若是有） ->执行下一次宏任务下的全部微任务 -> ....，以此类推。

首先声明一个playAudio的方法，这个方法就是负责播放这个音频，设置完音频的基本属性，如播放连接等，监听播放的属性。

2.接着在播放的时候监听到播放了，就移动播放线，怎么移动呢，使用requestAnimationFrame在播放的时候将线进行移动。就能解决播放进度不流畅的问题。element-ui

（3）、拖音块的时候，鼠标移出了音块，失去了焦点，怎么解决这个问题？ -> 借助虚拟块

咱们在用鼠标移动音块，可能不当心触碰了鼠标滚动按钮，致使鼠标和音块失去了焦点，就不能脱离了。问题展现以下

这个主要是参考了chrome浏览器的作法，鼠标点击后粘住了一个虚拟的块，这样鼠标永远就不会出现失去焦点的状况canvas
解决方案：在点击鼠标的时候，起一个蒙层，透明的，粘住鼠标，鼠标到哪里，蒙层就跟到哪里，而后当鼠标一放开的时候就去掉这个蒙层。从而达到比较顺滑的效果。下面就是有一个透明的红色透明的蒙层盖在音块上面，而后就永远都不会失去焦点了。axios

（4）、钢琴键如何发音的问题 -> 借助Web Audio API

点击左边这个钢琴键，要出声音，怎么出呢？问题就是音源怎么来，再如何定位一个他的音高。
首先音源很简单，加载一个C4标准音C4.mp4

而后经过Web Audio API 这个，而后拿到这段音频以后转成二进制数据流，而后将这段音频的音高进行偏移，偏移的公式主要是playback-rate(a,b)=2 ** ((note - 60) / 12)。60就是C4的音高，而后note就是传入的note值，而后进行音高的转换。具体能够参考这篇文章zpl.fi/pitch-shift… 实现出的代码就是以下：windows

（5）、音高线的相关问题

1. 音高线画线技术选型，调研了一波，对比了canvas和svg.

canvas：优势：性能好，流畅。缺点：前期须要搭建大量的基础代码，来操做，并且绘制的时候须要的工做量也很大。代码比较多。
svg: 优势：是一个dom元素，自带一些基本dom操做的功能。缺点：性能不是很好，由于直接操做dom会引发整个浏览器的重排，重排就会致使浏览器的从新渲染过程。可是写的代码量少不少。
综合考虑，这是一个pc端页面，用户的电脑性能确定比手机h5页面好，并且时间紧张，就采用了svg.

2. 音高线如何画 -> 借助svg

使用svg的path 属性经过音块解析出来的音高线的每隔10ms的点，转换成屏幕上对应的px，而后将每一个点绘上去。

3. 画线出现锯齿怎么解决 -> 补帧

如上所示，当鼠标移动的很是快的时候，音高线出现锯齿，这是什么缘由呢。主要也是浏览器每隔16ms渲染一次页面致使。当鼠标移动很是快，浏览器来不及渲染，就丢失鼠标通过的位置，这时候应该怎么办呢，就只能补桢，把丢失的数据补回去。具体实现以下：后端

这里补帧逻辑就是算出上一个鼠标的x轴和如今的x轴，而后得出他们的y轴相差的距离，而后循环下，将数据给补上去。

4. 数据量大的问题怎么解决 -> 优化字符串操做+分组渲染

当数据量很是大的时候，就会出现浏览器渲染慢的问题，致使音高线的修改不会跟着鼠标走，这个主要是由于数据量很是大的时候，dom渲染太大。因此我进行了分组渲染+字符串操做改为数组操做。从原来的一个svg放全部的数据，变成多个svg分开放数组，这样更改的时候，只改了这个svg中的数据。

5. 切换bpm后怎么解决音高线突变问题 -> 拦截数据请求，在数据请求前保存不变，数据请求后才改变

由于咱们音高线和bpm是强相关的（由于咱们须要AI的参考线）。因此当bpm一改的时候。线就会突变，这是由于Vue是MVVM模式的，当数据一改的时候，页面就会相应改动，再去拿到音高线AI合成的数据后去拟合。最终获得咱们想要的。因此就会有一个变化的过程
这个问题怎么解决呢，就只能是在去获取音高线的时候，等数据来以前先把bpm设置回原来的bpm，而后再改回新的bpm.代码以下：

（6）、撤回（ctrl+z）和取消撤回（ctrl+y）快捷键 -> 使用命令模式进行解决。

这里主要是参考了three.js中编辑器的作法，使用命令模式，将须要undo和redo的操做都放在command里面去处理。

three.js

查看three.js中带的编辑器的源码能够看到，里面有一个自带的commands文件，而后放着全部须要撤回的操做。每一个command里面都要本身写undo和redo.

因此借着three.js的思路，就来设计本身编辑器的undo和redo.

首先定义一个history.js文件，来存储全部undo和redo,而后定义两个栈去保存全部的操做，分别是撤回栈和前进栈。而后每次操做的时候，将操做放到撤回栈中，当须要撤回的时候，将撤回栈中最后一个拿出来，而后执行，顺便给前进栈放进去。当须要前进的时候，将前进栈中最后一个拿出来，执行，而且将这个操做放进撤回栈中，而后下次须要撤回，能够在撤回栈中继续执行。

具体代码以下： 2. 定义一个编辑器类，将咱们的history引入进来，同时注册到全局，而且提供相应的undo.redo等方法。

3.在须要撤回的地方就注册相应的command，并在command里面作相应操做。好比在删除音块的时候注册command

在DeletePitchCommand中作相应操做

这样就实现了undo和redo了。

（7）、如何实现开发一次，三端（mac/windows/web）都能用 -> 借助electron

调研了一下如今市场上的方案，主要咱们前端经常使用的vscode都用的electron去打包实现pc客户端，并且比较成熟了，因此就选用electron去打包个人代码，而后生成客户端安装包，在页面上有入口点击以后就能够去下载了。具体实现，就是借助electron中是带了chrome浏览器内核+node.js机制，引入打包工具，这样就能够实现跑浏览器代码了。

4、对将来的展望

svg换成canvas实现，可是须要构建canvas基础事件，并且也会遇到浏览器渲染问题，这个考虑是否要这样作。
将音源识别出来与数据合成一首歌？若是能实现的话，能够解决用户调试等待时间的问题与消耗机器和CPU资源的问题，有待验证。
若是有时间的话，能够将代码重构成Vue3+ Typescript

以上，就是个人全部分享，若有错误与遗漏，望指出。