js+java后台 基于开源项目上实现web端音频可视化（three.js）（一）

开源代码
原项目
本项目是在github一个开源项目的基础上，简单添加了一些功能：
一、播放本地音频文件
1.前端实现细节
2.后端实现
二、小程序录音上传到后台，后台发送给前端进行播放
3.实时录音（未实现）
所以更多的是学习下后台功能，代码实现的逻辑
效果图

1.前端实现细节
这里先讲解下播放本地音频文件是如何实现的
.
.
.
.

首先，讲讲音频文件如何加载的。

如果想了解下js音频可视化的代码是如何实现的，可以看这篇文章学习下：
HTML5 随音乐节奏变化的频谱图动画
里面会讲到AudioContext如何解析音频文件实现可视化。

回归本项目，audioload函数将本地资源路径或者是文件（通过按钮选择提交文件）传入，其细节是在chunk开头的js文件实现的，原项目做的实在太牛逼了（麻省理工的人开发的）3w多行代码= =开发了近1个月，也就只看了很少一部分的代码。。

可以试着用控制台打印下，然后会发现其底层也同样是用媒体流实现的

用音频环境，也就是说，他是用音频缓冲区进行解析播放（其实音频可视化也就这个API能用吧，看了很多js的音频可视化项目，全部都是用到了AudioContext，也就是处理音频的API）。打印了一波发现果不其然

所以这里的所有音频都是转化为了AudioBuffer的。这个chunk文件实现了将音频文件转AudioBuffer（其实也很简单，用一些API就可以实现blob,ArrayBuffer,AudioBuffer互转，AudioContext对象的decodeAudioData()就可以使ArrayBuffer转AudioBuffer),我们只需要把文件路径传进去就行了,不用管这些。

那么这里还有一个问题，出于安全考虑，浏览器限制了访问的权限，除了该项目的静态资源外，本地资源是不能被访问的。如何加载本地文件？
如果作为静态资源，那么一次性将所有歌曲加载到tomcat容器上，显然是不太合理的，那么最好就是将本地资源映射到tomcat上，这里请看另一篇文章：idea配置tomcat本地资源路径
这样就可以让本地资源被访问啦。

然后就是前端与后台的交互功能的实现了。

1.前端如何按照我们本地资源列表来播放歌曲呢。

首先发送httpget请求，请求后端给我们回消息

而我们后端只需要像传输指令一样，告诉前端音乐的路径就好了

前端将拿到的路径进行加载，也就是调用audioLoad(“path”)，json是后端传输过来的音频路径。

这里提一下：这里前端访问音频路径是从工程的绝对路径开始的，也就是127.0.0.1:12222,所以后台只需写后面的相对路径就好了。

也就是如上图，实际上完整路径是127.0.0.1:12222/musicplay/door.mp3

这也就是需要配置tomcat的原因，浏览器限制了访问路径，将本地目录进行配置就可以让该文件能够被访问。